Cara Memasang Multi Tab Widget Di Sidebar
Cara Memasang Multi Tab Widget di Sidebar - Pada Tuturial kali ini Saya akan menyebarkan sebuah multi tab widget yang nantinya akan menyimpan widget di sidebar blog dengan efek jQuery yang ringan dan SEO Friendly.
Multi tab dengan jQuery ini berfungsi untuk menyimpan widget yang biasa Anda simpan di sidebar blog pada tata letak. Ada beberapa alasan kenapa Anda ingin memasang multi tab ini, salah satunya yakni ingin menciptakan widget lebih rapi dan menghemat ruang di blog khususnya pada bab sidebar. Oke eksklusif saja, berikut cara penerapannya :
1. Login ke Blogger > Klik Template > Edit HTML > Tambahkan instruksi di bawah ini sempurna di atas instruksi ]]></b:skin> atau </style>
2. Kemudian tambahkan instruksi berikut sempurna di bawah instruksi <aside id='sidebar-wrapper'> atau <div id='sidebar-wrapper'> (Jika tidak ada, cari bab sidebar sesuai template Anda)
3. Selanjutnya tambahkan instruksi di bawah ini sempurna di atas instruksi </body>
4. Terakhir simpan template dan lihat hasilnya.
Kini di blog Anda sudah terpasang multi tab widget, untuk melihatnya silakan cek di dasbor blogger > Tata letak > Di situ sudah terdapat kolom untuk menambah widget.
Demikian tutorial perihal Cara Memasang Multi Tab Widget di Sidebar, biar bermanfaat.
Multi tab dengan jQuery ini berfungsi untuk menyimpan widget yang biasa Anda simpan di sidebar blog pada tata letak. Ada beberapa alasan kenapa Anda ingin memasang multi tab ini, salah satunya yakni ingin menciptakan widget lebih rapi dan menghemat ruang di blog khususnya pada bab sidebar. Oke eksklusif saja, berikut cara penerapannya :
Cara Memasang Multi Tab Widget di Sidebar
1. Login ke Blogger > Klik Template > Edit HTML > Tambahkan instruksi di bawah ini sempurna di atas instruksi ]]></b:skin> atau </style>
/* Multi Tab Sidebar */ #sidebar-tab h2{display:none}#select-ted{margin:0 auto 10px}#select-ted,#select-ted li{padding:0;margin:0;list-style:none;overflow:hidden}#select-ted li{float:left;width:33.3%;text-align:center}#select-ted a{line-height:42px;display:block;background-color:#333;color:#fff;font-weight:bold;text-decoration:none}#select-ted .selectab a,#select-ted a:hover{background-color:#f44243}#sidebar-main .widget1{background-color:#fafafa;width:100%;float:left;padding:5px 0}#sidebar-main{overflow:hidden}
2. Kemudian tambahkan instruksi berikut sempurna di bawah instruksi <aside id='sidebar-wrapper'> atau <div id='sidebar-wrapper'> (Jika tidak ada, cari bab sidebar sesuai template Anda)
<div id='sidebar-tab'> <div id='tab'> <div class='tab-widget-menu clear'> <ul id='select-ted'> <li class='tabs1'><a href='#tab1'>Popular</a></li> <li class='tabs2'><a href='#tab2'>Comments</a></li> <li class='tabs3'><a href='#tab3'>Archive</a></li> </ul> </div> <div id='sidebar-main'> <div class='widget1' id='tabs1'> <b:section class='sidebar' id='tab1-popular-posts' showaddelement='yes'/> </div> <div class='widget1' id='tabs2'> <b:section class='sidebar' id='tab2-comments-posts' showaddelement='yes'/> </div> <div class='widget1' id='tabs3'> <b:section class='sidebar' id='tab4-srchive' showaddelement='yes'/> </div> </div> </div> </div>
3. Selanjutnya tambahkan instruksi di bawah ini sempurna di atas instruksi </body>
<script type='text/javascript'> //<![CDATA[ $(function(){$("#select-ted li:first").addClass("selectab"),$("#sidebar-main > div").hide(),$("#sidebar-main > div:first").show(),$("#select-ted a").click(function(){$("#select-ted li").removeClass("selectab"),$(this).parent().addClass("selectab");var e=$(this).attr("href");return $("#sidebar-main > div:visible").hide(),$(e).fadeToggle(1e3),!1})}); //]]> </script>
4. Terakhir simpan template dan lihat hasilnya.
Kini di blog Anda sudah terpasang multi tab widget, untuk melihatnya silakan cek di dasbor blogger > Tata letak > Di situ sudah terdapat kolom untuk menambah widget.
Demikian tutorial perihal Cara Memasang Multi Tab Widget di Sidebar, biar bermanfaat.
0 Response to "Cara Memasang Multi Tab Widget Di Sidebar"
Post a Comment