Membuat Menu Navigasi Horisontal Sederhana di Blog
Membuat Menu Navigasi Horisontal Sederhana di Blog - Masih buat arsip untuk saya sendiri, anda tapi bisa mengikuti langkah dalam membuat Navigasi Horisontal dengan unik, keren dan menarik. Berikut ini adalah langkah membuat Menu Navigasi Hroizontal di blog.
<style> #tabsF { float:left; width:100%; background:#efefef; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #666; } #tabsF ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsF li { display:inline; margin:0; padding:0; } #tabsF a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgX3PLj5A2ie4cDAC7prPq139Ftrf24iwsF6nEYzkYiUU49lbzZyHBm8vZoWE1q3XfYA8z8PMBCEh_A_Xl5xo7R-iGpysGSgoAFqdlNj2TTLGRr6tpf7SjYm-l4_AAlTE4j6cloZ8eL-LY/s1600/tableftF.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabsF a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMrPuz3ZzyQl4FsEVxnyEEwRANnDmOE2iJBQpe5vqpN1bL-PKaow_NAeh4wYJtKsQcKHSqN5PtaqmI8sTVDVPVhSDPCw9rbzhxlCXcGphRc4c5-kaHIyLbPfh6jbhtb8zZREctWEkq3QU/s1600/tabrightF.png) no-repeat right top; padding:5px 15px 4px 6px; color:#666; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsF a span {float:none;} /* End IE5-Mac hack */ #tabsF a:hover span { color:#FFF; } #tabsF a:hover { background-position:0% -42px; } #tabsF a:hover span { background-position:100% -42px; } </style> <div id="tabsF"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>
Caranya kita tinggal copy script di atas ke Gadget HTML Java Script saja, dan ganti tanda # ini dan tulisan Link 1 sampai dengan Link 7 dengan kalimat anda sendiri. Jika sudah tinggal disimpan saja. Jika ingin mengurangi ataupun menambah tinggal menambah / menghapus code seperti ini :
<li><a href="#"><span>Link 2</span></a></li>
Semoga bermanfaat bagi anda mengenai Membuat Menu Navigasi Horisontal Sederhana di Blog.
Membuat Menu Navigasi Horisontal Sederhana di Blog
9out of 10 based on 10 ratings. 9 user reviews.
Posted by : Gadis ~ / Software, Blog Tips and Trik, Tutorial , Internet, Bisnis
Artikel Membuat Menu Navigasi Horisontal Sederhana di Blog diposting oleh Gadis . Terima kasih atas kunjungannya. Kritik dan saran dapat disampaikan via kotak komentar.. Jika diperlukan Artikel ini bisa disebarluaskan melalui blog sobat, hanya mohon sebutkan sumbernya dengan tautan link aktif ke postingan ini. Terima kasih. Happy blogging
0 komentar:
Posting Komentar