Menulis

Cara Mudah Membuat Tabber di Sidebar Blogger

Posted by Romel Tea ● Follow @romeltea ● Like Romeltea Media on Facebook

Cara Mudah Membuat Tabber di Sidebar Blogger
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>


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

Author:

I am a Blogger, Media Practisioner, and Practical Communication Trainer. I share my own knowledges, experiences, and skills about practical communication - writing, speaking, blogging - and my hobbies and concerns. Visit my official website Romeltea.

Previous
« Prev Post
2 Komentar untuk "Cara Mudah Membuat Tabber di Sidebar Blogger"

Assalamu'alaikum...
gan.. naha teu jalan nya di cobian dinu simkuring mahh
cik kumaha ieu tehh, pasihan abdi wejangan.a... heheh

Wa'alaikum salam... jigana teu dipasangan kode javascript min js template blogna, cobian tambahkeun kode jquery min js

You comment, I'll visit back your blog. If you have one. Komentar SPAM dan LINK AKTIF tidak akan muncul.