Berbagi Tips Dan Trik

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

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!