Cara Menambahkan Tabbed jQuery Blogspot

info-gamepc.blogspot.com - Apakah Anda pernah melihat blog-blog yang memiliki tab-tab disidebar yang terdiri dari populer, Terbaru, Komentar. Tab ini lebih dikenal sebagai jQuery Tabbed widget, yang memungkinkan Anda untuk menyimpan banyak ruang di sidebar, Membuat tampilan yang ramah bagi pengunjung Blog Anda dengan menggabungkan 3 widget yang berbeda menjadi satu. Pada artikel ini, saya akan menunjukkan kepada Anda bagaimana menambahkan jQuery Tabbed Sidebar Widget di Blogger.

Apa yang dimaksud dengan Widget jQuery Tabbed?

Anda melihat banyak situs yang memiliki widget tab dibagian paling atas sidebar yang membuat tiga widget hanya din satu tempat yang memberikan kemampuan untuk memilih salah satu di antara tab-tab tersebut. Hal ini tidak hanya memungkinkan Anda untuk menyimpan sedikit ruang di sidebar, tetapi juga membuat desain blog Anda rapi dan profesional.

Banyak situs ternama menggunakan teknik ini untuk menampilkan widget dalam ruang yang terbatas. Pada artikel ini, saya akan menunjukkan kepada Anda bagaimana menambahkan jQuery tab sidebar widget di blogger dan akan memandu Anda langkah demi langkah secara detail.

Membuat jQuery Tabbed Widget di Blogger:

Hal pertama yang perlu Anda lakukan adalah pergi ke Blogger >> Template >> Edit HTML dan paste CSS coding berikut tepat di atas ]]></b:skin>.

/* 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 susunan koding template blogger Anda, tapi saya akan berbagi cara yang lebih sering digunakan dalam template. Anda harus melihat kekode Sidebar widget Anda, Carilah <div id='sidebar-wrapper'> dan pastekan kode dibawah ini tepat diatas kode atas.

<!-- 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 dilakukan, simpanlah template dengan menekan "Save Template" di bagian atas. Lalu kita menuju Layout, lihat sudah adah tiga Widget.

Saya berharap, tutorial ini bisa sedikit membantu Anda yang mungkin kesulitan menambahkan jquery tab widget sidebar di blogger. Dengan CSS, Anda dapat menyesuuaikan widget tab sesuai dengan tampilan blog Anda. Terimakasih...