Codepelajar – Dalam dunia blogging, memiliki tampilan yang menarik dan efisien merupakan salah satu kunci kesuksesan. Salah satu fitur yang bisa membantu Anda mencapai tampilan yang menarik adalah multi tab widget. Namun, apa sebenarnya multi tab widget pada platform Blogspot?
Multi tab widget adalah fitur yang memungkinkan Anda menampilkan beberapa tab konten berbeda dalam satu ruang kecil. Dengan kata lain, Anda dapat mengatur dan menampilkan berbagai jenis informasi dalam satu widget kecil, seperti daftar posting terbaru, arsip artikel, kategori, atau bahkan iklan.
Keuntungan utama menggunakan multi tab widget adalah efisiensi ruang tampilan. Daripada menggunakan beberapa widget yang berukuran besar untuk masing-masing informasi, Anda dapat menggabungkannya ke dalam satu widget dengan beberapa tab. Ini memungkinkan Anda menyimpan ruang yang berharga pada tata letak blog Anda.
Selain itu, multi tab widget juga memberikan pengalaman navigasi yang lebih baik bagi pengunjung blog Anda. Mereka dapat dengan mudah memilih tab yang ingin mereka lihat, mempercepat akses ke konten yang mereka cari. Misalnya, jika Anda memiliki beberapa kategori posting, pengunjung dapat memilih kategori yang diminati dan langsung melihat posting terkait.
Cara mengatur multi tab widget pada Blogspot sangatlah mudah. Lagi pula, Blogspot adalah platform blogging yang ramah pengguna. Anda hanya perlu memilih widget yang sesuai dengan kebutuhan Anda, misalnya “Tabbed Widget” atau “Multi Tabbed Widget”, dan menambahkannya ke tata letak blog Anda. Setelah itu, Anda dapat mengatur tab dan konten yang akan ditampilkan di setiap tab.
Terkadang, widget multi tab juga dapat dikustomisasi agar sesuai dengan tampilan unik blog Anda. Hal ini memungkinkan Anda mengubah warna, ukuran, atau bahkan menambahkan ikon atau gambar. Dengan begitu, Anda dapat menciptakan tampilan yang unik dan membuat widget Anda lebih terlihat menarik.
Namun, perlu diingat bahwa penggunaan multi tab widget yang berlebihan juga dapat menyulitkan pengunjung blog Anda. Jika terlalu banyak tab di satu widget, pengunjung mungkin akan kesulitan mencari konten yang mereka cari. Oleh karena itu, penting untuk memilih dengan cermat konten yang akan ditampilkan di setiap tab agar sesuai dengan kebutuhan dan minat pengunjung blog Anda.
Script Multi Tab Widget Minimalis Blogspot:
Tambahkan script dibawah ini dalam template blogspot anda dan pasang widget sesuai yang anda inginkan.
HTML
<div class="container">
<div class='bsd-tab-area'>
<ul class='bsdmultitab-gadget bsdmultitab-gadget-content-tabs-id'>
<li class='multitabs-bsd'><a href='#multicolumn-widget-id1'>Trending</a></li>
<li class='multitabs-bsd'><a href='#multicolumn-widget-id2'>Category</a></li>
<li class='multitabs-bsd'><a href='#multicolumn-widget-id3'>Archive</a></li>
</ul>
<div class='bsdmultitab-gadget-content bsdmultitab-gadget-content-widget-id' id='multicolumn-widget-id1'>
<span class='sidebar' id='sidebartab1' preferred='yes'>
<p>Multi Tab 1
</br>
</br>
here you can show popular posts.</br>
</br>
you can also add recent comments blogger or disqus</br>
</br> Its very easy to install </br>
</br>
Just add multitab widget to increase the look of your website.</p>
</span>
</div>
<div class='bsdmultitab-gadget-content bsdmultitab-gadget-content-widget-id' id='multicolumn-widget-id2'>
<span class='sidebar' id='sidebartab2' preferred='yes'>
<p>Multi Tab 2
</br>
</br>
here you can show popular posts.</br>
</br>
you can also add recent comments blogger or disqus</br>
</br> Its very easy to install </br>
</br>
Just add multitab widget to increase the look of your website.</p>
</span>
</div>
<div class='-content bsdmultitab-gadget-content-widget-id' id='multicolumn-widget-id3'>
<span class='sidebar' id='sidebartab3' preferred='yes'>
<p>Multi Tab 3
</br>
</br>
here you can show popular posts.</br>
</br>
you can also add recent comments blogger or disqus</br>
</br> Its very easy to install </br>
</br>
Just add multitab widget to increase the look of your website.</p>
</span>
</div>
</div>
</div>
CSS
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700);
*,
*:after,
*:before {
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
text-rendering: optimizeLegibility
}
body {
background: #eaeaea none repeat scroll top left;
color: #444;
font-family: 'Open Sans', sans-serif;
margin: 0;
padding: 0;
position: relative;
line-height: normal;
}
.container {
max-width: 310px;
margin: 12% auto;
padding: 0;
box-shadow: 0 10px 5px -5px rgba(0, 0, 0, 0.1);
font-family: 'Open Sans', sans-serif;
}
/* MultiTab Sidebar Widget By www.BloggersStanD.com */
.bsd-tab-area {
display: inline-block;
text-transform: uppercase;
width: 100%;
}
.bsd-tab-area p {
display: inline-block;
background: #fff;
text-transform: lowercase;
font-size: 14px;
padding: 20px;
margin: 0;
}
.bsdmultitab-gadget {
list-style: none;
margin: 0 0 10px;
padding: 0
}
.bsdmultitab-gadget li {
list-style: none;
padding: 0;
margin: 0;
float: left
}
.bsdmultitab-gadget li a {
background: #8ED557;
color: #fff;
display: block;
padding: 15px;
font-size: 12px;
text-decoration: none
}
.multitabs-bsd {
width: 33.3%;
text-align: center
}
.bsd-tab-area h2,
.bsd-tab-area h3,
.bsd-tab-area h4,
.bsd-tab-area h5,
.bsd-tab-area h6 {
display: none;
}
.bsdmultitab-gadget li a.bsdmultitab-gadget-current {
padding-bottom: 20px;
margin-top: -8px;
background: #fff;
color: #333;
text-decoration: none;
border-top: 3px solid #8ED557;
font-size: 13px;
text-transform: uppercase
}
JavaScript
//<![CDATA[
// Multi tab widget
jQuery(document).ready(function($){ $(".bsdmultitab-gadget-content-widget-id").hide(); $("ul.bsdmultitab-gadget-content-tabs-id li:first a").addClass("bsdmultitab-gadget-current").show(); $(".bsdmultitab-gadget-content-widget-id:first").show(); $("ul.bsdmultitab-gadget-content-tabs-id li a").click(function() { $("ul.bsdmultitab-gadget-content-tabs-id li a").removeClass("bsdmultitab-gadget-current a"); $(this).addClass("bsdmultitab-gadget-current"); $(".bsdmultitab-gadget-content-widget-id").hide(); var activeTab = $(this).attr("href"); $(activeTab).fadeIn(); return false; }); });
//]]>
Secara keseluruhan, multi tab widget merupakan fitur yang berguna dan efisien pada platform Blogspot. Dengan memanfaatkannya, Anda dapat mengoptimalkan tampilan blog Anda, menyederhanakan navigasi pengunjung, dan_memberikan pengalaman pengguna yang lebih baik. Tetapi ingatlah untuk menggunakan widget secara bijak dan tidak berlebihan, agar tidak membingungkan atau mengganggu pengguna.
