Tab view sendiri merupakan salah satu trik untuk menghemat penggunaan tempat di sidebar blog anda agar tidak terlalu penuh dengan gadget sehingga blog anda lebih rapi dan loadingnya lebih cepat. Mungkin anda masih bingung tab view itu seperti apa, contohnya bisa anda liat di sidebar saya yang bertuliskan MENU. Kerjanya mirip dengan tab view pada office 2007.
Berikut cara singkatnya :
- Upload dulu template anda, dan simpan untuk menghindari kejadian yang tidak diinginkan ^^
- Buka design >>> edit HTML
- Centang “expand widget template”
- Cari (ctrl+f) kode ]]></b:skin>
| div.TabView div.Tabs { height: 24px; overflow: hidden; } div.TabView div.Tabs a { float: left; display: block; width: 84px; /* Lebar Menu Utama Atas */ text-align: center; height: 24px; /* Tinggi Menu Utama Atas */ padding-top: 3px; vertical-align: middle; border: 1px solid #999999; /* Warna border Menu Atas */ border-bottom-width: 0; text-decoration: none; font-family: "Times New Roman", Serif; /* Font Menu Utama Atas */ font-weight: 900; color: #1E62B6; /* Warna Font Menu Utama Atas */ } div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active { background-color: #FFFFFF; /* Warna background Menu Utama Atas */ } div.TabView div.Pages { clear: both; border: 1px solid #999999; /* Warna border Kotak Utama */ overflow: hidden; background-color: #FFFFFF; /* Warna background Kotak Utama */ } div.TabView div.Pages div.Page { height: 100%; padding: 0px; overflow: hidden; } div.TabView div.Pages div.Page div.Pad { padding: 3px 5px; } |
- Lihat text yang berwarna, itu untuk pengaturannya. Bisa anda rubah sesuka hati
- Cari (ctrl+f) kode <head/>
- Copy (ctrl+c) kode berikut ini, lalu pasang diatas<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> |
- Kemudian klik “save”
- Lalu masuk ke “page elements”
- Klik add a gadget >>> pilih “HTML/java script”- Masukkan atau paste-kan (ctrl+v) kode dibawah ini kedalamnya
| <form action="tabview.html" method="get"> <div class="TabView" id="TabView"> <div class="Tabs" style="width: 260px;"> <a>Tab 1</a> <a>Tab 2</a> <a>Tab 3</a> </div> <div class="Pages" style="width: 256px; height: 270px;"> <div class="Page"> <div class="Pad"> Tab 1.1 <br /> Tab 1.2 <br /> Tab 1.3 <br /> </div> </div> <div class="Page"> <div class="Pad"> Tab 2.1 <br /> Tab 2.2 <br /> Tab 2.3 <br /> </div> </div> <div class="Page"> <div class="Pad"> Tab 3.1 <br /> Tab 3.2 <br /> Tab 3.3 <br /> </div> </div> </div> </div> </form> <script type="text/javascript"> tabview_initialize('TabView'); </script><noscript><a href="http://www.centro.web.id" title="Centro Indonesia"><strong>software, tips blog, ebook, bisnis online </strong></a></noscript> |
- Done
Tambahan :
- Tulisan warna hijau, untuk “judul tab” misal Artikel (pada tab 1). Komentar (pada tab 2) dst
- Tulisan warna kuning, untuk memasukkan isi tab. Bila antar isi dalam satu tab (misal isi dalam tab 1) ingin tidak tampak terpisah-pisah maka hapus kode
Saran :
- Sebaiknya saat memasukkan kode-kode dalam template anda, gunakan NOTEPAD ++ agar mengurangi kesalahan dan kegagalan saat mengedit.
tips
- Cara ECHO 17 Membuat Tabel pada Postingan
- Menampilkan Rich Snippet Rating Bintang 5
- Cara Cepat Update PageRank Google
- Cara ECHO 17 Buat Pop-up Iklan di Blog
- Cara Menaikan Pagerank Ala ECHO 17
- Cara ECHO 17 Membuat Banner Animasi
- Daftar Kode Warna HTML Untuk Blog VERSI ECHO 17
- Cara ECHO 17 Membuat Headline News di Blog
- Cara ECHO 17 MENGOptimasi SEO Image Blog
- Widget Recent Comment dengan Sistem Notifikasi
- Menghilangkan Komentar Admin Pada Recent Comments
- Pasang Widget Social Bookmark di Blog
- Cara cek seo blog agar mengetahui kekuatan seo blog
- Cara ECHO 17 Bikin Widget label Cloud Unik Dan Elegant
- Cara ECHO 17 Terindex di program SEO
- Memasang Widget IP Address Pengunjung
- Cara Meningkatkan Penghasilan PPC (Pay Per Click)
- Cara Cepat Menaikkan PagerRank Secara Otomatis
- Cara Membuat Sitelink di Google
- Cara Setting Robot.txt Khusus Pada Blog
- Cara Setting Tag header robot khusus Pada Blog
- Tips Menghindari Konflik Javascript Pada Template
- Memunculkan Deskripsi Blog Ketika Share di Facebook
- Optimasi Penulisan Artikel Agar Terindeks Akurat di Search Engine
- Memasang Widget FeedBack dari Getsatisfaction di Blog
No comments:
Post a Comment
Terima kasih atas kunjungan anda. Silahkan tinggalkan komentar sobat dan dapatkan backlink satu arah langsung ke blog sobat dengan widget top komentator yang saya pasang di sidebar blog ini. Caranya dengan menjadi pemberi komentar terbanyak di blog ini, Komentar anda dapat dengan menyertakan LINK / ANCHOR TEXT atau promosi produk tertentu.
Terimakasih Atas Kunjungan Anda
Andrias Eka Fajar Darmawan
( Admin )