Widget Multi Tab Sidebar Right Keren

Kembali lagi dengan saya. Perihal saya lagi membuat banyak postingan untuk mengisi sitemap agar berisi agak banyak kali ini saya akan membuat Widget Multi Tab Sidebar right Keren. Widget ini berada di sebelah kanan postingan. Widget Multi Tab ini gunanya untuk menghemat area blog yang biasanya memakanbanyak tempat. Widget Multi Tab Sidebar right Keren akan mempercantik blog sehingga pengunjung merasa senang,nyaman,dan kemungkinan akan absen terus ke blog anda.
Baca Juga :

• Widget Labels (Kategori) Keren dan Bagus 
• Cara Membuat Share Box Responsiv

Screenshot :

Preview GIF :

Cara Membuat Widget Multi Tab Sidebar Right Keren

Cara Pertama :

1. Buka Blogger - Kemudian login.

2. Dashboard - Template.

3. Edit HTML.

Proses Pembuatan :

1. Temukan <CTRL+F> kode ]]></b:skin>

2. Copy&paste kode berikut ini, dan letakkan diatas kode ]]></b:skin>

/*Widget Multi Tab Sidebar right Keren*/
#sidebar-tab h2{display:none;}
#select-tab{margin:0 auto 10px}
#select-tab,#select-tab li{padding:0;margin:0;list-style:none;overflow:hidden}
#select-tab li{float:left;width:33.3%;text-align:center}
#select-tab a{line-height:53px;display:block;background-color:#359BED;color:white;font-size:15px;text-decoration:none}
#select-tab .selected a,#select-tab a:hover{background-color:#0566A9}
#sidebar-main .widget1{background-color:#fff;width:100%;float:left;padding:5px 0}
#sidebar-main{overflow:hidden}

3. Temukan lagi kode <div class='sidebar-inner'> atau <div id='sidebar-wrapper'>
4. Copy & Paste kode berikut ini, dan Letakkan dibawah kode <div class='sidebar-inner'> atau <div id='sidebar-wrapper'>

<!--Widget Multi Tab Sidebar right Keren-->
<div id='sidebar-tab'>
<div id='tab'>
<div class='tab-widget-menu clear'>
<ul id='select-tab'>
<li class='tab1'><a href='#tab1'>Popular Post</a></li>
<li class='tab2'><a href='#tab2'>Kategori</a></li>
<li class='tab3'><a href='#tab3'>Arsip</a></li>
</ul>
</div>
<div id='sidebar-main'>
<div class='widget1' id='tab1'> 
<b:section class='sidebar' id='tab1-popular-posts' showaddelement='yes'>
</b:section>
</div>
<div class='widget1' id='tab2'> 
<b:section class='sidebar' id='tab2-latest-posts' showaddelement='yes'>
</b:section>
</div>
<div class='widget1' id='tab3'> 
<b:section class='sidebar' id='tab3-labels' showaddelement='yes'>
</b:section>
</div>
</div>
</div>
<script type='text/javascript'>
//<![CDATA[
$(function(){$("#select-tab li:first").addClass("selected");$("#sidebar-main > div").hide();$("#sidebar-main > div:first").show();$("#select-tab a").click(function(){$("#select-tab li").removeClass("selected");$(this).parent().addClass("selected");var a=$(this).attr("href");$("#sidebar-main > div:visible").hide();$(a).fadeToggle(1000);return false})});
//]]>
</script>
</div>

<!--Widget Multi Tab Sidebar right Keren Selesai--> 

5. Save Template
6. Buka Tata Letak/Layout.
7. Tambahkan Gadget.

Demikian Tutorial Blogger kali ini, bila terjadi kesalahan, silakan jangan sungkan untuk berkomentar dibawah ini. Terakhir, silakan anda add gadget di tata letak lalu lihat homepage anda. Sekian dari saya, Semoga Bermanfaat! Thanks for Reading & Sharing : Widget Multi Tab Sidebar Right Keren

• Bantu Donasi agar blog ini Update

• Tweet
• Share
• Share
• Share
• Share

Berlangganan via email (gratis):