Trik Blogger | Membuat Tab View

Mungkin kamu telah banyak membaca postingan trik blogger seperti ini, tapi tidak ada salahnya kita bersama-sama mereview kembali. OB tidak mengatakan trik blogger membuat tab view dalam postingan ini berbeda dengan lainnya. Mungkin sama, namun berbeda dari segi aplikasinya dalam blog. Trik ini OB dapatkan setelah beberapa kali mencoba memasang tab view dari beberapa blog narasumber namun ngga kelar-kelar (maklum otak lagi bebal), sampai OB mendapatkan sebuah situs Javascript Kit. Kemudian olah sana dan sini, alhamdulillah akhirnya tab view telah rampung OB pajang di Optimasi Blog.

Sekarang kita mulai trik blogger membuat tab view dalam blog :

• Login dulu ke account blogger kamu
• Pilih tab Tata Letak --> Edit HTML.

Tips : Sebelum melakukan edit template, sebaiknya simpan dulu template kamu yang ada dengan meng-klik tulisan Download Template Lengkap. Kemudian simpan dalam harddisk atau media penyimpanan lainnya, sehingga jika terjadi hal-hal yang tidak diinginkan kamu sudah memiliki back-up untuk mengembalikannya 
seperti semula.

• Copy kode berikut dan pastekan di atas kode ]]>skin

Tips : Kalau susah mencarinya, coba tekan tombol F3 di keyboard. Maka akan muncul menu toolbar pencarian di bawah browser (Firefox), sehingga kamu tinggal memasukkan kata yang ingin dicari.


div.TabView div.Tabs { width: 350px; height: 24px; overflow: hidden; } div.TabView div.Tabs a { float: left; display: block; width: 90px; text-align: center; height: 24px margin-left:3px; padding-top: 3px; vertical-align: middle; -moz-border-radius-topleft:5px; -moz-border-radius-topright:5px; -webkit-border-radius-topleft:5px; -webkit-border-radius-topright:5px; -khtml-border-radius-topleft:5px; -khtml-border-radius-topright:5px; border-top-left-radius:5px; border-top-right-radius:5px; border: 1px solid #666666; border-bottom-width: 0; text-decoration: none; font: 12px "Arial", Times New Roman, Serif; color: #000; font-weight: 900; } div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active { background-color: #DDDDDD; } div.TabView div.Pages { width: 350px; height: 250px; clear: both; background-color: #FFFFFF; -moz-border-radius:5px; -webkit-border-radius:5px; -khtml-border-radius:5px; border-radius:5px; border: 1px solid #666666; overflow: hidden; } div.TabView div.Pages div.Page { height: 100%; padding: 0; overflow: hidden; } div.TabView div.Pages div.Page div.Pad { padding: 3px 5px; }


>>Copy kembali kode berikut di atas kode 


<script type='text/javascript'> function tabview_aux(TabViewId, id) { var TabView = document.getElementById(TabViewId); // ----- Tabs ----- var Tabs = TabView.firstChild; while (Tabs.className != "Tabs" ) Tabs = Tabs.nextSibling; var Tab = Tabs.firstChild; var i = 0; do { if (Tab.tagName == "A") { i++; Tab.href = "javascript:tabview_switch('"+TabViewId+"', "+i+");"; Tab.className = (i == id) ? "Active" : ""; Tab.blur(); } } while (Tab = Tab.nextSibling); // ----- Pages ----- var Pages = TabView.firstChild; while (Pages.className != 'Pages') Pages = Pages.nextSibling; var Page = Pages.firstChild; var i = 0; do { if (Page.className == 'Page') { i++; if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+"px"; Page.style.overflow = "auto"; Page.style.display = (i == id) ? 'block' : 'none'; } } while (Page = Page.nextSibling); } // ----- Functions ------------------------------------------------------------- function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); } function tabview_initialize(TabViewId) { tabview_aux(TabViewId, 1); } </script>

• Simpan template kamu.
• Kemudian pilih tab Elemen Halaman --> Tambah Gadget.
• Jendela Tambahkan Gadget akan muncul --> HTML/JavaScript.
• Copy dan paste kode di bawah ini.

form action="tabview.html" method="get"> <div class="TabView" id="TabView"> <div class="Tabs"> <a>Tab 1</a> <a>Tab 2</a> <a>Tab 3</a> </div> <div class="Pages"> <div class="Page"> <div class="Pad"> <ul> <li>View 1.1</li> <li>View 1.2</li> <li>View 1.3</li> </ul> </div> </div> <div class="Page"> <div class="Pad"> Kamu bisa memasukkan script<br /> Kamu bisa memasukkan image<br /> Kamu bisa memasukkan numbered list/bullent list/<br /> Apalagi memasukkan teks atau link jelas bisa/<br /> </div> </div> <div class="Page"> <div class="Pad"> View 3.1<br /> View 3.2<br /> View 3.3<br /> </div> </div> </div> </div> </form> <script type="text/javascript"> tabview_initialize('TabView'); </script>

>> Sekarang lihat tab view dalam blog kamu

Share on Google Plus

About mamen