Langsung di bahas saja ya demonya bisa dilihat di sini
1.cari kode ini pada template blog kamu ]]></b:skin>
2. Kemudian paste kode di bawah tepat di bawah ]]></b:skin>
1.cari kode ini pada template blog kamu ]]></b:skin>
2. Kemudian paste kode di bawah tepat di bawah ]]></b:skin>
/* Tabbed Sidebar Widgets --------------------------------- */ .widget-wrapper2{ border:1px solid #494e52; background-color:#636d76; padding:8px; } .widget-tab { -moz-border-radius-bottomleft:5px; -moz-border-radius-bottomright:5px; -moz-border-radius-topright:5px; -webkit-border-radius-bottomleft:5px; -webkit-border-radius-bottomright:5px; -webkit-border-radius-topright:5px; background:#FFFFFF url(http://i195.photobucket.com/albums/z105/dantearaujo/tabcontentbg.gif) repeat-x scroll left bottom !important; border:1px solid #CFCFCF; font-family:Arial,Helvetica,sans-serif; padding:15px !important; } .widget-tab ul { margin:0px; padding:0px 20px 0px 20px; } .widget-tab ul li { list-style:none; border-bottom:1px solid #d6dde0; padding-top:10px; padding-bottom:10px; font-size:13px; } .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(http://i195.photobucket.com/albums/z105/dantearaujo/tabtopbg.gif) repeat-x scroll left top !important; border-color:#CFCFCF #CFCFCF #FFFFFF #CFCFCF !important; border-style:solid !important; border-width:1px 1px 2px !important; color:#282E32 !important; } ul.tab-wrapper { margin:0px; padding:0px; margin-top:5px; margin-bottom:6px; } ul.tab-wrapper li { -webkit-border-radius-topleft:5px; -webkit-border-radius-topright:5px; -moz-border-radius-topleft:5px; -moz-border-radius-topright:5px; background:#191919 url(http://i195.photobucket.com/albums/z105/dantearaujo/tabinactivebg.gif) repeat-x scroll left top; border:1px solid #464C54; color:#FFFFFF; cursor:pointer; display:inline; font-family:Verdana,Arial,Helvetica,sans-serif; font-size:9px; font-weight:bold; line-height:2em; list-style-image:none !important; list-style-position:outside !important; list-style-type:none !important; margin-right:1px; padding:8px 14px; text-align:center; text-decoration:none; text-transform:uppercase; }
3. Jika blog kamu belum terdapat script jquary. kamu harus menginstal script jquary cari kode </head> lalu pastekan script jquary dibawah ini sebelum </head>
<!-- jQuery Call --> <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/> <!-- End of jQuery Call -->
</head>
<script type="text/javascript"> var starttab=0; var endtab=2; var sidebarname="sidebar1"; </script> <script type="text/javascript" src="http://scriptabufarhan.googlecode.com/svn/trunk/bloggertabv1.0-min.js"></script>
var starttab=0;
var endtab=2;
var sidebarname="sidebar";
var endtab=2;
var sidebarname="sidebar";
Perubahanvar sidebarname="sidebar";, karena bisa saja template kamu memiliki id sidebar yang berbeda untuk itu perlu di sesuaikan dan menganti sidebar denganid sidebar blog kamu. Sedangkan var endtab=2; adalah jumlah kolom widget, 2 berarti terdapat 3 kolom widget karena var starttab=0; adalah widget pertama. untuk jelasnya lihat gambar ini:
Jika mengalami kesulitan silahkan berkomentar dan tinggalkan alamat blog anda insya Allah saya akan membantu. thanks Abu Farhan
0 comments:
Post a Comment