Menu Horizontal merupakan salah satu navigasi pada blog agar para pengunjung dapat memilih postingan yang ingin mereka baca.
Saya juga baru bisa membuat menu beberapa minggu yang lalu. Kali ini saya akan berikan script untuk membuat menu header
1. Masuk akun blogger anda2. Klik template lalu edit html
3. Cari kode ]]></b:skin> (Gunakan Ctrl + F)
4. Copy code script dibawah ini diatas kode skin diatas
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/AVvXsEg1AmuBjp37KqjWj5_uEsGwpY-lYH3eew9d16OxjXuycyJLpoM9jm3gA0wFefi6GWEwZHEN8ynaGJRDg9e305c94f-KFhiXKhZcaPaFACRoYIJ5vZBxZ4C542tbepo6A3IrZtl1mKDljgc/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/AVvXsEg1AmuBjp37KqjWj5_uEsGwpY-lYH3eew9d16OxjXuycyJLpoM9jm3gA0wFefi6GWEwZHEN8ynaGJRDg9e305c94f-KFhiXKhZcaPaFACRoYIJ5vZBxZ4C542tbepo6A3IrZtl1mKDljgc/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;}
5. Lalu klik save template
6. Selanjutnya masuk tata letak > klik tambah gadget > klik HTML/Javascript
7. Copas kode dibawah ini
Ganti yang berwarna kuning dengan URL artikel sobat, lalu ganti yang merah dengan menu yang anda ingin buat.
<ul class="basictab">
<li><a href="http://geograph88.blogspot.com/">Home</a></li>
<li><a href="http://geograph88.blogspot.com/search/label/Informasi">Informasi</a></li>
<li><a href="http://geograph88.blogspot.com/search/label/Materi%20Geografi">Materi IPTEK</a></li>
<li><a href="http://geograph88.blogspot.com/search/label/SMA%20GIBS%20news">Galeri GIBS</a></li>
<li><a href="http://geograph88.blogspot.com/search/label/Zona%20Inggris">Inggris Zone</a></li>
<li><a href="http://geograph88.blogspot.com/search/label/Tentang%20Blogging">Tentang Blogging</a></li>
<ul></ul></ul>