Cara Termudah Membuat Tabber Tab di Sidebar Blogger

Baca Juga

POSTING cara termudah menampilkan, memasang, atau membuat Tabber Tab di sidebar blog blogspot ini melengkapi --bahkan mengeliminasi-- tips sebelumnya: Cara Membuat Tabbed Widget di Sidebar Blog.

Tutorial membuat tabber berikut ini mudah banget, gak pake tidak ribet, juga GPL (Gak Pake Lama).

Sebelumnya, bagi yang belum tahu apa itu Tabber Tab, lihat saja gambar ilustrasi posting ini.

Tabber atau Tab adalah widget di sidebar blog berupa tabel yang menggabungkan dua atau tiga widget dalam satu space, sehingga menghemat sidebar, lebih efektif-efisien, dan lebih ramah pengguna (user friendly).

Tabber ini merupakan salah satu trending desain blog saat ini, selain Next Previous berupa judul posting.

Kode Tabber di bawah ini sudah CB terapkan di blog demo New Johny Wuss. Demonya juga tentu saja bisa dilihat di Demo Template JNW seperti gambar ilustrasi posting ini.

Cara Termudah Membuat Tabber Tab di Sidebar Blogger

Tahap #1: Memasang Tabber

1. Klik "Layout" > pilih "HTML/Javascript"
2. Judul Kosongkan
3. Copy & Paste kode berikut ini di kolom "Content":

<style type="text/css">.tabber{padding:0!important;border:0 solid #bbb!important}.tabber h2{float:left;margin:0 1px -1px 0;font-size:13px;font-family:Arial;color:#fff;padding:10px;overflow:hidden;position:relative;cursor:pointer;overflow:hidden;position:relative;background:#333;cursor:pointer}html .tabber h2.active{background:#48d;border-bottom:1px solid #fff}.tabber .widget-content{padding:10px;background:#fff;clear:both;margin:0}.codewidget,#codeholder{display:none}</style>
<script type="text/javascript">(function(a){a.fn.bloggerTabber=function(e){var g={tabCount:3};var e=a.extend(g,e);var f=a(this).parent().parent(".widget");f.addClass("codewidget");if(a('a[href^="http://contohblognih.blogspot.com"]').is("#codeholder a")){f.nextAll(".widget").slice(0,e.tabCount).addClass("tabber")}else{}a(".tabber").hide();a(".tabber:first").prepend(a(".tabber h2"));a(".tabber:first").show();a(".tabber").append(a("#codeholder p").css({margin:"5px 0 0",padding:"0","font-size":"10px"}));a(".tabber h2:first").addClass("active");a(".tabber h2").click(function(){a(".tabber h2").removeClass("active");a(this).addClass("active");var c=a(".tabber h2").index(a(this));var b=a(".tabber:eq("+c+")");b.prepend(a(".tabber h2"));a(".tabber").hide();b.show();b.find(".widget-content").contents().hide();b.find(".widget-content").contents().fadeIn(700);return false})}})(jQuery);</script>
<script type="text/javascript">$(document).ready(function(){$("#codeholder").bloggerTabber({tabCount:3})});</script>
<div id='codeholder'><p><a href="http://contohblognih.blogspot.com" target="_blank" style="display:none">Tabber Widget</a></p></div>

4. Save!

Tahap #2 Menampilkan Widget di Tabber

Masih di Layout, tambahkan tiga buah gadget di bawahnya. Di blog NJW, CB pasangkan tiga widget sebagai berikut: Terpopuler, Terbaru, dan Komentar. Widget keempat dst. tidak akan ikut masuk ke dalam Tabber Tab.

Widget Popular Post dan Label (Kateori) sudah disediakan blogger. Untuk menampilkan widget Posting Terbaru dan Komentar Terbar, silakan ke posting Cara Menampilkan Posting Terbaru dan Komentar Terbaru.

Demikian cara terudah membuat Tabber Tab di Sidebar Blogger yang sudah dipraktikkan dan berhasil di blog demo Template SEO Friendly New Johny Wuss. Kodenya CB ambil dan modif dari Blogger Central. Good Luck! (http://contohblognih.blogspot.com).*