SELAMAT DATANG DI GOGONITY BLOG SEMOGA ARTIKEL-ARTIKEL DI DALAM BLOG INI BISA BERGUNA BAGI PARA PENGUNJUNG

Membuat horizontal dropdown menu di blog

Dalam postingan kali ini saya akan membahas tentang cara membuat horizontal dropdown menu. Selain untuk mempercantik blog, ini juga berfungsi agar pengunjung mudah untuk mencari artikel-artikel yang dibutuhkan. Horizontal dropdown menu adalah menu wajib yang dipakai dalam suatu blog. Banyak template-temlate yang sudah menyediakan menu tersebut tapi tidak sedikit template yang belum menyediakannya dan terpaksa kita harus membuatnya sendiri.
Untuk lebih jelasnya ikuti langkah-langkah di bawah ini :
1. Login ke blogger
2. Klik Rancangan kemudian pilih Edit HTML
3. Untuk mengindari hal-hal yang tidak diinginkan sebaiknya download dulu template anda
4. Cari kode seperti ini ]]></b:skin> ( untuk mempermudah pencarian tekan tombol Ctrl F )
5. Copy dan paste kode dibawah ini tepat diatas kode ]]></b:skin>

#catmenucontainer{
height:33px;
width:1000px;
margin:0 auto;
background:url(http://4.bp.blogspot.com/_4HKUHirY_2U/S6mTqAdkycI/AAAAAAAAA2E/zxCSk-6MwLI/catmenu.jpg) repeat-x;
display:block;
padding:0px 0 0px 0px;
font-size:12px;
font-family:"Segoe UI",Calibri,"Myriad Pro",Myriad,"Trebuchet MS",Helvetica,Arial,sans-serif;
font-weight:normal;
border-top:1px solid #252424;
}

#catmenu{
margin: 0px;
padding: 0px;
width:1000px;
background:#252525 url(http://4.bp.blogspot.com/_4HKUHirY_2U/S6mTqAdkycI/AAAAAAAAA2E/zxCSk-6MwLI/catmenu.jpg) repeat-x;
height:33px;
}

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

#catmenu li {
float: left;
list-style: none;
margin: 0px;
padding: 0px;
}

#catmenu li a, #catmenu li a:link, #catmenu li a:visited {
color: #fae7df;
display: block;
margin: 0px;
padding: 9px 10px 10px 10px;
}

#catmenu li a:hover, #catmenu li a:active {
background:url(http://3.bp.blogspot.com/_4HKUHirY_2U/S6mTqmy1HdI/AAAAAAAAA2M/6D7APyygWZA/catmenuhov.jpg) repeat-x;
color: #fff;
margin: 0px;
padding: 9px 10px 10px 10px;
text-decoration: none;
}

#catmenu li li a, #catmenu li li a:link, #catmenu li li a:visited {
background:#ED4A05;
width: 150px;
color: #fae7df;
font-family:Tahoma,century gothic,Georgia, sans-serif;
font-weight: normal;
float: none;
margin: 0px;
padding: 9px 10px 10px 10px;
border-bottom: 1px solid #FF7800;
}

#catmenu li li a:hover, #catmenu li li a:active {
background:url(http://3.bp.blogspot.com/_4HKUHirY_2U/S6mTqmy1HdI/AAAAAAAAA2M/6D7APyygWZA/catmenuhov.jpg) repeat-x;
color: #fff;
padding: 9px 10px 10px 10px;
}


#catmenu li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 170px;
margin: 0px;
padding: 0px;
}

#catmenu li li {
}

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

#catmenu li ul a:hover, #catmenu li ul a:active {
}

#catmenu li ul ul {
margin: -34px 0 0 170px;
}

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

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

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

6. Cari kode seperti ini <div id='content-wrapper'>
7. Copy dan paste kode dibawah ini tepat dibawah kode <div id='content-wrapper'> 

<div id='catmenucontainer'>
<div id='catmenu'>

<ul>
<li><a href='http://NAMA LINK BLOG ANDA/'>Home</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-1</a>
<ul class='children'>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-1-1</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-1-2</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-1-3</a></li>
</ul>
</li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-2</a>
<ul class='children'>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-2-1</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-2-2</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-2-2</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-2-3</a></li>
</ul>
</li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-3</a>
<ul class='children'>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-3-1</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-3-2</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-3-3</a></li>
</ul>
</li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-4</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-5</a>
<ul class='children'>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-5-1</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-5-2</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-5-3</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-5-4</a></li>
</ul>
</li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-6</a>
<ul class='children'>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-6-1</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-6-2</a></li>
</ul>
</li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-7</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-8</a></li>
</ul>

<div style='float:right;margin-right:20px;'>
<a href='http://feedburner.google.com/fb/a/mailverify?uri=pbtemplates'><img src='http://4.bp.blogspot.com/_4HKUHirY_2U/S6m5f0b1vkI/AAAAAAAAA38/wPNiRj2nZ9w/Mail_Read.png'/></a>
<a href='http://feeds.feedburner.com/pbtemplates'><img src='http://1.bp.blogspot.com/_4HKUHirY_2U/S6m5gDGJGAI/AAAAAAAAA4E/cHINlVzdTLI/RSS.png'/></a>
<a href='http://www.twitter.com/btipandtrick'><img src='http://2.bp.blogspot.com/_4HKUHirY_2U/S6n2fLHS5RI/AAAAAAAAA4c/G9M3awpSwZI/Twitter.png'/></a>
<a href='mailto:123@abc.com'><img src='http://3.bp.blogspot.com/_4HKUHirY_2U/S6n2qsFN6vI/AAAAAAAAA4k/NrkOt_6IvYs/contact.png'/></a>
</div>

</div>
</div>

<div class='clear'/>


Selamat mencoba!!!!!



Article :


Preview on Feedage: gogonity-blog Add to My Yahoo! Gogonity Blog Add to Google! Gogonity Blog Add to AOL! Gogonity Blog
Add to MSN Gogonity Blog Subscribe in NewsGator Online Gogonity Blog Add to Netvibes Gogonity Blog Subscribe in Pakeflakes Gogonity Blog
Subscribe in Bloglines Gogonity Blog Add to Alesti RSS Reader Gogonity Blog Add to Feedage.com Groups Gogonity Blog Add to Windows Live Gogonity Blog
iPing-it Gogonity Blog Add to Feedage RSS Alerts Gogonity Blog Add To Fwicki Gogonity Blog Add to Spoken to You Gogonity Blog

Share |

Baca juga artikel yang lain :

Bagi pengguna facebook komentar disini

2 comments:

sigit said...

baca dan langsung praktek, thank you infonya bos...

Kevin Alvaisha said...

thx yooo gan infonya...

bisa backlink gak?

:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Post a Comment

Terima kasih atas kunjungannya.
Dapatkan backlink gratis dari blog DOFOLLOW ini dengan berkomentar! dan gunakan kode smiley diatas untuk mengexpresikan senyum anda. contoh :))
Maaf SPAM akan Dihapus
Contoh SPAM : Mengetik Link Pada Komentar, Komentar tidak sesuai Isi Artikel,No Porno, No Sara.

Gogonity Blog © 2010 Template Modified by:
IroelSt
Protected by Copyscape Duplicate Content Finder DMCA.com