Cara Membuat Multi Tab Widget pada Sidebar Blog

Multi Tab widget pada sidebar digunakan untuk meminimize widget yang terlalu banyak dan memanjang kebawah.


Blog design yang baik biasanya simple dan nyaman dilihatnya, widget yang terlalu panjang tidak baik untuk pengunjung karena akan terganggu dengan tampilan widget yang serba serbi apalagi hanya sebuah pajangan. Widget yang terlalu banyak pasti akan mempengaruhi kapasitas dari sidebar di blog kita. Untuk antisipasi menumpuknya widget, artikel kali ini akan sharing tentang bagaimana Cara Membuat Multi Tab widget pada Sidebar Blog yang tujuanya adalah agar tampilan widget terlihat tidak terlalu memanjang dan terlihat simple.

Multi Tab biasanya berisi widget artikel popular, label, archive, dan kategori lainnya. Kali ini kita akan bahas multi tab dengan jumlah kolom hanya tiga, jika kalian membuka kolom yang pertama, maka kolom yang kedua dan ketiga akan tersembunyi dibalik kolom yang pertama. Langsung saja kita perhatikan langkah langkah berikut ini :

Step 1. Login ke blog kalian

Step 2. Masuk ke pengaturan Tamplate dan pilih Edit HTML

Step 3. Cari kode ]]></b:skin> atau </style>

Step 4. Copy dan Pastekan kode script berikut diatas kode ]]></b:skin> atau </style>

/* Multi Tab Widget */
.multitab-section{background:#fff;text-transform:uppercase;width:100%}
.multitab-widget{list-style:none;margin:0 0 10px;padding:0}
.multitab-widget li{list-style:none;padding:0;margin:0;float:left}
.multitab-widget li a{background:#22a1c4;color:#fff;display:block;padding:15px;font-size:13px;text-decoration:none}
.multitab-tab{border:0;width:33.3%;text-align:center}
.multitab-section h2,.multitab-section h3,.multitab-section h4,.multitab-section h5,.multitab-section h6 {display:none;}
.multitab-widget li a.multitab-widget-current{padding-bottom:20px;margin-top:-10px;background:#fff;color:#444;text-decoration:none;border-top:5px solid #22a1c4;font-size:14px;text-transform:capitalize}


Step 5. Copy dan Pastekan kode script berikut atas kode </body>


<script type='text/javascript'>
//<![CDATA[
// Multi tab widget
jQuery(document).ready(function($){ $(".multitab-widget-content-widget-id").hide(); $("ul.multitab-widget-content-tabs-id li:first a").addClass("multitab-widget-current").show(); $(".multitab-widget-content-widget-id:first").show(); $("ul.multitab-widget-content-tabs-id li a").click(function() { $("ul.multitab-widget-content-tabs-id li a").removeClass("multitab-widget-current a"); $(this).addClass("multitab-widget-current"); $(".multitab-widget-content-widget-id").hide(); var activeTab = $(this).attr("href"); $(activeTab).fadeIn(); return false; }); });
//]]>
</script>


Step 6. Cari kode <div id='sidebar-wrapper'>

Step 7. Copy dan pastekan kode script berikut dibawah kode <div id='sidebar-wrapper'>


<div class='multitab-section'>
<ul class='multitab-widget multitab-widget-content-tabs-id'>
<li class='multitab-tab'><a href='#multicolumn-widget-id1'>Popular</a></li>
<li class='multitab-tab'><a href='#multicolumn-widget-id2'>Tags</a></li>
<li class='multitab-tab'><a href='#multicolumn-widget-id3'>Archive</a></li>
</ul>
<div class='multitab-widget-content multitab-widget-content-widget-id' id='multicolumn-widget-id1'>
<b:section class='sidebar' id='sidebartab1' preferred='yes'/>
</div>
<div class='multitab-widget-content multitab-widget-content-widget-id' id='multicolumn-widget-id2'>
<b:section class='sidebar' id='sidebartab2' preferred='yes'/>
</div>
<div class='multitab-widget-content multitab-widget-content-widget-id' id='multicolumn-widget-id3'>
<b:section class='sidebar' id='sidebartab3' preferred='yes'/>
</div>
</div>


Step 8. Simpan Tamplate

Silahkan melakukan penambahan widget pada pengaturan Tata Letak blog kalian, silahkan mencoba dan semoga berhasil.


COMMENTS

Name

#BeMoreProductive,1,6th Indonesian Pearl Festival 2016,1,Abutours.com,1,Adobe Premier Pro,1,Asusintel,1,Award,1,Babasal Mombasa,1,Backsound,2,Balancing,1,Bangga di Banggai,1,Be Gravitasi,1,Bebas Bayar,1,Bengkel Mobil,1,Bika Bogor,1,Bika Bogor Talubi,1,Biznis,1,Blog Design,18,Blogger,24,Bumper,1,CC 2015,1,Citra Maja Raya,1,Co-working Space,1,Colidan,1,Competition,32,Competition DEV+,1,Corel Draw X7,1,Coreldraw,1,CV Design,1,Cyko Handbreak,1,dealoka,1,Designer,5,Dotcomforme.com,1,Education,6,Ekspresikan Dirimu,1,Elevenia,1,Excite Shop,1,FestHAM2016,1,Fintech,1,Footer,1,FSB,1,Goverment PR,1,HAnavi,1,Header,6,Himawan Putra,1,HIS Travel Indonesia,1,hostinger,1,Indramayu Kota Budaya,1,Influenzer,31,Inspirasi Astra,1,JIBB,1,Kuliner Bogor,1,Lawan Neuropati,1,Luna Smartphone,1,Main Post,3,Marketz,3,Meeting Room,1,Milkshake,1,Motion Graphic,2,Neurobion,1,Neuropati,1,Obat maag paling ampuh,1,Office Room,1,Oleh-oleh Bogor,1,Oleh-oleh Khas Bogor,1,Paket Meeting,1,Pesona Jawa Tengah,1,Pop Ice,1,Ralali.com,2,Review,29,Ruang Kantor,1,Ruang Meeting,1,rukamen,1,Serumah.com,1,sewa apartemen,1,Shop n Drive,2,Sidebar,8,Skyscanner,1,Software,3,Sound Effect,2,Sponsor,12,Spooring,1,Storylio,1,Tips Blogging,3,Tips Design,3,Travel,8,Traveloka,2,Tutorial Blog,1,Tutorial Motion,1,Vector,1,Video Editor,5,Video Effect,1,Visit Tidore Island,1,XWORK,1,Youtuber,6,
ltr
item
Artadhitive | Daily Content Creator: Cara Membuat Multi Tab Widget pada Sidebar Blog
Cara Membuat Multi Tab Widget pada Sidebar Blog
Multi Tab widget pada sidebar digunakan untuk meminimize widget yang terlalu banyak dan memanjang kebawah.
https://1.bp.blogspot.com/-ucUz8br5D94/V4-qK8YN2fI/AAAAAAAAE30/4zBXDiPtTeQPkgl_Pt3gP3pMiTLOjIbIACLcB/s1600/Blog%2B13.png
https://1.bp.blogspot.com/-ucUz8br5D94/V4-qK8YN2fI/AAAAAAAAE30/4zBXDiPtTeQPkgl_Pt3gP3pMiTLOjIbIACLcB/s72-c/Blog%2B13.png
Artadhitive | Daily Content Creator
http://www.artadhitive.com/2016/07/Design-Blog-Cara-Membuat-Multi-Tab-Widget-pada-Sidebar-Blog.html
http://www.artadhitive.com/
http://www.artadhitive.com/
http://www.artadhitive.com/2016/07/Design-Blog-Cara-Membuat-Multi-Tab-Widget-pada-Sidebar-Blog.html
true
9208609652601285124
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy