Selasa, 13 Januari 2015

Cara Membuat Tabbed Content di Sidebar Blog


By on 00.27



 Cara Membuat Tabbed Content di Sidebar Blog
Menampilkan atau membuat Tabbed Content Widget di Sidebar Blog bagus buat navigasi dan internal link blog, sekaligus mempercantik dan menghemat ruang.

Apa itu Tabbed Content? Jawabannya, seperti yang Anda lihat di gambar ilustrasi posting ini. Cara membuat tabbed widget semacam ini sangat mudah. Tinggal pasang kode yang sudah disediakan Blogger Central.

1. Klik "Layout" > "Add A Gadget"
2. Pilih "HTML/Javascript"
3. Kotak "title" (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. Hapus javascript yang berwarna merah jika di dalam template Anda sudah ada. Jangan dobel, nanti "berantem" :)

6. Ubah angka 3 menjadi 4-5 atau berapa pun jika ingin menambah jumlah tab.
7. Save!

8. Tambahkan 3 widget (Add a Gadget) di bawah Tabbed Widget yang sudah dibuat tadi. Lihat gambar berikut ini:



Demikian  Cara Membuat Tabbed Content di Sidebar Blog. Untuk lebih jelas dan rinci, silakan ke TKP. Good Luck!


About The Blogger

"Belumkah datang waktunya bagi orang-orang yang beriman, untuk tunduk hati mereka mengingat Allah dan kepada kebenaran yang telah turun (kepada mereka), dan janganlah mereka seperti orang-orang yang sebelumnya telah diturunkan Al Kitab kepadanya, kemudian berlalulah masa yang panjang atas mereka lalu hati mereka menjadi keras. Dan kebanyakan di antara mereka adalah orang-orang yang fasik." (QS. Al Hadid 57 : 16)

0 komentar:

Posting Komentar