Cara Membuat Tab Menu Di Blog Dengan Mudah Tanpa Edit HTML

Cara Membuat Tab Menu Di Blog Dengan Mudah Tanpa Edit HTML - Hai sahabat blogger... Udah sangat lama saya tidak memposting artikel pada web ini. Mumpung ada tutorial baru, saya akan membagikannya. Tutorialnya adalah Cara Membuat Tab Menu Horizontal Pada Blog Dengan Mudah Yang Keren tutorial ini sangat mudah, gak perlu edit-edit HTML lagi. Cukup edit linknya doang kemudian pasang.

Ingat, tutorial yang satu ini bukan untuk dropdown. Tapi untuk tab menu. Apa sih, bedanya drop down sama tab menu? Kalau tab menu, seperti animasi dibawah ini. Tapi kalau dropdown, ada menu lagi dibawahnya. Seperti dibedakan lagi. Untuk lebih jelasnya apa perbedaan tab menu dengan dropdown, Anda bisa lihat di Cara Membuat DropDown Menu Warna Warni

Oke, setelah jelasin, sekarang liat cara buatnya: 

1. Login Blogger

2. Tata letak/layout

3. Add gadget

4. HTML/Javasripct

5. Copy kode dibawah ini, kemudian paste pada kolom HTML/JavaScript

<div style="text-align: center;"><span style="padding: 10px 30px; -moz-border-radius: 5px 5px 5px 5px; background-color: #FF0000;">

<a href="http://www.blogger.com/home">Home</a></span> <span style="padding: 10px 30px; -moz-border-radius: 5px 5px 5px 5px; background-color: #FFFF00;">

<a href="http://www.fahmifanirius.ga">Tutorial</a></span> <span style="padding: 10px 30px; -moz-border-radius: 5px 5px 5px 5px; background-color: #FFFF00;">

<a href="http://www.fahmifanirius.ga">Info</a></span>
<span style="padding: 10px 30px; -moz-border-radius: 5px 5px 5px 5px; background-color: #00FF00;">

<a href="http://www.fahmifanirius.ga">Request</a></span> <span style="padding: 10px 30px; -moz-border-radius: 5px 5px 5px 5px; background-color: #00FFFF;">

<a href="http://facebook.com/fahmifanirius">Facebook</a></span>
<span style="padding: 10px 30px; -moz-border-radius: 5px 5px 5px 5px; background-color: #C800FF;">

<a href="http://twitter.com/fahmifanirius">Twitter</a></span>
<span style="padding: 10px 30px; -moz-border-radius: 5px 5px 5px 5px; background-color: #FF7300;">

6. Simpan perubahan

*Letakkan gadget ini diatas (header). Karena, letak gadget berpengaruh pada tampilan Blog Anda setelah disimpan.

Anda bisa merubah warna pada setiap tab sesuai dengan keinginan. Untuk melihat kode warnanya, klik di KODE WARNA

Jangan lupa, ketika sudah mencoba dan berhasil, beri komentar... Kalau masih gagal, coba lagi. Semoga berhasil... ˆ⌣ˆ

Tutorial Blogger