Cara Menambahkan Widget Sidebar jQuery di Blogger

Ditulis Arman Basir / August 27, 2017 August 27, 2017

Pernahkah Anda melihat blog yang memiliki area widget tab di sidebar yang terdiri dari posting terbaru yang populer dan terkini dalam satu klik? Hal ini lebih dikenal dengan widget jQuery Tabbed, yang memungkinkan Anda menghemat banyak ruang di sidebar yang menjaga agar pengguna antarmuka mudah dipahami dengan menggabungkan 3 widget yang berbeda menjadi satu saja. Pada artikel ini, kami akan menunjukkan kepada Anda bagaimana menambahkan Widget Sidebar Sidebar jQuery di Blogger.

Apa itu Tab Widget jQuery?

Anda akan melihat banyak situs web yang memiliki widget tab di bagian paling atas sidebar mereka yang membuat tiga widget hanya di satu tempat sehingga Anda dapat memilih satu untuk melihat di antara mereka. Ini tidak hanya memungkinkan Anda untuk menyimpan sedikit ruang di sidebar namun juga membuat desain blog Anda tetap bersih dan profesional.

Banyak situs populer bernama besar menggunakan teknik yang sama untuk menampilkan lebih banyak widget dalam ruang yang lebih sedikit. Pada artikel ini, kami akan menunjukkan kepada Anda cara menambahkan widget jQuery tabbed sidebar di blogger dan akan memandu Anda melalui setiap langkah secara mendetail.

Membuat Widget Tab JQuery di Blogger

Hal pertama yang perlu Anda lakukan adalah pergi ke Blogger >> Template >> Edit HTML dan tempel kode CSS berikut tepat di atas tag]]> </ b: skin>. Jika Anda memiliki file sheet Style Style terpisah maka Anda juga dapat menambahkan CSS berikut ke dalamnya.

/* Tab Widget */
.tabviewsection {
background: #f8f8f8;
text-transform: uppercase;
border-bottom: 5px solid #f34246;
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
float: left;
width: 100%;
}
.tabs-widget {
list-style: none;
list-style-type: none;
margin: 0 0 10px 0;
padding: 0;
}
.tabs-widget li {
list-style: none;
list-style-type: none;
padding: 0;
float: left;
border-right: 2px solid #fff;
}
.tabs-widget li a {
color: #fff;
display: block;
padding-right: 16.5px;
padding-left: 16px;
font-size: 13px;
padding-top: 15px;
padding-bottom: 15px;
text-decoration: none;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.tabs-widget-content {
}
.tabviewsection {
margin-top: 10px;
margin-bottom: 10px;
}
.tags_tab {
width: 80px;
text-align: center;
}
.about_tab {
width: 96px;
text-align: center;
}
li.laster {
border: 0px;
width: 120px;
text-align: center;
}
.blog-mobile-link {
display: none;
}
.tabs-widget li a {
padding-right: 20px;
padding-left: 20px;
}
.tabs-widget {
height: 51px;
}
.tw-authors {
width: 570px;
}
.tabviewsection h2 {
display: none;
}
.tabs-widget li a.tabs-widget-current {
padding-bottom: 20px;
margin-top: -10px;
background: #f8f8f8;
color: #444;
text-decoration: none;
border-top: 5px solid #f34246;
font-size: 14px;
text-transform: capitalize;
}
.tabs-widget li a {
background: #f34246;
}

Sekarang langkah ini sepenuhnya tergantung pada pengkodean template blogger Anda karena desainer yang berbeda memiliki cara pengkodean yang berbeda namun kami akan membagikan cara yang lebih sering digunakan pada template. Anda harus melihat kode area widget Sidebar Anda. Cari <div id = 'sidebar-wrapper'> dan tepat di bawahnya sisipkan potongan kode berikut.

<!-- Tab Widget [start] -->
<div class='tabviewsection'>
<script type='text/javascript'>
  jQuery(document).ready(function($){
                $(".tabs-widget-content-widget-themater_tabs-1432447472-id").hide();
                $("ul.tabs-widget-widget-themater_tabs-1432447472-id li:first a").addClass("tabs-widget-current").show();
                $(".tabs-widget-content-widget-themater_tabs-1432447472-id:first").show();
     
                $("ul.tabs-widget-widget-themater_tabs-1432447472-id li a").click(function() {
                    $("ul.tabs-widget-widget-themater_tabs-1432447472-id li a").removeClass("tabs-widget-current a");
                    $(this).addClass("tabs-widget-current");
                    $(".tabs-widget-content-widget-themater_tabs-1432447472-id").hide();
                    var activeTab = $(this).attr("href");
                    $(activeTab).fadeIn();
                    return false;
                });
            });      
 </script>
<ul class='tabs-widget tabs-widget-widget-themater_tabs-1432447472-id'>
  <li class='about_tab'><a href='#widget-themater_tabs-1432447472-id1'>About</a></li>
  <li class='tags_tab'><a href='#widget-themater_tabs-1432447472-id2'>Tags</a></li>
  <li class='laster'><a href='#widget-themater_tabs-1432447472-id3'>Popular</a></li>
</ul>
<!-- Tab Widget 1 -->
<div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id1'>
<b:section class='sidebar' id='sidebartab1' preferred='yes'>
 </b:section>                                    
</div>
                       
<!-- Tab Widget 2 -->              
<div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id2'>
<b:section class='sidebar' id='sidebartab2' preferred='yes'>
 
 </b:section>                                      
</div>                          
                             
<div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id3'>
<!-- Tab Widget 3 -->
<b:section class='sidebar' id='sidebartab3' preferred='yes'>
</b:section>                                      
</div>
</div>
<!-- Tab Widget [endt] -->

Setelah semuanya selesai dan dibersihkan, simpan template dengan menekan "Save Template" di bagian atas. Sekarang masuk ke area Layout dan Anda akan melihat tiga area widget tepat di atas sidebar Anda. Anda bisa menambahkan widget dua dari tiga area tersebut.