Membuat Tabber Tab di Blog dengan Mudah

Membuat Tabber Tab di Sidebar Blog Keren
Tabberd tab di seidebar blog merupakan suatu model desain blog yang sudah dibilang populer di kalangan para blogger. Tabber tab ini merupakan metode "ringkasan" beberapa widget di sidebar blog.

Dengan adanya tabber tab di sidebar blog, tentu akan membuat rapi, clean dan enak di pandang mata. Hal ini khususnya bagi para blogger yang ingin memperbanyak banyak widget di blog. Misalkan saja ada popular post, tabel dan arsip yang dijadikan satu mode tabber tab. Tau bisa juga dipadukan dengan tiga widget lainnya.

Cara Membuat Tabber Tab di Sidebar Blog

Cara membuat tabber tab di sidebar blog cukup mudah. Sobat tidak perlu melakukan edit template. Yang perlu dilakukan hanya:

1. Masuk akun blogger
2. Pilih tata letak (layout) > add widget > java script
3. Copas kode di bawah ini

<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

Mudah kan.

Untuk menambah desai blog Sobat lebih menarik, silakan simak cara membuat daftar isi sesuai abjad. 

Demikian tips desain blog cara membuat tabber tab di blog dengan mudah. Semoga bermanfaat.
Source:
http://www.contohblog.com/2015/09/cara-termudah-membuat-tabber-tab-sidebar-blogger.html