cara membuat tabview 4

Sobat, kali ini masih membahas cara membuat tabview. Kalo tidak salah di blog ini sudah ada 3 posting tentang tabview, tapi tentunya dengan gaya yang berbeda-beda. Pada tabview terdahulu saya merasa kesulitan untuk menambahkan judul tab yang baru, karena setiap menambah judul tab baru selalu saja judul tab yang sudah ada hilang beserta isinya, dan judul yang baru tampil berantakan. Nah kali ini ga bakalan terjadi hal demikian karena yang akan kita bahas di bawah ini lebih fleksibel... ini dia langkahnya:

Login ke Blog
Klik Tab Tata Letak
Klik Tab Edit HTML
Beri tanda centang pada kotak kecil Expand Template Widget
5. Silahkan cari di dalam template anda kode </head> kopi kode ini di atasnya
   
   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); }
6. Cari lagi di dalam template anda kode ]]></b:skin> kopi kode berikut di atasnya
   
   div.TabView div.Tabs { width: 100%; overflow: hidden; border-bottom: 0px solid #000000; font: bold 13px Arial; list-style-type: none; } div.TabView div.Tabs a { float: left; display: block; text-decoration: none; margin-right: 2px; margin-bottom: 2px; padding: 3px 3px 3px 3px; color: #FFFFFF; background: #0B615E; } div.TabView div.Tabs a:hover { color: #000000; background:#DF0101; } div.TabView div.Tabs a.Active { color: #000000; background:#2E2EFE; } div.TabView div.Pages { width: 100%; overflow: hidden; clear: both; border: 0px solid #E6E6E6; margin: 25px 0px 5px 5px; padding: 0px 0px 0px 0px; } div.TabView div.Pages div.Page { height: 100%; padding: 0px; overflow: hidden; } div.TabView div.Pages div.Page div.Pad { padding: 0px 0px; }
7. simpan template
8. masuk ke tataletak, tambahkan gadget html baru kopi kode berikut
   
   <div style="overflow:auto; width:100%px; height:100%px; padding:5px 5px 5px 5px; border:1px solid #999999;"><form action="tabview.html" method="get"><div id="TabView" class="TabView"><div style="width: 100%;" class="Tabs"><a>Judul 1</a> <a>Judul 2</a> <a>Judul 3</a> <a>Judul 4</a> </div><div style="width: 100%; height: 250px;" class="Pages"><div class="Page"><div class="Pad"> masukkanlah semua data dari judul disini yangnanti akan tampil di kolom Judul 1 </div></div><div class="Page"><div class="Pad"> masukkanlah semua data dari judul disini yangnanti akan tampil di kolom Judul 2 </div></div><div class="Page"><div class="Pad"> masukkanlah semua data dari judul disini yangnanti akan tampil di kolom Judul 3 </div></div><div class="Page"><div class="Pad">masukkanlah semua data dari judul disini yangnanti akan tampil di kolom Judul 4 </div></div></div></div></form><script type="text/javascript"> tabview_initialize('TabView'); </script> </div>
9. simpan
10. jika ingin menambah judul tambahkan
    
    <a>Judul xx</a> dan <div class="Page"><div class="Pad">masukkanlah semua data dari judul disini yangnanti akan tampil di kolom Judul xx </div></div>
11. selamat mencoba

Tulisan Terkait : Cara Mudah Membuat Marquee / Text Berjalan pada BlogKode dasar dari Marquee ini cukup sedehana yaitu di buat dengan mengg ... [ www.fabrie.blogspot.com] Membuat Exchange Link Automatic1. Sign up di www.blenza.com.2. Isi semua form nya.3. Data hasil Sign ... [ www.fabrie.blogspot.com] Menambah Space Iklan di Dalam Posting BlogspotBanyak cara bagi para publisher untuk menampilkan iklan di blognya ag ... [ www.fabrie.blogspot.com] Menghilangkan Tanggal PostingTanggal posting berguna untuk memeri informasi kapan postingan Anda t ... [ www.fabrie.blogspot.com] Cara Menerbitkan Posting Di BlogspotPada saat kamu akan membuat tulisan baru di blogspot maka kamu akan d ... [ www.fabrie.blogspot.com] Bagaimana Cara Optimasi Inbound Link?Inbound link merupakan link-link yang menuju ke blog atau situs kita. ... [ www.fabrie.blogspot.com] Membuat Title Bar Berjalan .fullpost{display:inline;} Agar dapat membuat title bar berjalan, ... [ www.fabrie.blogspot.com] Membuat Dropcap di Posting BlogSilahkan Login di Blogger.com, lalu masuk ke menu Layout Edit HTML, k ... [ www.fabrie.blogspot.com] Membuat Related Post Tanpa DuplikatPada tutorial sebelumnya tentang artikel terkait atau related post. P ... [ www.fabrie.blogspot.com] Blogger Harus Tahu : Apa Itu Lorem Ipsum ?Sebagai seorang blogger, mungkin kata Lorem Ipsum sudah tidak asing l ... [ www.fabrie.blogspot.com] membuat daftar isi blogdaftar isi blog sangat membantu pengunjung untuk menjelajahi seluruh ... [ www.fabrie.blogspot.com] Blogspot Mobile View? (Mobile Version)Selama ini kita mengetahui bahwa blogspot tidak tersedia fitur mobile ... [ www.fabrie.blogspot.com] Memasang Navigasi Halaman [ Page Navigation] di Blogspotenu navigasi halaman adalah fitur blog pengganti untuk tulisan "posti ... [ www.fabrie.blogspot.com] Cara Memodifikasi Komentar Blogspot Seperti WordpressHow to Enable Threaded Comments in blogspot - Cara memasang treaded c ... [ www.fabrie.blogspot.com] Membuat Float Navbar Berada DibawahFloat Navbar adalah navigation bar yang dari namanya sendiri "float" ... [ www.fabrie.blogspot.com] menyembunyikan komentarAda satu cara untuk menyembunyikan komentar pengunjung sehingga begit ... [ www.fabrie.blogspot.com] Silahkan Masukan Link Teks DisiniSahabat yang mau barter link tapi berupa banner silahkan disini karen ... [ www.fabrie.blogspot.com] Upload Gambar Kedalam Posting BlogspotBagi anda-anda yang masih bingung bagaimana caranya untuk memasukan ... [ www.fabrie.blogspot.com] gak cuma jacko yang bisa!siapa sih yang gak kenal gerakan ini? gerakan ini di populerkan oleh ... [ www.fabrie.blogspot.com] Cara Memasang Iklan Ditengah Posting BlogspotBerbeda dengan wordpress, blogspot tidak menggunakan plugins seperti ... [ www.fabrie.blogspot.com] menyembunyikan kolom kanan pada sub halaman, dan saat anda mengklik "Label atau Kategori maka kolom kanan Main tetap ada di Homepage.menyembunyikan kolom kanan pada sub halaman, dan saat anda mengklik " ... [ www.fabrie.blogspot.com] Menampilkan Tanggal Terbit Posting Pada Hari Yang SamaSecara default, blogspot tidak dapat menampilkan tanggal postingan pa ... [ www.fabrie.blogspot.com] HTML Color Picker Online : Kode HTML warna ... [ www.fabrie.blogspot.com] Cara Membuat Forum di BlogspotCara Membuat Forum di Blogspot. Blog yang mapan dan profesional tentu ... [ www.fabrie.blogspot.com] Cara Menganti Akun Login BlogpsotMisalkan anda ingin mengganti email login ke blog anda dari AkunLama ... [ www.fabrie.blogspot.com] menampilkan ym status di sudut blogmenampilkan ym status di sudut blog,,, kalo di tv posisinya kurang le ... [ www.fabrie.blogspot.com] menambah elemen baru di atas footerSalam sobat , kali ini saya akan coba menjelaskan langkah-langkah unt ... [ www.fabrie.blogspot.com] Buat banner kamu disiniBuat banner kamu di sini: ... [ www.fabrie.blogspot.com] Memindahkan Tanggal Publikasi Dibawah Judul PostingBila kita menggunakan template default blogger, biasanya saat kita m ... [ www.fabrie.blogspot.com] memasang image di sudut blog 2 Edit HTML, jangan lupa back up templatecari kode ]]></b:skin&g ... [ www.fabrie.blogspot.com] Tablet PC Epad Android QWERTYHarga per 16/02/2011 kisaran Rp1.600.000. SUDAH SUPPORT 3G MODEM, QWE ... [ www.fabrie.blogspot.com] Layanan Blog Gratis Yang Harus Kamu CobaSelain Blogspot dan wordpress. Masih banyak layanan blog gratis yang ... [ www.fabrie.blogspot.com] Cara Mudah Menambahkan Fitur Reply Pada Kolom Komentar BlogspotMembuat Fasilitas Reply pada Kotak Komentar ini akan membantu mempe ... [ www.fabrie.blogspot.com] Cara Mudah Membuat Banner Online GratisLangkah-langkah gratis: 1. Kunjungi situs ini Bannerfans.com 2. Regis ... [ www.fabrie.blogspot.com] Cara Setting BlogspotHal pertama yang penting anda lakukan agar blog anda di blogger mempu ... [ www.fabrie.blogspot.com] Dapatkan Domain co.tv. Gratis Sebagai Pengganti Domain BlogspotHai sobat,Satu lagi domain singkat gratis selain co.cc adalah co.tv. ... [ www.fabrie.blogspot.com] Cara Menghilangkan Nama Admin Pada Top CommentatorCara Menghilangkan Nama Admin Pada Top Commentator sebetulnya bisa ... [ www.fabrie.blogspot.com] membuat buku tamu tersembunyi jilid 2langkahnya:Masuk ke account Blogger kamu, pilih "Layout" - "Page Elem ... [ www.fabrie.blogspot.com] MENAMBAH EMOTIONS DI BUKU TAMU (SHOUTBOX)anda dapat menambah emotions dengan koleksi anda sendiri atau mengcop ... [ www.fabrie.blogspot.com] Manajemen Blogger Author | Revenue SharingBlogger memberikan kesempatan kepada para penggunanya untuk bisa mena ... [ www.fabrie.blogspot.com] Judul Artikel Sebagai Judul BlogEdit HTMLCari kode ini <title><data:blog.title/></titl ... [ www.fabrie.blogspot.com] Membuat widget selalu berada di pojokKamu ingin gambar/photo kamu, animasi, Jam, Shoutbox,Hit Counter, Kal ... [ www.fabrie.blogspot.com] readmore dengan menampilkan judul post dan mengganti dengan gambarJika sudah memasang fasilitas read more sebelumnya, ikuti langkah-lan ... [ www.fabrie.blogspot.com] IMAGE JADI SAMAR KETIKA KURSOR DIATASNYAikuti lanhka-langkah berikut Masuk ke Blogger dengan ID anda.Pilih Ta ... [ www.fabrie.blogspot.com] Cara Memasang Tombol Back to Top di BlogBlog sobat terlalu panjang kebawah karena posting yang panjang? tentu ... [ www.fabrie.blogspot.com] ternyata file image jadi besar di blog ku mengandung virusAkhir-akhir ini loading blogku sangat lambat, aku terus saja menyalah ... [ www.fabrie.blogspot.com] Cara Mendapatkan Backlink GratisSudah pernah melakukan cek berapa jumlah backlink yang Anda punya? Ap ... [ www.fabrie.blogspot.com] buku tamu tersembunyi 2 (gadget tersembunyi)Sebetulnya cara ini sama saja dengan , membuat buku tamu tersembunyi ... [ www.fabrie.blogspot.com] tips menjaga alexa rank dan page rankbagaimana membuat alexa dan Pr agar terjaga dan terus meninggkat wala ... [ www.fabrie.blogspot.com] Membuat Sendiri Share Link Ke Social Network Dengan JavascriptHai Sobat Blogger,,, Ternyata saya masih sempat untuk posting tulisan ... [ www.fabrie.blogspot.com]

Best Quote Today:
Keberhasilan adalah kemampuan untuk melewati dan mengatasi dari satu kegagalan ke kegagalan berikutnya tanpa kehilangan semangat. (Winston Chuchill)

Jika Anda menyukai tulisan diatas jangan lupa untuk klik tombol suka untuk berbagi dengan teman facebook Anda. Anda juga bisa membagikan tulisan ini di twitter dan jejaring sosial lainnya. Berbagi itu indah.

Become a Fan