Sidebar multi tab ini ada dua macam yaitu dengan cara Edit HTML dan tanpa Edit HTML.
Perbedaanya:
- Dengan Edit HTML, widget bawaan blogger seperti popular post, label, archive, follower dll yang asli punya blogger bisa dimasukan kedalam sidebar multi tab ini, karena memanfaatkan fungsi asli penambahan widget yaitu pada layout » tambah gadget.
- Dengan Tanpa Edit HTML, widget bawaan dari blogger seperti yang saya sebutkan diatas tidak bisa dimasukan kedalam sidebar multi tab ini, karena hanya bisa menambahkan widget dari luar blogger seperti Fb-like box, twitter-box dll, sehingga membuat loading agak lama.
Berikut cara pemasangannya:
1. Login akun blogger adan masing-masing
2. Letakkan kode berikut ini dibawah kode ]]></b:skin>
<style>
#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:32px;display:block;background-color:#666;color:white;font-weight:bold;text-decoration:none}
#select-tab .selected a,#select-tab a:hover{background-color:#860000}
#sidebar-main .widget1{background-color:#f7f7f7;width:100%;float:left;padding:5px}
#sidebar-main{overflow:hidden}
</style>
3. Kemudian letakkan kode berikut ini dibawah kode <aside id='sidebar-wrapper'> atau <div id='sidebar-wrapper'>
<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'>Comments</a></li>
<li class='tab3'><a href='#tab3'>Archive</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-comments-posts' showaddelement='yes'>
</b:section>
</div>
<div class='widget1' id='tab3'>
<b:section class='sidebar' id='tab4-srchive' 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>
#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:32px;display:block;background-color:#666;color:white;font-weight:bold;text-decoration:none}
#select-tab .selected a,#select-tab a:hover{background-color:#860000}
#sidebar-main .widget1{background-color:#f7f7f7;width:100%;float:left;padding:5px}
#sidebar-main{overflow:hidden}
</style>
3. Kemudian letakkan kode berikut ini dibawah kode <aside id='sidebar-wrapper'> atau <div id='sidebar-wrapper'>
<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'>Comments</a></li>
<li class='tab3'><a href='#tab3'>Archive</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-comments-posts' showaddelement='yes'>
</b:section>
</div>
<div class='widget1' id='tab3'>
<b:section class='sidebar' id='tab4-srchive' 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>
4. Silahkan anda sesuaikan sendiri, anda bisa mengganti tulisan Popular Post, Comment dan Archive sesuai dengan widget yang ingin anda tambahkan nanti.
5. Simpan Template
- Untuk menambahkan widget kedalamnya caranya seperti biasa, anda tinggal masuk pada menu Tata Letak »Tambah Gadget
0 komentar:
Posting Komentar