Cara Menciptakan Tabbed Widget Sidebar Dengan Jquery

Cara menciptakan Tabbed Widget Sidebar dengan jQuery. Apakah Ada pernah atau sering melihat blog yang mempunyai tab area widget di sidebar terdiri dari popolar, yang mempunyai fitur psoting satu klik?

Hal ini lebih dikenal dengan sebutan sebagai jQuery Tabbed widget, yang memungkinkan Anda untuk menyimpan banyak ruang di sidebar, yang menggabungka 3 widget yang berbeda menajdi satu widget.

Banyak situs popular yang menggunakan teknik ini untuk menampilkan widget dalam ruang yang kurang. Dengan menggunakan tabbed widget blog kita akan terlihat lebih profesional.

Lantas Bagaimana Cara menambahkan jQuery Tabbed Widget Sidebar di Blogger.

Login Ke Blogger
Pilih Templates
Cari Kode ]]> </ b: skin>
Copy Kode dibawah ini tepas diatas ]]> </ 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;
Cara Memperbaiki Kesalahan Xml Parsing Di Template
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;
Menambahkan Musik Player Html 5 Dengan Playlist Di Blog
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 {
Cara Menciptakan Tabbed Widget Sidebar Dengan Jquery
background: #f34246;
}

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

#Copy arahan berikut ini dibawahnya

<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>

<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>


Membuat Form Kontak (Halaman Statis) Blog
<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'>

<b:section class='sidebar' id='sidebartab3' preferred='yes'>
</b:section>
</div>
</div>

6. Save.

#Hasilnya akan Seperti Gambar dibawah ini...

Semoga membantu, Anda sanggup memberi nama widget tersebut dengan contohnya popolar post, atau Terbaru, Tags.. sesuai dengan harapan Anda. Anda sanggup melihat demonya disini

Sumber http://contohblogspotnih.blogspot.com/

6. Save.

#Hasilnya akan Seperti Gambar dibawah ini...

Semoga membantu, Anda sanggup memberi nama widget tersebut dengan contohnya popolar post, atau Terbaru, Tags.. sesuai dengan harapan Anda. Anda sanggup melihat demonya disini

Sumber http://contohblogspotnih.blogspot.com/

Cara Menciptakan Goresan Pena Arab Bismilah Dan Alhamdulilah Di BlogCara menambahkan basmalah (tulisan arab) dan alhamdulilah diawal dan diakhir artikel blog. Kita sebagai umat islam niscaya sudah mengenal ba ...
Menampilkan Rating Bintang Dipencarian GoogleAnda pernah melihat Rating Bintang warna ke kuning-kuningan yang muncul ketika kita memasukan kata kunci di google? Hasil Googling dengan kita mencip ...
Cara Menciptakan Social Profile Widget Keren: Metro UiCara menciptakan Social Profile Widget Keren: Metro UI , widget ini sangat menarik dengan beberapa warna yang keren , dan aneka macam mempunyai beber ...
Cara Mengubah Warna Background Di Blogger Secara OtomatisCara Otomatis Mengubah Background Warna di Blogger , Pasti pengunjung blog kita akan heran jikalau blog kita setiap kali dikunjunginya akan otomatis ...
Menghilangkan Navbar Di Blogger Dengan MudahMenghilangkan Navbar di Blogger dengan Mudah, disini aku memiliki beberapa cara untuk menghilangkan atau menyeembuyikan dari halama atau dengan cara ...
Menambahkan Jquery Di Blogger Dan BlogspotMenambahkan JQuery di Blogger dan Blogspot. JQuery sangat penting Java untuk menciptakan efek, animasi dan fungsi keren diblog Anda, banyak pluin blo ...

Cara Menciptakan Tabbed Widget Sidebar Dengan Jquery

Related Posts