Sunday, June 9, 2019

Cara Pasang Multi Tab Widgets Popular Post Recent Post dan Label di Blog Blogger

Sunday, June 9, 2019

Cara Pasang Multi Tab Widgets Popular Post Recent Post dan Label di Blog Blogger

Untuk memasang widgets diblog itu sangat mudah bagi yang sudah lama mengelola blog namun pada kesempatan kali ini akan membagikan cara memasang widgets multi tab popular post,recent post dan label ke pada blogger pemula dimana fungsi dari widgets ini sama pada widgets yang standar cuman ini ada perbedaan dari tampilan nya saja.

Jadi mari disimak cara mudah pemasangan widgets multi tab di sidebar blog blogger dengan tampilan lebih dari satu dalam satu tab menu dengan tiga fungsi widget yang berbeda berikut di bawah ini;

Langkah 1. Masuk ke Dasbor Blogger
Langkah 2. Pilih Tema >Edit HTML
Langkah 3. Copy Kode CSS di bawah ini dan letakan di atas kode ]]></b:skin>

#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:#48d} #sidebar-main .widget1{background-color:#fff;width:100%;float:left;padding:5px 0} #sidebar-main{overflow:hidden}
Langkah 4. Masukan kode HTML di bawah ini di bawah kode berikut : <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 Posts</a></li> <li class='tab2'><a href='#tab2'>Latest Posts</a></li> <li class='tab3'><a href='#tab3'>Labels</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>

Selanjutnya Simpan Tema

Kemudian buka Tata Letak > maka akan muncul 3 tab dan Masukan tab yang pertama add widget > Popular post tab 2 add recent post dan yang ke 3 add labels Nah. Selesai

Selamat mencoba dan semoga bermanfaat, trimakasih.

Show comments
Hide comments