Cara Memuat Widget Multi Tab 3 Kolom Pada Blog
Cara Memuat Widget Multi Tab 3 Kolom Pada Blog-pasti kamu ingin memasang widget tetapi ingin meringakasnya agar bisa memuat widget lain dan agar kamu bisa menghemat ruangan sidebar anda tanpa harus panjang kebawah memakan ruangan di template anda.Oke dalam kesempatan kali ini saya akan memberikan cara bagaimana membuat 3 kolom widget agar lebih keren.. contohnya seperti dibawah ini :
1. Login Blogger.
2. Buka Menu Template.
3. Pilih Edit HTML
4. Cari Kode ]]></b:skin>
5. Apabila ketemu tempelkan kode dibawah ini tepat diatas kode ]]></b:skin>
/* Multi Tab Widget */ .multitab-section{background:#fff;text-transform:uppercase;width:100%} .multitab-widget{list-style:none;margin:0 0 10px;padding:0} .multitab-widget li{list-style:none;padding:0;margin:0;float:left} .multitab-widget li a{background:#22a1c4;color:#fff;display:block;padding:15px;font-size:13px;text-decoration:none} .multitab-tab{border:0;width:33.3%;text-align:center} .multitab-section h2,.multitab-section h3,.multitab-section h4,.multitab-section h5,.multitab-section h6 {display:none;} .multitab-widget li a.multitab-widget-current{padding-bottom:20px;margin-top:-10px;background:#fff;color:#444;text-decoration:none;border-top:5px solid #22a1c4;font-size:14px;text-transform:capitalize}
6. Setelah itu cari kode </body>7. Apabila sudah ketemu tempelkan kode dibawah ini tepat diatas kode </body>
<script type='text/javascript'> //<![CDATA[ // Multi tab widget jQuery(document).ready(function($){ $(".multitab-widget-content-widget-id").hide(); $("ul.multitab-widget-content-tabs-id li:first a").addClass("multitab-widget-current").show(); $(".multitab-widget-content-widget-id:first").show(); $("ul.multitab-widget-content-tabs-id li a").click(function() { $("ul.multitab-widget-content-tabs-id li a").removeClass("multitab-widget-current a"); $(this).addClass("multitab-widget-current"); $(".multitab-widget-content-widget-id").hide(); var activeTab = $(this).attr("href"); $(activeTab).fadeIn(); return false; }); }); //]]> </script>
8. Lalu Tempelkan kode dibawah ini tepat dibawah <div id='sidebar-wrapper'><div class='multitab-section'> <ul class='multitab-widget multitab-widget-content-tabs-id'> <li class='multitab-tab'><a href='#multicolumn-widget-id1'>RECENT</a></li> <li class='multitab-tab'><a href='#multicolumn-widget-id2'>POPULAR</a></li> <li class='multitab-tab'><a href='#multicolumn-widget-id3'>ARSIP</a></li> </ul> <div class='multitab-widget-content multitab-widget-content-widget-id' id='multicolumn-widget-id1'> <b:section class='sidebar' id='sidebartab1' preferred='yes'/> </div> <div class='multitab-widget-content multitab-widget-content-widget-id' id='multicolumn-widget-id2'> <b:section class='sidebar' id='sidebartab2' preferred='yes'/> </div> <div class='multitab-widget-content multitab-widget-content-widget-id' id='multicolumn-widget-id3'> <b:section class='sidebar' id='sidebartab3' preferred='yes'/> </div> </div>
CATT : Ganti Tulisan dikotak atas yang berwarna Merah,Kuning, Hijau dengan Judul Widget kamu.9. Simpan Template atau Pratinjau terlebih dahulu.
Mudahkan.SIlahkan Kunjungi Postingan yang lain di Widget Blogging
SEMOGA ARTIKEL INI BERMANFAAT.TERIMA KASIH
0 Response to "Cara Memuat Widget Multi Tab 3 Kolom Pada Blog"
Posting Komentar