Cara memasang widget menu horizontal di Blogger/Blogspot

 Sperti sebelumnya saya pernah posting membuat jam dengan theme garuda dan bagi yang mau buat widget keren ini di blog sobat langsung aja klik disini.

Dan sekarang saya kembali buat posting yang baru yaitu Membuat widget menu horizontal di blog sobat. oke panjang bla bla langsung aja bro ini dia caranya:

1. Masuk ke dashboard > Design/Rancangan > edit HTML

2. Masukkan kode CSS tepat di ATAS ]]></b:skin> (gunakan Ctrl + F untuk mencari)
 Kode CSS:

ul#menu {width: 100%;height: 43px;background: #FFF url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgygZx8UXzSzWhNwEvD5KdYj9z_rM6_Lm3VJ6onEGOPIHH3OzOoSGXeNZTVAlszxmi9OoKhxVBv-0qvCUnJWTeiV2SNeLm4VQsGSh1K_e1RWLYv-6Z-iKL41vT7vjBDI5VEL1Ibv0TmVoU/s1600/menu-bg.gif") top left repeat-x;font-size: 0.8em;font-family: "Lucida Grande", Verdana, sans-serif;font-weight: bold;list-style-type: none;margin: 0;padding: 0;}
ul#menu li {display: block;float: left;margin: 0 0 0 5px;}
ul#menu li a {height: 43px;color: #777;text-decoration: none;display: block;float: left;line-height: 200%;padding: 8px 15px 0;}ul#menu li a:hover {color: #333;}
ul#menu li a.current {color: #FFF;background: #FFF url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBOpbJDcUte0sAbkUbgO3sD6AntvsE-7kIJGPKxkczPbLRGa8dGORH4IzQd1nirfFwARpPaYoCSOzYKFiHHxdL-ex5MWmm0phvSn2G06vMAYmNkoAmgPasLMu9FX6gfP-0-BbRTQw2v2A/s1600/current-bg.gif") top left repeat-x;padding: 5px 15px 0;}

3. Save template.

4. Copy Kode HTML, ganti #(url homepage anda) dengan url homepage blog, dan  # dengan url-url lain yang ingin dipasang di menu. Ganti kata-kata Home, Daftar Isi Blog, dan lain-lain dengan anchor text yang diinginkan. Kode HTML:

<ul id="menu">
<li><a class="current" href="http://badry7.blogspot.com">Home</a></li>
<li><a href="#">Daftar Isi Blog</a></li>
<li><a href="#">Contact Me</a></li>
<li><a href="#">Advertise</a></li>
<li><a href="#">SMS Gratis!</a></li>
</ul>

Contoh:

<li><a class="current" href="http://badry7.blogspot.com">Home</a></li>

Jika ingin menambah atau mengurangi link menu, tambah atau hapus baris:

<li><a href="#">anchor text</a></li> sebelum </ul>.

5. Masuk ke dashboard > Design/Rancangan > Klik Add a Gadget

 

6. Setelah pop up window muncul, pilih opsi HTML/Javascript

 7. Kemudian masukkan Kode HTML yang telah diedit ke kolom configure HTML/Javascript.

7. Klik save.

8. Drag/geser widget menu horizontal tersebut ke bawah/atas header. 

9. Save lagi.

10. Done! 

Jangan Lupa Komentarnya Ya Sob,
Kalau Ada Yang Kurang Paham