Create a horizontal tab menu with colorful background

Ada beberapa cara untuk membuat tab menu horizontal di blogger menjadi tab menu horizontal/navigasi menu horizontal dengan background beraneka warna seperti yang terlihat di atas. Salah satunya adalah dengan mengggunakan css selector (:nth-child(n)). Memanfaatkan css selector membuat penggunaan kode menjadi lebih simpel dan praktis karena tak perlu melakukan perubahan atau penambahan pada xHTML default template. Modifikasi hanya dilakukan dengan menambahkan kode css di atas kode ]]></b:skin>. Sangat mudah dan dapat dilakukan oleh siapapun karena tingkat kesulitan yang relatif sangat kecil.

Kode CSS

.tabs-inner .tabs .widget-content ul li:nth-child(1) a{background:red;}
.tabs-inner .tabs .widget-content ul li:nth-child(2) a{background:blue;}
.tabs-inner .tabs .widget-content ul li:nth-child(3) a{background:green;}
.tabs-inner .tabs .widget-content ul li:nth-child(4) a{background:orange;}
.tabs-inner .tabs .widget-content ul li:nth-child(5) a{background:purple;}
.tabs-inner .tabs .widget-content ul li:nth-child(6) a{background:darkblue;}
.tabs-inner .tabs .widget-content ul li:nth-child(7) a{background:brown;}
.tabs-inner .tabs .widget-content ul li:nth-child(8) a{background:darkgreen;}
.tabs-inner .tabs .widget-content ul li:nth-child(9) a{background:teal;}
.tabs-inner .tabs .widget-content ul li:nth-child(10) a{background:olive;}
.tabs-inner .tabs .widget-content ul li a{color:#fff;}
.tabs-inner .tabs .widget-content ul li.selected a{background:#666;color:#ccc;}
.tabs-inner .tabs .widget-content ul li a:hover{background:#222;color:#0ff;}

Keeterangan:

1. Anda dapat membandingkan dengan tab menu horizontal yang masih orisinil (tanpa perubahan kode) di link berikut:
   Tab menu blogger yang masih orisinil
2. Anda dapat juga melihat tab menu horizontal dengan animasi css3 yang menggunakan background aneka warna (colorful) melalui link berikut:
   Animated horizontal tab menu with colorful background
3. Simpan kode css di atas kode ]]></b:skin>.
4. Kode warna yang berwarna hijau merupakan warna masing-masing tab menu horizontal. Anda bisa merubahnya dengan warna yang lain.
5. Kode warna yang berwarna merah merupakan kode warna untuk hover warna teks dan background yang dapat juga diganti dengan warna lain. Warna-warna ini untuk hover dan tab terpilih (class='selected').

Cara Menyimpan kode css

1. Login ke blogger
2. Dasbor (Dasboard)
3. Template
4. Backup/Restore (Cadangkan/Pulihkan)
5. Edit HTML
6. Template › Edit HTML
   • Lanjutkan (Procced).
   • Cari kode ]]></b:skin>
     Gunakan Ctrl+F untuk mempercepat dan mempermudah pencarian kode.
   • Copy dan pastekan kode css di atas kode ]]></b:skin>
   • Simpan Template/Save Template
7. Lihat blog untuk melihat hasilnya.

Bagi yang belum membuat tab menu horizontal dan ingin menampilkan tab menu horizontal ikuti panduan berikut:

1. Login ke blogger
2. Dasbor/Dasboard
3. Laman (Pages)
   • New Pages
     - Blank Page : Membuat posting di halaman statis (Isi posting bebas).
     - Alamat web/web Address : Tuliskan title link dan URL web/blog/posting
   • Pilih Tab Atas (Top Tabs)
4. Simpan Setelan (Save Settings).
5. Buka blog dan lihat hasilnya di bawah header blog