Membuat menu horizontal bisa dibilang penting karena dengan adanya menu horizontal Blog akan lebih mudah di explore oleh visitor. Menu horizontal juga berperan sebagai navigasi Blog sehingga dengan adanya menu horizontal Blog akan membuat visitor lebih selesa.
Untuk membuat menu horizontal yang dibutuhkan adalah dua extensi kode, yaitu kode CSS dan kode HTML. Kode CSS adalah kerangka dari menu horizontal itu sendiri, sementara kode HTML berfungsi untuk menampilkan struktur menu yang akan anda masukkan pada menu horizontal tersebut.
Berikut cara mudah membuat menu horizontal:
Kode CSS
/* Navigasi tabs geosya.blogspot.com Starts */<br />
a.burastabs, a.burastabs:link, a.burastabs:visited {display:block; width:102px; height:30px; background:#444444; border:1px solid #ebebeb; margin-top:2px; text-align:center; text-decoration:none; font-family:arial, sans-serif; font-size:12px; font-weight:bold;color:#FFFFFF; line-height:25px; overflow:hidden; float:left;}<br />
a.burastabs:hover {color:#FFFFFF; background:#666666;}<br />
#burasbar {width:auto; margin:0 auto;}<br />
/* Navigasi tabs Ends */
Kode Html
<!-- Navigasi tabs http://geosya.blogspot.com Starts --><br />
<div id='burasbar'><a href="#" class="burastabs">Home</a><br />
<a href="#" class="burastabs">News</a><br />
<a href="#" class="burastabs">Tips<a href='http://geosya.blogspot.com/'> Blog</a></a><br />
<a href="#" class="burastabs">Link Exchange</a><br />
<a href="#" class="burastabs">Computer</a><br />
<a href="#" class="burastabs">Sitemap</a><br />
</div><!-- Navigasi tabs Ends -->
- Masuk ke Dashboard Blogger lalu pilih Design > Edit HTML
- Centang Expand Widget, kemudian cari kode ]]></b:skin>
- Copy kode CSS diatas dan paste tepat diatas kode ]]></b:skin>
- Klik Save/Simpan Template.
- Selanjutnya, kembali ke Design Blogger lalu pilih Add a Gadget > HTML/Javascript
- Copy kode HTML diatas dan paste dikolom HTML/Javascript.
- Simpan, dan selesai.
Pada kode HTML, ganti simbol # dengan link anda.
Jumlah link pada menu horizontal bisa anda tambah atau anda kurangi, silahkan sesuaikan dengan kebutuhan Blog anda.
Bookmark this post: | 
|
0 komentar:
Posting Komentar