T11/18/2016

Membuat MultiTab Responsive Ala VizerWeb

Sekian lama tidak mempostingkan dikarenakan banyak kesibukan di dunia luar.

Ini hasil karya widget pertama kali dari saya yaitu Multitab widget. Sesuai namanya kita bisa membuat widget tanpa harus memperbanyak widget sidebar. Kita bisa sisipkan kode widget tersebut ke Multitab Widget.

Ini di pakai oleh Blog saya yang bernama VizerWeb, jika ingin melihat Demonya silahkan kunjungi

Multitab widget ini sangatlah responsive dan sangat minimalis sekali. Tanpa ada js ( JavaScript) hanya ada html dan CSS saja.
Tidak memberatkan page halaman.

Tetapi biasanya Multitab widget di taruh di html blog. Tetapi ini sangat berbeda. Cukup tempelkan Kode Widget/HTML atau lainnya kedalam kode Multitab Widget Yang sudah saya kasih tau "Kode Widget 1/2/3"

Cara Pemasangnnya
1. Masuk ke Blog Sobat.
2. Masuk ke menu Tata Letak di area sidebar silahkan klik tambahkan, Pilih Kode HTML
3. Copy Kode ini dan pastekan ke tata letak
<style type="text/css">div.TabTampil div.TTs{overflow: hidden;width: 300px;height: 50px;position: absolute;left: 50%;top: 50%;margin-left:-140px;margin-top:-150px;}
div.TabTampil div.TTs a:hover, div.TabTampil div.TTs a.Active{ margin: 0 0 1px 0;     font-size: 14px;     height: 20px     padding: 5px 5px;     border: 1px solid #11e4fc;     margin-bottom: 5px;     overflow: hidden;     position: relative;     background: #11e4fc;     cursor:pointer;     -moz-border-radius:5px 5px 0 0;     border-radius:5px 5px 0 0;}div.TabTampil div.Halamans{ clear: both; border: 5px solid #fff; overflow: hidden; background-color: #ffffff;}div.TabTampil div.Halamans div.Halaman{ height: 50%; padding: 15px; overflow: hidden; }div.TabTampil div.Halamans div.Halaman div.Alas{ padding: 0px; margin: 0px auto;}div.TabTampil div.TTs a{ border-center:1px solid #eee; border-right:1px solid #eee; border-top:1px solid #eee; border-bottom:0px solid #eee; float: left;display: block; width: 90px; text-align: center; vertical-align: middle; height: 24px; padding-top: 3px; text-decoration: none; font-family: "Arial", Serif;font-size: 11px; font-weight: 900; color: #000000}</style><form action="tabtampil.html" method="get"><div id="TabTampil" class="TabTampil"><div style="width: center;" class="TTs"> <a>Statistik</a> <a>Fanspage</a> <a>Tab 3</a></div><div style="width: center; height: 300px;margin-left:-10px;margin-top:-30px; " class="Halamans"><div class="Halaman"><div class="Alas"><br/>
Kode Widget 1
</div></div><div class="Halaman"><div class="Alas"><br/>
Kode Widget 2
</div></div><div class="Halaman"><div class="Alas"><br/>
Kode Widget 3
</div></div></div></div></form><script type="text/javascript">tabtampil_inisial('TabTampil');</script>

4. Setelah di masukan ke widget sidebar, silahkan masukan html/css kedalam Kode Widget 1/2/3 yang saya kasih teks tebal
5. Save

Jika ada masalah dengan kode Multitab widget nya silahkan berkomentar.
Jika ada pertanyaan silahkan bertanya.

Show/Hide Comment

Muat Lebih Banyak
About Author

Menjadi Seorang Blogger Yang Berguna Untuk Orang Lain Dan Tetap Berbagi Ilmu Walau Hanya Sepotong Kata
Follow Me :
Related Article