September 24, 2015

Cara Termudah Membuat Tabber Tab di Sidebar Blogger

September 24, 2015

Tabber Tab di Sidebar Blogger
POSTING cara termudah menampilkan, memasang, atau membuat Tabber Tab di sidebar blog blogspot ini melengkapi --bahkan mengeliminasi-- tips sebelumnya: Cara Membuat Tabbed Widget di Sidebar Blog.

Tutorial membuat tabber berikut ini mudah banget, gak pake tidak ribet, juga GPL (Gak Pake Lama).

Sebelumnya, bagi yang belum tahu apa itu Tabber Tab, lihat saja gambar ilustrasi posting ini.

Tabber atau Tab adalah widget di sidebar blog berupa tabel yang menggabungkan dua atau tiga widget dalam satu space, sehingga menghemat sidebar, lebih efektif-efisien, dan lebih ramah pengguna (user friendly).

Tabber ini merupakan salah satu trending desain blog saat ini, selain Next Previous berupa judul posting.

Kode Tabber di bawah ini sudah CB terapkan di blog demo New Johny Wuss. Demonya juga tentu saja bisa dilihat di Demo Template JNW seperti gambar ilustrasi posting ini.

Cara Termudah Membuat Tabber Tab di Sidebar Blogger

Tahap #1: Memasang Tabber

1. Klik "Layout" > pilih "HTML/Javascript"
2. Judul Kosongkan
3. Copy & Paste 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:13px;font-family:Arial;color:#fff;padding:10px;overflow:hidden;position:relative;cursor:pointer;overflow:hidden;position:relative;background:#333;cursor:pointer}html .tabber h2.active{background:#48d;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://contohblognih.blogspot.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://contohblognih.blogspot.com" target="_blank" style="display:none">Tabber Widget</a></p></div>

4. Save!

Tahap #2 Menampilkan Widget di Tabber

Masih di Layout, tambahkan tiga buah gadget di bawahnya. Di blog NJW, CB pasangkan tiga widget sebagai berikut: Terpopuler, Terbaru, dan Komentar. Widget keempat dst. tidak akan ikut masuk ke dalam Tabber Tab.

Tabber Tab di Sidebar Blogger

Widget Popular Post dan Label (Kateori) sudah disediakan blogger. Untuk menampilkan widget Posting Terbaru dan Komentar Terbar, silakan ke posting Cara Menampilkan Posting Terbaru dan Komentar Terbaru.

Demikian cara terudah membuat Tabber Tab di Sidebar Blogger yang sudah dipraktikkan dan berhasil di blog demo Template SEO Friendly New Johny Wuss. Kodenya CB ambil dan modif dari Blogger Central. Good Luck! (http://contohblognih.blogspot.com).*

Previous
« Prev Post
Author Image

CB Blogger

Recommended Posts

Related Posts

Show comments
Hide comments

4 comments on Cara Termudah Membuat Tabber Tab di Sidebar Blogger

  1. terbaru ini ya om :D, mohon ijin diamankan dulu.

    ReplyDelete
  2. tidak tampil om CIBI. dan lagi untuk pemanggilan widgetnya ini di kode yang mana? terima kasih

    ReplyDelete
  3. gagal omm, tidak tampil

    ReplyDelete
  4. terimakasih mas, berhasil dibuat dan kelihatan lebih rapi

    ReplyDelete

Contact Form

Name

Email *

Message *