Cara Pasang Menu Header Horizontal - Geograph88
Home Tentang Blogging Cara Pasang Menu Header Horizontal

Cara Pasang Menu Header Horizontal

Cara Pasang Menu Header Horizontal
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 anda
2. 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>
close