Cara Membuat Menu Horizontal Ala CNN.com Pada Blogger
Ketika CNN.com baru-baru ini didesain ulang situs web mereka, mereka membuat bagian header yang tepatnya menu horizontal yang sangat indah, dan itu dilakukan dengan murni menggunakan CSS. Saya rasa ini sangat bagus apabila menu horizontal ini di terapkan pada blog/blogger, apalagi blog yang mencangkup blog berita dengan menggunakan template magazine. Silahkan lihat demo dibawah.
Untuk membuatnya kita tidak pelu menggunakan javaScript, ini 100% menggunakan CSS dan Java Script.
1. Login ke blogger » layout / tata letak » edit HTML
2. Masukan CSS dibawah sebelum kode ]]></b:skin> :
#navigation {
list-style: none;
background: #b60002;
overflow: hidden;
width: 922px;
}
#navigation li {
float: left;
border-right: solid 1px #ca0002;
height: 35px;
}
#navigation li a:link, #navigation li a:visited {
text-decoration: none;
display: block;
height: 35px;
color: #fff;
line-height: 35px;
padding: 0 9px 0 9px;
border-right: solid 1px #990000;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
}
#navigation li a:hover {
background: #990000;
color: #fff;
list-style: none;
}
#navigation li.first {
border-left: solid 1px #ca0002;
}
- Dan ini adalah code HTML Java Script-nya.
<ul id="navigation">
<li class="first"><a href="#">Home</a></li>
<li><a href="#">Video</a></li>
<li><a href="#">NewsPulse</a></li>
<li><a href="#">U.S.</a></li>
<li><a href="#">World</a></li>
<li><a href="#">Politics</a></li>
<li><a href="#">Justice</a></li>
<li><a href="#">Entertainment</a></li>
<li><a href="#">Tech</a></li>
<li><a href="#">Health</a></li>
<li><a href="#">Living</a></li>
<li><a href="#">Travel</a></li>
<li><a href="#">Opinion</a></li>
<li><a href="#">iReport</a></li>
<li><a href="#">Money</a></li>
<li><a href="#">Sports</a></li>
</ul>
- Simpan template.
§ catatan:
- Untuk code CSS bisa anda rubah warnanya sesuai keinginan. Untuk warna codenya bisa anda lhat DISINI.
- Untuk code HTML simpan dan sesuaikan dengan template anda masing-masing.
Ingin mendapatkan pasif income dari internet?? Jawabannya yaitu dengan bisnis Paid To Click atau sering dikenal dengan PTC. Selengkapnya silakan baca DISINI untuk lebih detailnya!
0 komentar — Skip to Comment
Posting Komentar — or Back to Content