Kode Widget Tabber Tab Sidebar Blog

Posted by New Johny Wuss

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:
Kode Widget Tabber Tab Sidebar Blog

Selesai!

» Thanks for reading: Kode Widget Tabber Tab Sidebar Blog
Previous
« Prev Post
CB Blogger
New Johny WussUpdated: September 25, 2015

0 comments:

Post a Comment

Follow & Get Update by Email

CB