Cara Membuat Menu Horizontal CSS Stripped Red Blogger / Blogspot

Cara memasang widget menu horizontal menu di Blogger / Blogspot :

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 {list-style-type:none;width:auto;position:relative;display:block;height:33px;font-size:.6em;background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoO1DdBIz2D5cdiU39yu9lSu6o7VvylGKmmCG2KBnxk5ukV8UdkWalt7l4k8V_P0KdnA0WwdglT3qV2GvdNdwvPd9Gkjm9j68r1nwijdrhxJuVcu2i5ROBu85UGS2DnaMZCz-9EOUqhEA/s1600/bg.png") repeat-x top left;font-family:Verdana,Helvetica,Arial,sans-serif;border:1px solid #000;margin:0;padding:0;}
ul.menu li {display:block;float:left;margin:0;padding:0;}
ul.menu li a {float:left;color:#A79787;text-decoration:none;height:24px;padding:9px 15px 0;font-weight:normal;}
ul.menu li a:hover,.current {color:#fff;background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoO1DdBIz2D5cdiU39yu9lSu6o7VvylGKmmCG2KBnxk5ukV8UdkWalt7l4k8V_P0KdnA0WwdglT3qV2GvdNdwvPd9Gkjm9j68r1nwijdrhxJuVcu2i5ROBu85UGS2DnaMZCz-9EOUqhEA/s1600/bg.png") repeat-x top left;text-decoration:none;}
ul.menu .current a {color:#fff;font-weight:700;}
/*Garis Merah*/
ul.menu.red{background-color:#B11718;}
ul.menu.red li a:hover, .menu.red li.current {background-color:#DE3330;}

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 class="menu red">
<li class="current"><a href="#(url homepage anda)">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 class="current"><a href="http://pphootm.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 yang sudah diedit tersebut ke kolom configure HTML/Javascript.

8. Klik save.

9. Drag/geser widget menu horizontal tersebut ke bawah/atas header (letakkan pada slot gadget).

10. Save lagi.

11. Done! menu/navigasi horizontal Blog Blogger anda siap digunakan.