Home
Di awal postingan saya ini saya ingin menjelaskan bagaimana caranya membuat menu horizontal di bawah header pada blog.Sebernya cara ini sudah sering di bahas tapi mungkin masih ada yang kesulitan untuk mraktekin atau menerapkan jadi saya bakal ngejelasin lagi dari awal plus saya juga ngasih gambar langkah-langkahnya agar sobat-sobat sekalian lebih mudah buat memahamiya.Langsung saja tanpa banyak kata saya langsung tunjukan.
Bagaimana cara buatnya?
1. Pertama kita login dulu ke Blogger.
2. Setelah masuk kita cari dan klik anak panah ke bawah dan klik Template.
3. kemudian klik edit html. Apabila muncul tulisan klik saja Lanjutkan.
4. cari kode ]]></b:skin> . Atau biar mudah kita pencet Ctrl+F dan tuliskan kode ]]></b:skin>.
5. Silakan
anda copy kan kode di bawah ini tepat diatas code ]]></b:skin>.
/* -----
NAVBAR MENU ----- */
#NavbarMenu {width: 100%;height: 20px;background:#000000 top;color: #000000;margin: 0 auto 0;padding: 0;font: bold 12px Arial, Tahoma, Verdana;border-top: 1px solid #000000;border-bottom: 1px solid #FFFFFF;}
#NavbarMenuleft {width: 680px;float: left;margin: 0;padding: 0;}
#nav {margin: 0;padding: 0;}
#nav ul {float: left;list-style: none;margin: 0;padding: 0;}
#nav li {list-style: none;background: transparent url('#') repeat-x top left;margin: 0;padding: 0;}
#nav li a,
#nav li a:link,
#nav li a:visited {color: #000000;display: block;text-transform: capitalize;margin: 0;padding: 9px 15px 8px;font: bold 12px VERDANA;}
#nav li a:hover,
#nav li a:active {background:#99C9FF;color: #3D81EE;margin: 0;padding: 9px 15px 8px;text-decoration: none;}
#nav li li a,
#nav li li a:link,
#nav li li a:visited {background: transparent url('#') repeat-x top;width: 150px;color: #000;text-transform: lowercase;float: none;margin: 0;padding: 7px 10px;border-bottom: 1px solid #99C9FF;border-left: 1px solid #99C9FF;border-right: 1px solid #99C9FF;font: normal 15px,;}
#nav li li a:hover,
#nav li li a:active {background: #99C9FF;color: #3D81EE;padding: 7px 10px;}
#nav li {float: left;padding: 0;}
#nav li ul {z-index: 9999;position: absolute;left: -999em;height: auto;width: 170px;margin: 0;padding: 0;}
#nav li ul a {width: 140px;}
#nav li ul ul {margin: -32px 0 0 171px;}
#nav li:hover ul ul,
#nav li:hover ul ul ul,
#nav li.sfhover ul ul,
#nav li.sfhover ul ul ul {left: -999em;}
#nav li:hover ul,
#nav li li:hover ul,
#nav li li li:hover ul,
#nav li.sfhover ul,
#nav li li.sfhover ul,
#nav li li li.sfhover ul {left: auto;}
#nav li:hover,
#nav li.sfhover {position: static;}
#NavbarMenu {width: 100%;height: 20px;background:#000000 top;color: #000000;margin: 0 auto 0;padding: 0;font: bold 12px Arial, Tahoma, Verdana;border-top: 1px solid #000000;border-bottom: 1px solid #FFFFFF;}
#NavbarMenuleft {width: 680px;float: left;margin: 0;padding: 0;}
#nav {margin: 0;padding: 0;}
#nav ul {float: left;list-style: none;margin: 0;padding: 0;}
#nav li {list-style: none;background: transparent url('#') repeat-x top left;margin: 0;padding: 0;}
#nav li a,
#nav li a:link,
#nav li a:visited {color: #000000;display: block;text-transform: capitalize;margin: 0;padding: 9px 15px 8px;font: bold 12px VERDANA;}
#nav li a:hover,
#nav li a:active {background:#99C9FF;color: #3D81EE;margin: 0;padding: 9px 15px 8px;text-decoration: none;}
#nav li li a,
#nav li li a:link,
#nav li li a:visited {background: transparent url('#') repeat-x top;width: 150px;color: #000;text-transform: lowercase;float: none;margin: 0;padding: 7px 10px;border-bottom: 1px solid #99C9FF;border-left: 1px solid #99C9FF;border-right: 1px solid #99C9FF;font: normal 15px,;}
#nav li li a:hover,
#nav li li a:active {background: #99C9FF;color: #3D81EE;padding: 7px 10px;}
#nav li {float: left;padding: 0;}
#nav li ul {z-index: 9999;position: absolute;left: -999em;height: auto;width: 170px;margin: 0;padding: 0;}
#nav li ul a {width: 140px;}
#nav li ul ul {margin: -32px 0 0 171px;}
#nav li:hover ul ul,
#nav li:hover ul ul ul,
#nav li.sfhover ul ul,
#nav li.sfhover ul ul ul {left: -999em;}
#nav li:hover ul,
#nav li li:hover ul,
#nav li li li:hover ul,
#nav li.sfhover ul,
#nav li li.sfhover ul,
#nav li li li.sfhover ul {left: auto;}
#nav li:hover,
#nav li.sfhover {position: static;}
6. Simpan template dan masuk ke menu Tata letak.
7.
klik tulisan tambah gadget yang berada tepat di
bawah header.
8.
kemudian cari dan double klik HTML/JavaScript.
9.
silahkan copy kan kode dibawah ini kedalam kotak konten .
<div id='navbarmenu'>
<div id='navbarmenuleft'>
<ul id='nav'>
<li><a class='indukmenu' href='http://uplukz.blogspot.com/' title='link'> Home</a></li>
<li><a class='indukmenu' href='http://uplukz.blogspot.com/'
title='link'> Anime</a></li>
<li><a class='indukmenu' href='http://uplukz.blogspot.com/'
title='link'> Lagu</a></li>
<li><a class='indukmenu' href='http://uplukz.blogspot.com/'
title='link'> Pengetahuan</a></il>
<li><a class='indukmenu' href='http://uplukz.blogspot.com/'
title='link'> Tutorial</a></li>
<li><a class='indukmenu' href=' http://uplukz.blogspot.com/'
title='link'>Video</a></il>
</ul></li>
</ul></div></div>
10. Untuk
tulisan yang berwarna merah bisa anda ganti dengan alamat atau link yang
anda inginkan.Untuk yang warna kuning bisa anda ganti dengan kata-kata yang
ingin anda tuliskan pada menu.
11. kemudian
klik simpan dan klik simpan setelan yang
ada di atas ,maka jadilah menu di bawah header coba anda lihat tampilan blok
anda.
Mungkin sudah cukup jelas penjelasan dari saya mengenai Membuat
Menu Horizontal Pada Blog,apabila ada yang kurang dimengerti bisa memberikan
komentar di bawah. dan kalo ingin membuat menu tadi menjadi menuVERTIKAL / DROP
DOWN silahkan klik disini
Sekian .Semoga bermanfaat...............
*pembaca yang baik adalah pembaca yang meninggalkan
komentar yang baik sebelum meninggalkan blok.
0 komentar:
Posting Komentar