Tabs menu Horizontal dg Background Aneka Warna

Ada dua cara untuk membuat tabs menu horizontal blogger dengan background beraneka warna, dan ini adalah cara yang pertama. Agar setiap tab menu mempunya warna background berbeda dengan warna background menu yang lain, setiap link dibuat mempunyai class berbeda yang masing-masing mempunyai background berbeda warna. Jika anda menginginkan warna teks link berbeda disetiap menu, andapun bisa menambahkannya.

D E M O

Mengaktifkan Tabs Menu Horizontal Blogger

Agar tabs menu horizontal dengan aneka warna background dapat dibuat, anda harus menggunakan tabs menu horizontal dalam blog dengan cara mengaktifkan fitur "Laman/Pages yang dapat ditemukan di dasbor. Fitur ini berisi link posting halaman statis dan/atau link alamat web/blog lain atau bisa juga link posting tertentu, baik di dalam blog atau yang berasal dari luar blog. Anda bisa mengisi setiap link menu di tabs menu horizontal blogger sesuai dengan apa yang diinginkan untuk ditampilkan.

Cara mengaktifkan fitur "Laman/Pages"

1. Login ke Blogger
2. Halaman Dasbor/Dasboard
3. Laman/Pages
4. Buatlah link tabs menu horizontal dengan cara :
   
   • Membuat Posting di halaman statis. Untuk membuat posting di halaman statis, pilih "Laman Kosong" kemudian buat posting lengkap dengan judul postingnya. Judul posting hendaknya singkat saja karena nantinya digunakan di tabs menu sebagai teks link tabs menu horizontal.
   • menampilkan alamat web/blog lain di tabs menu horizontal blogger. Untuk membuat link seperti ini silahkan pilih "Alamat Web".
     Tuliskan secara singkat titlenya kemudian tuliskan juga alamat web-nya. Alamat web bisa juga diganti dengan alamat sebuah posting.
5. Lanjutkan dengan pilih "Tab atas".
6. Setelah daftar menu di tabs horizontal selesai dibuat dengan langkah di atas, lanjutkan dengan proses membuat background aneka warna untuk masing-masing menu.

Menambah kode css & menambah class

1. Lanjutkan dengan klik "Template" yang letaknya di bawah fitur "Laman/Pages".
2. Lakukan proses "Cadangkan/Pulihkan" atau "Backup/Restore" templates untuk berjaga-jaga dari kemungkinan yang tak di harapkan.
3. Klik "Edit HTML".
4. Template › Edit HTML
   
   • Klik "Lanjutkan/Proceed".
   • Klik "Expand Templates Widget".
   • Cari kode <li class='selected' expr:id='data:link.title'>
     Gunakan Ctrl + F untuk mempercepat dan mempermudah pencarian kode.
   • Di bawah kode tersebut masih ada beberapa kode lain seperti terlihat di bawah ini:
     

     xHTML tabs menu default blogger

     <li class='selected' expr:id='data:link.title'><a expr:href='data:link.href'><data:link.title/></a></li>
               <b:else/>
                 <li expr:class='data:link.title'><a expr:href='data:link.href'><data:link.title/></a></li>

   • Ganti kode dengan kode berikut:
     

     xHTML pengganti kode default tabs menu blogger

     <li class='selected'><a expr:class='data:link.title' expr:href='data:link.href'><data:link.title/></a></li>
               <b:else/>
                 <li><a expr:class='data:link.title' expr:href='data:link.href'><data:link.title/></a></li>

   • Klik "Simpan Template/Save Template".
5. Lanjutkan dengan membuat class pada kode css sesuai kode xHTML tab menu

Membuat class dan background pada kode css

Kode CSS dan contoh class link tab menu

li a.Beranda{background:green;}
li a.gubhugreyot{background:blue;}
li a.Belajar{background:orange;}
li a.Hacks{background:brown;}
.tabs .widget-content ul li a{
      color:yellow;
      text-shadow:1px 1px 1px #000;
      transition:background-color 0.6s,color 1s;
      -o-transition:background-color 0.6s,color 1s;
      -ms-transition:background-color 0.6s,color 1s;
      -moz-transition:background-color 0.6s,color 1s; 
      -webkit-transition:background-color 0.6s,color 1s;
}
.tabs .widget-content ul li:hover a{
      background:#000;
      color:#02e7fb;
}

Keterangan :

1. li a.Beranda » class "Beranda" diperoleh dari menu pertama yang title-nya "Beranda". Nama berbeda yang biasa dipakai adalah "Home".
2. li a.gubhugreyot » class "gubhugreyot" diperoleh dari title tab menu "gubhugreyot.
3. li a.Belajar » class "Belajar" diperoleh dari title tab menu "Belajar Kode CSS. Anda bisa mengambil salah satu dari "Belajar, Kode dan CSS" sebagai class.
4. li a.Hacks » class "Hacks" diperoleh dari title tab menu "Best Blogger Hacks. Anda bisa mengambil salah satu dari "Best, Blogger dan Hacks" sebagai class.
5. Setelah mendapatkan class sesuai title link tabs menu yang telah anda buat melalui "fitur Laman" dan digunakan di kode CSS untuk menggantikan class yang ada di contoh css, silahkan simpan kode css di bawah kode ]]></b:skin>
6. Klik "Simpan Template/Save Template"
7. Buka blog dan lihat hasilnya.
8. Anda bisa menambah class baru sesuai jumlah tab yang dibuat. Warna juga bisa dirubah disesuaikan dengan selera!

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini:

Posting » Setu WAGE, August, 18, 2012

» Happy Blogging - gubhugreyot «