Kode Widget Tabber Tab Sidebar Blog

Baca Juga

Cara Membuat Widget Tabber Tab Sidebar Blog

BERIKUT ini kode Widget Tabber Tab Sidebar Blog yang digunakan di blog ini. Cara menggunakannya:

1. Layout > HTML/Javascript
2. Judul Widget Kosongkan
3. Masukkan kode ini di kolom konten:

<style>
#sidebar-wrapper h2{padding: 10px;font-size: 12px;color: #fff;border-bottom: 2px solid #e0e0e0;font-weight: bold;font-family:Arial;}
</style>
<style type="text/css">.tabber{padding:0!important;border:0 solid #bbb!important}.tabber h2{float:left;margin:0 1px -1px 0;font-size:12px;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://www.romelteamedia.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://www.romelteamedia.com" target="_blank" style="display:none">Get Widget</a></p></div>

4. Tambahkan tiga widget di bawahnya.

Hasilnya:

Selesai!