Memasang Cool Simple Tab view Pada Blogspot

Sudah lama sepertinya tidak ada postingan tentang Tutorial blogger disini sebab akhir - akhir ini ada kesibukan offline yang tidak bisa ditinggalkan dan juga melelahkan. Nah mumpung sekarang ada kesempatan untuk mengupdate blog, saya akan membagikan trik tentang Tab view.

Tab view kali ini lebih simple dalam pemakaiannya sebab kita hanya di tugaskan untuk menaruh code2nya saja dalam template kita dan tab view itu akan bekerja sendiri. Artinya tab view tersebut akan terbentuk dengan sendirinya. Satu poin baik lagi tentang Tab view kali ini adalah walaupun tab view ini menggunakan script yang cukup banyak namun kita bisa lihat, tab view ini tidak memberatkan blog kamu, g percaya? cek demo here.

Instalasi di Template Blogspot

1. Login ke blogger
2. masuk ke Rancangan >> Edit HTML
   
   
3. cari kode berikut : ]]></b:skin> lalu tambahkan kode di bawah ini tepat di atasnya
   
   .widget-tab {
   font-family:Arial,Helvetica,sans-serif;
   }
   .tab-content ul li a:hover {
   color:#a59c83;
   }
   .tab-content ul li a:hover small {
   color:#baae8e;
   }
   .active-tab{
   color:#FFF !important;
   background:#104E8B !important;
   padding-top:10px;
   -moz-border-radius:10px 10px 0 0;
   border:5px solid #171615;
   border-bottom:none;
   
   }
   ul.tab-wrapper {
   margin:0px;
   padding:0px;
   margin-top:5px;
   margin-bottom:-2px;
   }
   
   ul.tab-wrapper li {
   -moz-border-radius:10px 10px 0 0;
   border:5px solid #171615;
   border-bottom:none;
   background:#282828;
   color:#FFFFFF;
   cursor:pointer;
   display:inline;
   font-family:Arial,Helvetica,sans-serif;
   font-size:13px;
   font-weight:bold;
   line-height:2em;
   list-style-image:none !important;
   list-style-position:outside !important;
   list-style-type:none !important;
   margin-right:1px;
   padding:8px 10px;
   text-align:center;
   text-decoration:none;
   }
   
   
   
4. Setelah itu cari kode </head> lalu tambahkan lagi kode di bawah ini tepat di atasnya
   
   <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
   <script type='text/javascript'>
   var starttab=0;
   var endtab=2;
   var sidebarname=&quot;sidebar&quot;;
   </script>
   <script src='http://introbloggerscripts.googlecode.com/files/bloggertabv1.0-min.js' type='text/javascript'/>
   
   Catatan :
   var endtab=2; ini berfungsi untuk mengatur berapa tab yang akan muncul, semakin tinggi angka yang tertulis maka semakin banyak tab yang muncul
   
   
5. Setelah itu kamu dapat menyimpannya dengan mengklik tombol simpan Template

Bagikan Artikel : Facebook Twitter Google+ Linkedin Technorati Digg