Cara Membuat Menu Drop Down di Blogger
Cara Membuat Menu Drop Down di Blogger - Menu Dropdown pada blog sangat berguna selain agar tampilan blog menjadi lebih menarik, juga mempermudah pengunjung dalam memilih artikel, halaman dengan kategori dan menu-menu yang sudah kita buat.
Kali ini LenSul akan membahas mengenai bagaimana cara membuat menu dropdwon di blogspot
- Masuk ke akun Blogger sobat
- Pilih menu Template > klik Edit HTML
- Lalu letakkan kode CSS di bawah ini tepat di atas ]]></b:skin> atau </style>
#navigationbar {
width: 100%; /* change the width of the navigation bar */
height: 35px; /* change the height of the navigation bar */
}
#navigationcss {
margin: 0 auto;
padding: 0;
}
#navigationcss ul {
float: none;
list-style: none;
margin: 0;
padding: 0;
overflow: visible;
}
#navigationcss li a, #navigationcss li a:link, #navigationcss li a:visited {
color: #ffffff; /* change color of the main links */
display: block;
margin: 0;
padding: 10px 30px; /* change the first number for the top/bottom spacing, and the second number for left/right spacing */
}
#navigationcss li a:hover, #navigationcss li a:active {
color: #00BFFF ; /* change the color of the links when hovered over */
margin: 0;
padding: 10px 30px; /* make sure these are the same as the section above! */
}
#navigationcss li li a, #navigationcss li li a:link, #navigationcss li li a:visited {
background: #ffffff; /* change the background color of the drop down box */
width: 150px;
color: #000000; /* change the color of the drop down links */
float: none;
margin: 0;
padding: 7px 10px; /* similar to above, change for the spacing around the links */
}
#navigationcss li li a:hover, #navigationcss li li a:active {
background: #00BFFF ; /* change the background color of drop down items on hover */
color: #ffffff; /* change the color of drop down links on hover */
padding: 7px 10px; /* keep these the same as the above section */
}
#navigationcss li {
float: none;
display: inline-block;
list-style: none;
margin: 0;
padding: 0;
}
#navigationcss li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 150px;
margin: 0;
padding: 0;
}
#navigationcss li:hover ul, #navigationcss li li:hover ul, #navigationcss li li li:hover ul, #navigationcss li.sfhover ul, #navigationcss li li.sfhover ul, #navigationcss li li li.sfhover ul {
left: auto;
} - Selanjutnya masuk ke Tata Letak > Tambah Widget > HTML, copy-kan kode berikut
<!--Start Navigation -->
<div id="navigationbar">
<ul id='navigationcss'>
<li><a href="#">Home</a></li>
<li><a href="#/">Menu</a>
<ul>
<li><a href="#">sub menu 1</a></li>
<li><a href="#">sub menu 2</a></li>
<li><a href="#">sub menu 3</a></li>
</ul>
</li>
<li><a href="#">Contact</a>
<ul>
<li><a href="#">About</a></li>
<li><a href="#">Other Sites</a></li>
</ul>
</li>
</ul>
</div>
<!--End Navigation -->
*ganti tanda # dengan url blog sobat, misal : <li><a href="http://lensul.blogspot.com/">Home</a></li>
Demikianlah Cara Membuat Menu Drop Down pada Blogger. Semoga membantu dan bermanfaat bagi sobat yang membacanya. Jika ada yang kurang jelas silahkan tulis di kolom komentar
Komentar
Posting Komentar