Cara membuat multi tab di widget dengan mudah - Mungkin bagi anda para blogger sering melihat di blog yang anda kunjungi ada Widget yang mempunyai tiga kolom?,ya itu yang dinamakan Tab Widget yang dimana tab widget ini biasanya memiliki tiga kolom yang di antara nya Populer post,Labels atau juga Comment Post,tetapi penempatan itu semua tergantung kepada pemilik blog nya mau di isi apa saja tab widget tersebut
Namun secara gambaran saya disini seperti itu lah yang di maksud tab widget di blog yang sedang saya bahas disini,tab widget ini sangat keren apabila di pasang di widget anda karena dengan demikian penyimpanan widget di blog tidak kelihatan banyak walaupun pemasangan widget tersebut memiliki lebih dari lima widget
Walaupun cara ini di gunakan oleh para blogger untuk meringkas atau menyembunyikan widget-widget yang mungkin mengganggu atau juga tidak lihat di pandang maka dari itu widget yang di anggap tidak enak di pandang tersebut di simpan di bagian Multi Tab ini,namun dengan adanya widget multi tab ini malah tampilan blog semakin keren apalagi dengan warna dan juga logo nya yang muncul menggunakan font awesome yang semakin lucu
Nah oleh karena itu jika di widget blog anda sama seperti blog ini mempunyai beberapa widget yang ingin di ringkas maka apa salah nya jika anda juga menggunakan widget 3 kolom ini atau widget Multi Tab maka tampilan blog anda akan semakin keren
O ya sebelum anda memasang widget multi tab di widget blog anda pastikan terlebih dahulu di template anda sudah terdapat Font Awesome nya agar logo pada bagian Judul di bagian tab nya muncul karena jika tidak tersedia logo nya tidak akan nampak
atau
<asida id='sidebar-wrapper'>
atau juga sejenis nya
Nah itulah cara membuat Multi tab di widget blogger semoga artikel nya bisa memabntu sobat blogger dan selamat mencoba
adscblog
Namun secara gambaran saya disini seperti itu lah yang di maksud tab widget di blog yang sedang saya bahas disini,tab widget ini sangat keren apabila di pasang di widget anda karena dengan demikian penyimpanan widget di blog tidak kelihatan banyak walaupun pemasangan widget tersebut memiliki lebih dari lima widget
Walaupun cara ini di gunakan oleh para blogger untuk meringkas atau menyembunyikan widget-widget yang mungkin mengganggu atau juga tidak lihat di pandang maka dari itu widget yang di anggap tidak enak di pandang tersebut di simpan di bagian Multi Tab ini,namun dengan adanya widget multi tab ini malah tampilan blog semakin keren apalagi dengan warna dan juga logo nya yang muncul menggunakan font awesome yang semakin lucu
Nah oleh karena itu jika di widget blog anda sama seperti blog ini mempunyai beberapa widget yang ingin di ringkas maka apa salah nya jika anda juga menggunakan widget 3 kolom ini atau widget Multi Tab maka tampilan blog anda akan semakin keren
Cara Memasang Widget Multi Tab di blog
Jika anda tertarik denga widget multi tab yang saya share ini dan anda juga ingin menggunakan nya di blog sobat silahkan sobat blogger ikuti langkah-langkah cara pemasangan Widget multi tab atau widget tiga kolom di bawah iniO ya sebelum anda memasang widget multi tab di widget blog anda pastikan terlebih dahulu di template anda sudah terdapat Font Awesome nya agar logo pada bagian Judul di bagian tab nya muncul karena jika tidak tersedia logo nya tidak akan nampak
Trik memasang widget tiga kolom di blogger
- Silahkan anda masuk ke bagian Dashboard Blogger anda
- Kemudian silahkan klik template > Edit Html
- Setelah itu silahkan cari kode </head> untuk memudahkan anda di dalam mencari kode tersebut,silahkan anda tekan tombol Ctrl+F secara bersamaan,kemudian letakan kode berikut sebelum kode tersebut
<style type='text/css'>
/* Multi Tab Widget Sidebar */
.multitab-section{background:#fff;width:100%}
.multitab-widget{list-style:none;margin:0 0 10px;padding:0}
.multitab-tab{border:0;width:33.3%;text-align:center;width: 100%;}
.multitab-section h2,.multitab-section h3,.multitab-section h4,.multitab-section h5,.multitab-section h6 {display:none;}
.multitab-widget li a{margin:-2px;font-size:12px;font-weight:50;text-transform:uppercase;line-height:40px;width:32.3%;list-style:none;text-align:center;display:inline-block;padding:3px 0;background:#3cc091;color:#fff;cursor:pointer;position:relative;transition:all .3s;overflow: hidden;}
.multitab-widget li a.multitab-widget-current{background: #35a47c;}
.multitab-widget .multitab-tab a:before{font-family:Fontawesome;text-align:center;margin-right:2px;}
.multitab-widget .multitab-tab a:nth-child(1):before {content:'\f09e' important;}
.multitab-widget .multitab-tab a:nth-child(2):before {content:'\f09e' !important;}
.multitab-widget .multitab-tab a:nth-child(3):before {content:'\f0e6' !important;}
</style>
- Setelah itu silahkan anda cari lagi kode seperti berikut
atau
<asida id='sidebar-wrapper'>
atau juga sejenis nya
- Kemudian silahkan anda letakan kode berikut tepat di bawah kode tersebut
<div class='multitab-section'>Hasil nya akan seperti ini
<ul class='multitab-widget multitab-widget-content-tabs-id'>
<li class='multitab-tab'>
<a class='multitab-widget-current' href='#multitab-column-id1' title='Popular'><span>Popular</span></a>
<a href='#multitab-column-id2' title='Labels'><span>Terbaru</span></a>
<a href='#multitab-column-id3' title='Comment'><span>Comment</span></a>
</li>
</ul>
<div class='multitab-widget-content multitab-widget-content-widget-id' id='multitab-column-id1'>
<b:section class='sidebar' id='multitab-sidebar1' preferred='yes'/>
</div>
<div class='multitab-widget-content multitab-widget-content-widget-id' id='multitab-column-id2'>
<b:section class='sidebar' id='multitab-sidebar2' preferred='yes'/>
</div>
<div class='multitab-widget-content multitab-widget-content-widget-id' id='multitab-column-id3'>
<b:section class='sidebar' id='multitab-sidebar3' preferred='yes'/>
</div>
</div>
<div id='sidebar-wrapper'>atau
------kode di atas---------
--------
---------
---------
</div>
<asida id='sidebar-wrapper'>
-------kode di atas-----
---------
--------
---------
</asida>
- Kemudian silahkan anda cari lagi kode </body> dan letakan kode berikut sebelum kode tersebut
<script type='text/javascript'>
//<![CDATA[
// Multi tab widget Sidebar
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>
- Kemudian Save template
Nah itulah cara membuat Multi tab di widget blogger semoga artikel nya bisa memabntu sobat blogger dan selamat mencoba
ads1
Previous
Posting Lebih BaruNext
Posting Lama
Posted by 20 November and have
2
komentar
, Published at
2 komentar
Sesuatu
BalasSahrini....
Balas* Silahkan Berkomentar Tetapi Sopan
* Jangan Meninggalkan Spam atau terkait lain nya
* Jangan Promosi