Cara Mudah Membuat Tabber di Sidebar Blogger

September 23, 2015 Follow @romel_tea
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>

- 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

Thanks for reading Cara Mudah Membuat Tabber di Sidebar Blogger | Tags:

Next Article
« Prev Post
Previous Article
Next Post »

Related Posts

Your Comments

3 komentar

Tulis komentar
Beja Keun
AUTHOR
June 07, 2016 delete

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

Reply
avatar
Romel Tea
AUTHOR
June 08, 2016 delete

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

Reply
avatar
J-88 Blogs
AUTHOR
September 03, 2017 delete

Mantap gan
Bahasanya Mudah dimengerti
Keep Blogging

Reply
avatar

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