Cara Membuat Tabber Sederhana ( Tab View )

Bagaimana Ya cara agar recent pos, popular post dan comments dapat menyatu ? / tolong kasih tau caranya dong

Sesuai dengan pertanyaan dari  Icuk Sugiarto Sesa. A diatas, kali ini saya akan berusaha menjawabnya. Atau bagi sobat yang belum tau komentarnya bisa langsung di lihat di sini. Ini juga saya sebarkan untuk sobat  untuk sobat yang bloggerholic. Meskipun kelihatannya sederhana, trik ini bisa sangat berguna dan bisa memberi peluang bagi widget lain untuk berada di bawahnya. Namanya adalah tabber. Tabber ini berfungsi untuk menyatukan beberapa widget sehingga bisa menghemat space. Kalau sobat belum tau, bisa langsung di lihat di samping tulisan ini. Saya menyatukan recent post, popular post dan recent comments sehingga terlihat seperti satu widget.

Cara pemasangannnya bisa dibilang gampang gampang susah. Langsung saja, berikut langkah langkah yang harus sobat ikuti untuk memasang tabber..

1. Login ke blogger
2. Masuk ke dashboard..
3. Pilih rancangan lalu pilih template
4. Pilih edit html
5. Letakkan kode CSS di bawah ini tepat di atas ]]></b:skin>

.widget-wrapper2{
border:1px solid #494e52;
background-color:#636d76;
padding:10px;
}

.widget-tab {
background:#c9dbdd;
font-family:Arial,Helvetica,sans-serif;
padding:5px !important;
}

.widget-tab  ul {
margin:0px;
padding:0px 5px 0 5px;
}
.widget-tab  ul li {
list-style:none;
border-bottom:1px dotted #a4bddf;
padding-top:4px;
padding-bottom:4px;
font-size:12px;
}
.widget-tab  ul li:last-child {
border-bottom:none;
}
.widget-tab  ul li a {
text-decoration:none;
color:#3e4346;
}
.widget-tab  ul li a small {
color:#8b959c;
font-size:9px;
text-transform:uppercase;
font-family:Verdana, Arial, Helvetica, sans-serif;
position:relative;
left:4px;
top:0px;
}
.tab-content  ul li a:hover {
color:#a59c83;
}
.tab-content  ul li a:hover small {
color:#baae8e;
}

.active-tab{
background:#FFFFFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMKKbtArXkqG8pL6qik4Trq8zzVMWw52nhv2sgDSeCcumuBhCzVff7u7t2B38Pw7P6MKHZqu8epGJH3xK9_6Uvg7J2scvebXiZsqXd8ZUDTfzGcBEG94jMecfIaHpwkU5ZMhNwbkDjIEo/s1600/sidebar.png) repeat-x scroll left bottom !important;
color:#282E32 !important;        
}

ul.tab-wrapper {
margin:0px; padding:0px;
margin-top:5px;
margin-bottom:6px;
}

ul.tab-wrapper li{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2mEfH-4QCgH5VDL3-QU_5amJpobLjlQUaI0UA2TYYJShnIaQgowY7Eoq3iQ2_D4Cs9Es4nYURtdLU4aJIhEMhspVBakOxqM0fNNDcOfSCfZAZqJuwmXHccLB8BE58cr7M6S4F0JZc48s/s1600/menu-m1.png) repeat-x top;
color:#FFF;
cursor:pointer;
display:inline;font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:9px;
font-weight:700;
line-height:2em;
list-style-image:none!important;
list-style-position:outside!important;
list-style-type:none!important;
margin-right:1px;
text-align:center;
text-decoration:none;
text-transform:uppercase;
padding:8px 14px
}  

6. Tabber ini menggunakan efek jquery, makanya sobat harus punya jquery.min.js di html blog sobat. Ada beberapa template yang sudah terinstall jquery ini, bagi yang sudah terinstal lewati saja langkah ini.. Untuk mengeceknya silahkan lihat di atas kode </head>. Kodenya seperti ini..

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>

Versinya bisa berbeda beda.

7. Tambahkan kode ini tepat di bawah script jquery no 6 tadi..

<script type='text/javascript'>
var starttab=0;
var endtab=2;
var sidebarname=&quot;sidebar&quot;;
</script>
<script src='http://johnytemplate.googlecode.com/files/tabber.js' type='text/javascript'/

var starttab adalah nomor wigdet yang dihitung mulai dari 0 (nol). var endtab=2 adalah nomor terakhir widget yang ingin di satukan. Misalnya saya menggunakan seperti kode di atas, maka hasilnya bisa anda lihat di blog ini yaitu 3 widget, recent post, popular post dan recent comment (0 - 1 - 2 => jumlahnya 3). Jadi bisa dibilang 3 widget pertama yang akan menyatu.

var sidebarname diisi dengan id dimana nantinya akan di sertakan sidebarnya. Temukan kode yang kurang lebih seperti di bawah ini..

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>

Lihat yang warna biru di atas, var sidebarname diisi sesuai dengan idnya. Misalnya id di atas adalah sidebarleft, maka di var sidebarname diisi seperti ini..

var sidebarname=&quot;sidebarleft&quot;;

7. Save dan lihat hasilnya.

Reference = creatingwebsite-maskolis.blogspot.com
                   Abu Farhan

Baca Juga

Cara Membuat Tabber Sederhana ( Tab View )

4/ 5

Oleh belajar blog

belajar blog 4 Komentar