Membuat Tabbed Content Widget di Sidebar Blog bagus, keren buat navigasi dan internal link blog kita, sekaligus mempercantik dan menghemat ruang di blog.
oke ini dia langkah -langkahnya
1. Klik "tat letak" > "Add A Gadget"
2. Pilih "HTML/Javascript"
3. Kotak (judul) kosongkan, jangan diisi apa pun.
4. Copy + Paste kode berikut ini di kotak konten:
<style type="text/css">
.tabber {
padding: 0px !important;
border: 0 solid #bbb !important;
}
.tabber h2 {
float: left;
margin: 0 1px 0 0;
font-size: 12px;
padding: 3px 5px;
border: 1px solid #bbb;
margin-bottom: -1px; /*--Pull tab down 1px--*/
overflow: hidden;
position: relative;
background: #e0e0e0;
cursor:pointer;
}
html .tabber h2.active {
background: #fff;
border-bottom: 1px solid #fff; /*--"Connect" active tab to its content--*/
}
.tabber .widget-content {
border: 1px solid #bbb;
padding: 10px;
background: #fff;
clear:both;
margin:0;
}
.codewidget, #codeholder {
display:none;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script type="text/javascript" src="http://greenlava-code.googlecode.com/svn/trunk/publicscripts/bloggertabs0.1_min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#codeholder').bloggerTabber ({
tabCount : 3
});
});
</script>
<!-- to make sure the widget works, do not alter the code below -->
<div id='codeholder'><p>Get this <a href="http://www.bloggersentral.com/2011/05/create-tabbed-content-blogger-widgets.html" target="_blank">tabber widget</a></p></div>
5. Hapuslah javascript yang berwarna merah jika di dalam template Anda sudah ada. Jangan dobel, nanti "berantem" :) hehe
6. Ubah angka 3 menjadi 4-5 atau berapa pun jika ingin menambah jumlah tab.
Selamat mencoba..
jangan lupa komentar dan like nya
Thank you for reading this article about Cara Membuat Tabbed Content di Sidebar Blog Dengan Mudah. If you want to duplicate this article you are expected to include links http://must-olih.blogspot.com/2014/10/cara-membuat-tabbed-content-di-sidebar.html. Thank you for your attention.