rss

Minggu, 08 Agustus 2010

DeddyCamp.com

DeddyCamp.com


Membuat Horizontal Menu Dropdown (Versi 2)

Posted: 07 Aug 2010 11:14 AM PDT


Membuat Horizontal Menu Dropdown, pada posting sebelumnya saya telah membahas Tentang Artikel ini yaitu Cara Membuat Horizontal Menu Dropdown . Pada posting sebelumnya ada teman blogger bernama Moch.Ghozali yang ingin Horizontal Menu Dropdown seperti punya saya, baiklah silahkan simak penjelasan berikut:

1. Silahkan Login Blogger

2. Langsung menuju Edit HTML

3. Jangan lupa Backup Template anda terlebih dahulu

4. Contreng Expand Widget Template

5. Cari kode ]]></b:skin> dan letakkan kode berikut sebelum kode ]]></b:skin>

#NavbarMenu {
background:#1d1313 url(http://lh6.ggpht.com/_pt7i0nbIOCY/SeBPD1yqObI/AAAAAAAABt4/NG52XwhwAHQ/bgnav_thumb%5B1%5D.png) repeat-x center;
width: 960px;
height: 35px;
color: $navcolor;
margin: 0 auto;
padding: 0;
font: bold 8px Trebuchet MS;
}

#NavbarMenuleft {
width: 650px;
float: left;
margin: 0;
padding: 0;
}

#search {
width: 240px;
font-size: 11px;
float: right;
margin: 0;
padding:0;
}

#nav {
margin: 0;
padding: 0;
}

#nav ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
}

#nav li {
list-style: none;
margin: 0;
padding: 0;
}

#nav li a, #nav li a:link, #nav li a:visited {
color: $navcolor;
display: block;
text-transform: uppercase;
margin: 0;
padding: 9px 15px 8px;
font: bold 11px Trebuchet MS;
border-right:1px solid #000;
}

#nav li a:hover, #nav li a:active {
background:#000 url(http://lh6.ggpht.com/_pt7i0nbIOCY/SeBSfNbxQ_I/AAAAAAAABuA/lQToFnYZHKI/navhover_thumb%5B1%5D.png) repeat-x;
color: #e6e1e1;
margin: 0;
padding: 9px 15px 8px;
text-decoration: none;
}

#nav li li a, #nav li li a:link, #nav li li a:visited {
background:#000;
width: 150px;
color: #fff;
text-transform: lowercase;
float: none;
margin: 0;
padding: 7px 10px;
font: normal 13px Trebuchet MS;
}

#nav li li a:hover, #nav li li a:active {
color: #e0dbdb;
padding: 7px 10px;
background:#5c5858;
}

#nav li {
float: left;
padding: 0;
}

#nav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 170px;
margin: 0;
padding:10px;
background:#000;
border-bottom:3px solid #C30606;
}

#nav li ul a {
width: 140px;
}

#nav li ul ul {
margin: -32px 0 0 171px;
padding:10px;
background:#000;
border-bottom:3px solid #C30606;
}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left: auto;
}

#nav li:hover, #nav li.sfhover {
position: static;
}

#searchform {
margin: 0;
padding: 0;
overflow: hidden;
display: inline;
}

#searchbox {
padding:0;
margin:0;
}

#search input{
background: transparent;
color: #fff;
float: left;
font-size: 12px;
margin: 7px 0 0 10px;
width: 178px;
padding:3px 7px;
border: 1px solid #605151;
font: normal 10px arial, verdana, Times New Roman;
}

#search .btn{
margin: 7px 0 0;
padding: 0;
width: auto;
border:0;
}

Catatan:

Warna biru Gambar Background Horizontal Menu Dropdown
width: 960px; Pengaturan Lebar, Silahkan anda sesuaikan dengan template anda.


6. Kemudian Cari Kode seperti ini <body> dan Letakkan Kode berikut Setelah kode <body>

<div id='NavbarMenu'>
<div id='NavbarMenuleft'>
<ul id='nav'>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li>
<a href='http://www.deddycamp.com/search/label/PTC'>PTC</a>
<ul>
<li><a href='http://www.deddycamp.com/search/label/PTC%20Indonesia'>PTC Indonesia</a></li>
<li><a href='http://www.deddycamp.com/search/label/PTC%20Internasional'>PTC Internasional</a></li>
</ul>
</li>
<li><a href='http://www.baris-iklan4u.co.cc' target='new'>Free Advertise</a></li>

<li><a href='http://www.deddycamp.com/2010/07/banner-exchange-yuk.html'>Banner Exchange</a></li>

<li><a href='#'>About Me</a>
<ul>

<li><a href='#'>My Profile</a></li>

</ul>
</li>
</ul>
</div>

<div id='search'>
<form action='/search/' id='searchform' method='get' style='display:inline;'>
<input id='searchbox' maxlength='200' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Search...&quot;;}' onfocus='if (this.value == &quot;Search...&quot;) {this.value = &quot;&quot;}' type='text' value='Search...'/>
<input class='btn' name='' src='http://lh4.ggpht.com/_pt7i0nbIOCY/ScdxoASk9rI/AAAAAAAABoM/3qt9F1KUH_s/views-24_thumb%5B1%5D.png?imgmax=800' type='image' value='Go'/>


</form>


</div></div>

Catatan:

Tulisan yang berwarna merah, adalah Link/alamat/URL halaman yang dituju, ganti dengan Link milik anda.
Tulisan yang Berwarna biru adalah Judul atau Nama dari Link tersebut, silahkan ganti dengan milik anda.

7. Simpan Template anda, dan Lihat Hasilnnya.

Selamat Mencoba

0 komentar:


Posting Komentar

Terima kasih atas komentar anda

Related Posts with Thumbnails

Menu Blog Ini

Buka Semua | Tutup Semua

Dalam Proses, Mohon Tunggu
Sponsored By :Satpol Temanggung.

Info Satpol

Posting Gratis Di Sini


Nama
Email
Judul
Tentang
Kategori
Gambar
Isi
Image Verification
captcha
Please enter the text from the image:
[ Refresh Image ] [ What's This? ]

Powered byEMF Email Form

INSPIRASI

Check Page Rank of any web site pages instantly:
This free page rank checking tool is powered by Page Rank Checker service
 
" SILAHKAN KIRIM PESAN MAUPUN KOMENTAR ANDA, AKAN KAMI HARGAI TULISAN ANDA, TERIMA KASIH "

Ikuti beritaku

Kembali lagi ke atas