Cara Mudah Membuat Tabber di Sidebar Blogger

Baca Juga

Cara Mudah Membuat Tabber Tab di Sidebar Blog Blogspot.

TABBER atau Tab yaitu widget di sidebar blog untuk menyatukan tiga buah widget untuk "menghemat" kolom sidebar, biar gak kepanjangan ke bawah. 

Demo tabber ada di sidebar kanan blog ini, seperti gambar ilustrasi posting ini.

Cara membuat tabber tab ini sangat mudah. Makanya, judulnya pun dikasi kata "mudah" karena gak seribet desain tabber lainnya.

Fungsi tabber tab ini, selain untuk  menghemat space sidebar blog, juga sebagai navigasi menu dan internal link yang membuat blog makin seo dan user friendly (ramah mesin pencari dan pengguna).

Cara Mudah Membuat Tabber di Sidebar Blog Blogspot:

1. Klik "Layout" > pilih "HTML/Javascript"
2. Judul Kosongkan
3. Copas kode berikut ini di kolom Content:

<style type="text/css">.tabber{padding:0!important;border:0 solid #bbb!important}.tabber h2{float:left;margin:0 1px -1px 0;font-size:16px;font-family:'Open Sans Condensed',Arial;padding:8px 7px;overflow:hidden;position:relative;cursor:pointer;overflow:hidden;position:relative;background:#333;cursor:pointer}html .tabber h2.active{background:#c00;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>

- Ganti alamat blog warna merah dengan alamat blog Anda.

4. Save!

Cara Menampilkan Widget
Masih di Layout, tambahkan tiga buah gadget di bawahnya, misalnya Popular Posts, Recent Posts, dan Label.

 

Widget Popular Post dan Label (Kateori) sudah disediakan blogger. Untuk menampilkan widget Posting Terbaru, caranya:

1. Add a Gadget > pilih  "Feeds" 

2. Masukkan alamat amalat blog Anda

3. Klik "Continue"

4. Ganti Nama Blog Anda yang muncul di Title/Judul dengan "Terbaru"

5. Save!

Cara Mudah Membuat Tabber di Sidebar Blogger ini sudah dipraktikkan dan berhasil, makanya saya berani share. Wasalam. (http://www.romelteamedia.com).*

Sumber