Bagaimana cara membuat menu horizontal di blogspot ya...?

Teman-teman tentu pernah melihatkan ..menu horizontal yang biasa dipakai oleh para blogger yang biasa ditampilkan di bagian atas dari sebuah blog. Biasanya berisi : home, about, daftar isi, dll....tergantung para blogger semua. Bisa dilihat di blog kebahagiaan terbesar ini ya...seperti gambar di bawah ini:




Oke kali ini saya akan berbagi bagaimana cara paling mudah untuk membuat menu horisontal di blogger. Kenapa blogger...? Karena kalau pakai wordpress...hal itu sudah otomatis...sehingga sangat mudah. Tapi bagi pemakai blogger atau blogspot...perlu sedikit modifikasi di templatenya...Nggak susah kok.

Pertama-tama masuk ke dasboard blog anda. Pilih rancangan-edit html- dan jangan lupa centang bagian -Expand Template Widget-. Anda bisa mendownload template lengkap dulu untuk jaga-jaga bila ada kesalahan dalam edit nanti.

Setelah itu anda cari kode ]]></b:skin> atau untuk lebih mudahnya pakai (Crtl+ F) kemudian akan muncul menu find. Anda masukkan kode diatas agar lebih mudah ditemukan. Setelah ketemu anda copy paste kode html di bawah ini . Kode ini harus anda letakkan tepat diatas kode ]]></b:skin>

/*-- (Menu/Nav) --*/
#nav{background:#222; height:32px; padding:4px 0 0; margin-bottom:0px}
#nav-left{float:left; display:inline; width:600px}
#nav-right{float:right; display:inline; width:100px}
#nav ul{position:relative; overflow:hidden; padding-left:0px; margin:0; font:1.0em Arial,Helvetica,sans-serif}
#nav ul li{float:left; list-style:none}
#nav ul li a, #nav ul li a:visited{display:block; color:#fff; margin:0 5px; padding:5px 4px; text-decoration:none}
#nav ul li a:hover{color:#800000; background-color:#fff; margin:0 5px; padding:5px 4px}
#nav ul li a.current, #nav ul li a.current:visited, #nav ul li a.current:hover{margin:0 8px; background-color:#fff; color:#fff; padding:5px 7px}

Anda bisa mengganti lebar menu dan warna-warnanya disesuaikan dengan warna dasar blog anda. Ubahlah yang ada di warna merah.

Kemudian cari kode

<div id='outer-wrapper'><div id='wrap2'>

dan copy paste kode berikut tepat dibawah kode tersebut:

<div id='nav'>
<b:section class='header-tabs' id='header-tabs' preferred='yes' showaddelement='no'>
<b:widget id='LinkList1' locked='true' title='Top Tabs' type='LinkList'>
<b:includable id='main'>
<div class='widget-content'>
<b:if cond='data:title'/>
<div id='nav-left'>
<ul>
<li><a href='/'>Home</a></li>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target'><data:link.name/></a></li>
</b:loop>
</ul>
</div>
</div>

Setelah itu anda ganti link urlnya dengan alamat yang anda inginkan. Untuk menambahkan link url ...anda bisa meng copy paste dari link sebelumnya. Dibagian yang berwarna merah...anda bisa ganti alamat urlnya..dan nama menu nya. Misalnya home atau about..terserah anda.

Selesai edit urlnya...jangan lupa untuk tekan save template.

Oh ya di kode ini saya hilangkan search nya atau kotak pencarian. Karena biasanya teman-teman sudah memakai kotak pencaraian terlebih dahulu.

Demikian tips membuat menu horizontal di blogger kali ini semoga bermanfaat....