Membuat Menu Horisontal pada Blog Blogger dengan CSS

Yups! Kalian tahu maksud dari menu horisontal kan?
Contohnya seperti deretan link menu yang terdapat di header blog ini.
Mungkin banyak template yang sudah memakai menu navigasi seperti ini, tapi gak ada salahnya buat dicoba.
 Sebenarnya untuk membuatnya cukup mudah karena hanya membutuhkan 2 kode.

• Login dulu ke Blogger kamu!
• Masuk ke Tata Letak -> Edit HTML
• Copy kode ini:

#top-nav {
margin-top: 8px;
position:relative;
margin-left: 15px;
}
#top-nav ul {
padding: 0px;
margin: 0;
color: #333333;
float: left;
width: 100%;
font-weight:normal;
}
#top-nav ul li {
display: inline;
}
#top-nav ul li a {
margin-left: 2px;
margin-right: 2px;
padding-top: 5px;
padding-bottom: 5px;
text-align: center;
color: #666666;
text-decoration: none;
float: left;
border: 1px solid #999999;
height: 15px;
font-size: 12px;
font-family: Verdana;
padding-left: 10px;
padding-right: 10px;
background: #FFFFFF;
font-weight:bold;
}

#top-nav ul li a:hover {
color: #666666;
background: #eeeeee;
text-decoration: bold;
border: 1px solid #999999;
}

• Kode ini kamu letakkan di atas ]]></b:skin>
• Langkah berikutnya, cari kode template yang menunjukkan sebuah header

contohnya:

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Header' type='Header'/>

... dan seterusnya ...

</b:section>
</div>
Pastein kode di bawah ini di atas kode yang berwarna Kuning!
<div id='top-nav'>
<ul>
<li><a href='http://blog.yudhaime.co.cc/search/label/Blogger%20Tricks'>Blogger Trick</a></li>
<li><a href='http://blog.yudhaime.co.cc/search/label/intensedebate'>Intense Debate</a></li>
<li><a href='http://blog.yudhaime.co.cc/search/label/Widget'>Widget</a></li>
<li><a href='http://blog.yudhaime.co.cc/p/chat-online.html'>Chatting Online</a></li>
<li><a href='http://blog.yudhaime.co.cc/p/yudhaime-forum.html'>Forum</a></li>
<li><a href='http://blog.yudhaime.co.cc/search/label/artikel'>Artikel</a></li>
<li><a href='#'>Others</a></li>
</ul></div>

• Ubah kode berwarna Hijau dengan alamat yang ingin kamu tuju dari Blogmu
• Ubah kode warna Merah dengan Menu yang kamu inginkan! 
• Simpan template!

Related Post