Cara Membuat Multi Tab Widget Blogger

Bagikan :

Facebook

Tweet

Linkedin

Pinterest

Multi Tab Widget Blogger adalah penggabungan tab. Tab multi widget ini sangat berguna bagi sobat yang banyak mempunyai banyak widget. Fungsi utama dati tab widget ini untuk menghemat area blog yang biasanya menghabiskan banyak area untuk satu widget. Tab widget multi akan mempercantik tampilan blog sehingga para pengunjung senang dan merasa nyaman.

Cara Membuat Multi Tab Widget Blogger sebagai berikut:
1. Sobat masuk ke akun blogger
2. Buka Template > Edit HTML
3. Gunakan Ctrl+F dan masukan </head>. Copy code di bawah dan pastekan tepat di atas kode </head>.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/> , di atas kode </head>.

4. Klik Simpan Template
5. Selanjutnya masuk ke bagian TATA LETAK / LAYOUT
6. Klik tambah gadget di posisi yang diinginkan.
7. Pilih HTML/javascript.
8. Copy code di bawah dan masukan ke HTML/javascrip tadi.

<style type="text/css">
        .blogtabs {padding: 12px !important;border: 0 solid #bbb;}
        .blogtabs h2 {float: left;margin: 0 2px 4px 0;font-size: 10px;

padding: 3px 5px;border: 1px solid #bbb;overflow: hidden;position: 

relative;background: #fff;cursor:pointer;}
        html .blogtabs h2.active {background: #DCDCDC;}
        .blogtabs .widget-content {border: 1px solid #bbb;

padding: 10px;background: #fff;clear:both;margin:0;}
        .btab, #showtabs {display:none;}
        </style>

        <script type="text/javascript" src="http://ajax.googleapis.com/

ajax/libs/jquery/1.6.0/jquery.min.js"></script>

        <script type="text/javascript" 

src="http://ayriyzone.googlecode.com/files/SimpleTabViewJQuery.js">

</script>

        <script type="text/javascript">

        $(document).ready(function() {
        $('#showtabs').simpleBlogTab ({organictabs: 3});
        });
        </script>

        <div id="showtabs"></div>

9. Klik Simpan.
10. Letakan widget - widget yang akan digabungkan tepat di bawah widget yang baru sobat buat. 

 Lihat hasilnya dan selamat mencoba 

Apabila cara yang di atas tidak berhasil silakan gunakan cara Membuat Widget Multi Tab Tiga Kolom di Sidebar sebagai berikut :

1. Login ke akun Blogger.com

2. Pilih Menu Template > Klik Edit Html

3. Selanjutnya silahkan anda letakan kode di bawah ini tepat di atas kode ]]></b:skin>

/*----- Multi Tab Widget Sidebar Ekamdt ----*/
.tabs-widget{list-style:none;list-style-type:none;margin:0 0 10px 0;padding:0;height:40px}
.tabs-widget li{list-style:none;list-style-type:none;margin:0 0 0 4px;padding:0;float:left}
.tabs-widget li:first-child{margin:0}
.tabs-widget li a{color:#8F8C7C;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnjLK-yjxNhKr2JrQK_B51DJJ3TU7WVaWtmA7tngdkZkhr_cB2g_80Dm8YhDL8aptz8oDeWKTYFBLsk3RwlDy4JoLcWFbzijGqGgWopiggLCji89iRSgbq_ku4xQQvIJea897v-AkhS9Y/s1600/tabs-widget-bg.png) left top repeat-x;padding:12px 27px;display:block;text-decoration:none;font:bold 11px Arial,Helvetica,Sans-serif;text-transform:uppercase}
.tabs-widget li a:hover,.tabs-widget li a.tabs-widget-current{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnjLK-yjxNhKr2JrQK_B51DJJ3TU7WVaWtmA7tngdkZkhr_cB2g_80Dm8YhDL8aptz8oDeWKTYFBLsk3RwlDy4JoLcWFbzijGqGgWopiggLCji89iRSgbq_ku4xQQvIJea897v-AkhS9Y/s1600/tabs-widget-bg.png) left -140px repeat-x;color:#EE5D06;text-decoration:none}
.tabs-widget-content{}
.tabviewsection{margin-top:10px;margin-bottom:10px;}

4. Setelah itu silahkan anda letakan kode di bawah ini tepat di bawah kode  <div class='column-right-inner'> Kalo tidak ketemu bisa di bawah kode <div id='sidebar-wrapper'> atau <aside id='sdv-right'> atau <aside id='sidebar-right'>

<div class='tabviewsection'>
<script type='text/javascript'>
jQuery(document).ready(function($){
$(&quot;.tabs-widget-content-widget-themater_tabs-1432447472-id&quot;).hide();
$(&quot;ul.tabs-widget-widget-themater_tabs-1432447472-id li:first a&quot;).addClass(&quot;tabs-widget-current&quot;).show();
$(&quot;.tabs-widget-content-widget-themater_tabs-1432447472-id:first&quot;).show();

$(&quot;ul.tabs-widget-widget-themater_tabs-1432447472-id li a&quot;).click(function() {
$(&quot;ul.tabs-widget-widget-themater_tabs-1432447472-id li a&quot;).removeClass(&quot;tabs-widget-current a&quot;);
$(this).addClass(&quot;tabs-widget-current&quot;);
$(&quot;.tabs-widget-content-widget-themater_tabs-1432447472-id&quot;).hide();
var activeTab = $(this).attr(&quot;href&quot;);
$(activeTab).fadeIn();
return false;
});
});
</script>
<ul class='tabs-widget tabs-widget-widget-themater_tabs-1432447472-id'>
<li><a href='#widget-themater_tabs-1432447472-id1'>Populer</a></li>
<li><a href='#widget-themater_tabs-1432447472-id2'>Label</a></li>
<li><a href='#widget-themater_tabs-1432447472-id3'>Arsip</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>

<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>
<div style='height:5px;clear:both;'/>

5. Jangan lupa klik Simpan, dan coba tambahkan widget di sidebar dan lihat hasilnya.

Nah untuk kali ini sampai disini dulu tentang Cara Membuat Multi Tab Widget Blogger, semoga bermanfaat. Apabila ada kendala mari kita diskusikan di kolom komentar, Trimakasih "-"...

Tag : Blog