Assalamu'alaikum. :-)
Hay sobat HST, kali ini saya akan menulis artikel tentang Cara Membuat Menu Tabs Sederhana di Blogger.
Buat menambah link-link kalian. Okeh, mari kita mulai yah....
1. Masuk ke Dashboard > Design atau Rancangan > Edit HTML.
2. Copy kode CSS di bawah.
4. Cari ]]></b:skin>
(cari dengan Ctrl + F) & letakkan/paste Kode
CSS tepat di atasnya.
5. Save Template.
6. Masuk ke Page Elements > Klik Add a Gadget.
5. Save Template.
6. Masuk ke Page Elements > Klik Add a Gadget.
7. Setelah pop up window muncul,
pilih opsi HTML/Javascript
8. Masukkan Kode HTML yg telah diedit tadi pada kolom di bawah.
Kode CSS:
/* Navigasi tabs Sederhana
buka-rahasia.blogsot.com Starts */
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;}
a.burastabs:hover {color:#FFFFFF; background:#666666;}
#burasbar {width:auto; margin:0 auto;}
/* Navigasi tabs Sederhana Ends */
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;}
a.burastabs:hover {color:#FFFFFF; background:#666666;}
#burasbar {width:auto; margin:0 auto;}
/* Navigasi tabs Sederhana Ends */
<!-- Navigasi tabs Sederhana
http://buka-rahasia.blogspot.com Starts -->
<div id='burasbar'>
<a href="http://blogeditingku.blogspot.com" class="burastabs">Home</a>
<a href=" http://grafisditingku.blogspot.com " class="burastabs">Editing Grafis </a>
<a href=" http://blogeditingku.blogspot.com " class="burastabs">Blog Tips</a>
<a href=" http://blogeditingku.blogspot.com " class="burastabs">SEO Tips</a>
<a href=" http://grafiseditingku.blogspot.com " class="burastabs">Format Video </a>
<a href=" http://blogeditingku.blogspot.com " class="burastabs">Software </a>
<a href=" http://grafiseditingku.blogspot.com " class="burastabs">Lain-Lain</a>
</div>
<!-- Navigasi tabs Sederhana Ends -->
<div id='burasbar'>
<a href="http://blogeditingku.blogspot.com" class="burastabs">Home</a>
<a href=" http://grafisditingku.blogspot.com " class="burastabs">Editing Grafis </a>
<a href=" http://blogeditingku.blogspot.com " class="burastabs">Blog Tips</a>
<a href=" http://blogeditingku.blogspot.com " class="burastabs">SEO Tips</a>
<a href=" http://grafiseditingku.blogspot.com " class="burastabs">Format Video </a>
<a href=" http://blogeditingku.blogspot.com " class="burastabs">Software </a>
<a href=" http://grafiseditingku.blogspot.com " class="burastabs">Lain-Lain</a>
</div>
<!-- Navigasi tabs Sederhana Ends -->
Hmmmmm, cukup simpel bukan ? Trima kasih udah baca artikelnya, Semoga bermanfaat bagy sobat.
Wassalamu'alaikum.
:-)