membuat tabview (3)

Sobat, sebetulnya membuat tabview yang ini tidak jauh beda dengan tabview yang sebelumnya hanya sedikit saja berbeda, ini dia:

1. Login ,
   Pilih Tata Letak --> Edit HTML.


2. cari ]]></b:skin> kopi kode berikut di atas nya:
   div.TabView div.Tabs<br /> {<br /> height: 24px;<br /> overflow: hidden;<br /> }<br /><br /> div.TabView div.Tabs a<br /> {<br /> float: left;<br /> display: block;<br /><br /> width: 90px;<br /> text-align: center;<br /><br /> height: 24px;<br /> padding-top: 3px;<br /> vertical-align: middle;<br /> border: 1px solid #000000;<br /> border-bottom-width: 0;<br /><br /> text-decoration: none;<br /> font-family: "Arial", Times New Roman, Serif;<br /> font-weight: 900;<br /> color: #000080;<br /> }<br /><br /> div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active<br /> {<br /> background-color: #BDBDBD;<br /> }<br /><br /> div.TabView div.Pages<br /> {<br /> clear: both;<br /> background-color: #FFFFFF;<br /> border: 1px solid #000000;<br /> overflow: hidden;<br /> }<br /><br /> div.TabView div.Pages div.Page<br /> {<br /> height: 100%;<br /> padding: 0px;<br /> overflow: hidden;<br /> }<br /><br /> div.TabView div.Pages div.Page div.Pad<br /> {<br /> padding: 3px 5px;<br /> }



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



4. simpan template kamu.
   


5. Kemudian pilih tab Elemen Halaman --> Tambah Gadget.
   Jendela Tambahkan Gadget akan muncul --> HTML/JavaScript.


6. Copy dan paste kode di bawah ini
   <form action="tabview.html" method="get"><br /> <div class="TabView" id="TabView"><br /><br /> <div class="Tabs" style="width: 350px;"><br /> <a>Tab 1</a><br /> <a>Tab 2</a><br /> <a>Tab 3</a><br /> </div><br /><br /> <div class="Pages" style="width: 350px; height: 250px;"><br /><br /> <div class="Page"><br /> <div class="Pad"><br /><br /> Tab1.1<br/><br /> Tab1.2<br/><br /> Tab1.3<br/><br /><br /> </div><br /> </div><br /><br /><br /> <div class="Page"><br /> <div class="Pad"><br /><br /> Tab2.1<br/><br /> Tab2.2<br/><br /> Tab2.3<br/><br /><br /> </div><br /> </div><br /><br /><br /> <div class="Page"><br /> <div class="Pad"><br /><br /> Tab3.1<br/><br /> Tab3.2<br/><br /> Tab3.3<br/><br /><br /> </div><br /> </div><br /><br /> </div><br /> </div><br /> </form><br /><br /> <script type="text/javascript"><br /> tabview_initialize('TabView');<br /> </script>



7. jangan lupa ganti tab#.# dengan konten yang ingin di isikan


8. simpan

Tulisan Terkait : MENGATUR PENAMPILAN LINKIkuti langkah-langkahnya.Masuk ke Blogger.Pilih Tata letak.Pilih Elem ... [ www.fabrie.blogspot.com] MEMASANG KOMENTAR TERBARUMasuk ke Blogger.Pilih Tata Letak.Pilih Edit HTML.Cari kode ini ]]> ... [ www.fabrie.blogspot.com] cara menampilkan judul artikel / post di depan judul blog layout > Edit HTML Cari kode berikut :<title><data:blog.pag ... [ www.fabrie.blogspot.com] Menghilangkan Tanggal PostingTanggal posting berguna untuk memeri informasi kapan postingan Anda t ... [ www.fabrie.blogspot.com] membuat efek zoom pada image dan tulisanlogin ke blog, tata letak , html cari kode ]]></b:skin>, kop ... [ www.fabrie.blogspot.com] Cara Memasang Iklan Ditengah Posting BlogspotBerbeda dengan wordpress, blogspot tidak menggunakan plugins seperti ... [ www.fabrie.blogspot.com] Cara Membuat Forum di BlogspotCara Membuat Forum di Blogspot. Blog yang mapan dan profesional tentu ... [ www.fabrie.blogspot.com] Manajemen Blogger Author | Revenue SharingBlogger memberikan kesempatan kepada para penggunanya untuk bisa mena ... [ www.fabrie.blogspot.com] Membuat Random BannerRandom Banner adalah sebutan untuk tampilan banner yang tampil secara ... [ www.fabrie.blogspot.com] Memindahkan Tanggal Publikasi Dibawah Judul PostingBila kita menggunakan template default blogger, biasanya saat kita m ... [ 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] Beda antara Border ,Padding dan Margin .fullpost{display:inline;} Barangkali anda yang sudah terbiasa d ... [ www.fabrie.blogspot.com] menambah elemen baru di atas footerSalam sobat , kali ini saya akan coba menjelaskan langkah-langkah unt ... [ 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 membuat tabview 4Sobat, kali ini masih membahas cara membuat tabview. Kalo tidak salah ... [ www.fabrie.blogspot.com] Mempercepat Loading Page Pada BlogWidget yang terlalu banyak menbabkab loading blog tergannggu, seperti ... [ www.fabrie.blogspot.com] Membuat Floating Image Yang Bisa Ditutup (close) Pada BlogFloating image merupakan image mengambang yang biasanya berada di seb ... [ www.fabrie.blogspot.com] Cara Memasang Page View Counter di BlogspotCara Memasang Page View Counter di Blogspot. Akhirnya Jasman dari ihs ... [ www.fabrie.blogspot.com] Membuat label blogspot dengan menu dropdownKeterbatasan space di blog memang membuat kita musti berhemat menggun ... [ www.fabrie.blogspot.com] Zoom Image Pada Posting Dengan CSS TransitionAda banyak cara untuk membuat zoom image. Bisa menggunakan cara ini ... [ 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] Membuat Sendiri Share Link Ke Social Network Dengan JavascriptHai Sobat Blogger,,, Ternyata saya masih sempat untuk posting tulisan ... [ www.fabrie.blogspot.com] Cara Menganti Akun Login BlogpsotMisalkan anda ingin mengganti email login ke blog anda dari AkunLama ... [ www.fabrie.blogspot.com] Membuat Float Navbar Berada DibawahFloat Navbar adalah navigation bar yang dari namanya sendiri "float" ... [ www.fabrie.blogspot.com] menampilkan Avatar Mybloglog di Kotak KomentarLangsung saja, seperti biasa loginlah terlebih dahulu ke blogger. ... [ 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] Silahkan Masukan Link Teks DisiniSahabat yang mau barter link tapi berupa banner silahkan disini karen ... [ www.fabrie.blogspot.com] HTML Color Picker Online : Kode HTML warna ... [ www.fabrie.blogspot.com] Cara Mendapatkan Backlink GratisSudah pernah melakukan cek berapa jumlah backlink yang Anda punya? Ap ... [ www.fabrie.blogspot.com] membuat buku tamu tersembunyi jilid 2langkahnya:Masuk ke account Blogger kamu, pilih "Layout" - "Page Elem ... [ 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] gak cuma jacko yang bisa!siapa sih yang gak kenal gerakan ini? gerakan ini di populerkan oleh ... [ www.fabrie.blogspot.com] Tips Ampuh Blogger PemulaMemulai sebuah blog bisa tampak besar, tetapi sebenarnya, itu salah s ... [ www.fabrie.blogspot.com] MENAMBAH EMOTIONS DI BUKU TAMU (SHOUTBOX)anda dapat menambah emotions dengan koleksi anda sendiri atau mengcop ... [ www.fabrie.blogspot.com] membuat daftar isi blogdaftar isi blog sangat membantu pengunjung untuk menjelajahi seluruh ... [ 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] Membuat Garis Lengkung Pada Border blogMenggunakan border ini adalah untuk meminimalkan memepercantik blog d ... [ 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] background dan layout bebeda pada setiap halaman blogMemasang background untuk halaman utamaDi halaman ini ditempatkan ber ... [ www.fabrie.blogspot.com] Notebook Hybrid Lenovo Terbaru Inovatif Dengan Layar Bisa DilepasProduk dari Lenovo berupa Notebook Tablet baru ini memang lain dari p ... [ www.fabrie.blogspot.com] buku tamu tersembunyi 2 (gadget tersembunyi)Sebetulnya cara ini sama saja dengan , membuat buku tamu tersembunyi ... [ 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] Kenali Tombol Like, Tweet, dan Follow Demi Privasi KamuKenali Tombol Like, Tweet, dan Follow Demi Privasi Kamu untuk menjaga ... [ www.fabrie.blogspot.com] Cara Menjadi Penulis Di Blog IniMakin hari perkembangan blog ini semakin pesat. Tiap hari ratusan ora ... [ www.fabrie.blogspot.com] membuat buku tamu tersembunyiingin menampilkan buku tamu tersembunyi di blog? Masuk ke account Blo ... [ www.fabrie.blogspot.com] Menyembunyikan gadget atau widget pada postingan tertentuLoading blog sobat lambat karena widget yang begitu banyak? supaya wi ... [ www.fabrie.blogspot.com] menyembunyikan komentarAda satu cara untuk menyembunyikan komentar pengunjung sehingga begit ... [ www.fabrie.blogspot.com] PlayBook Segera Hadir di IndonesiaKabar gembira bagi anda penggemar BlackBerry. Pasalnya pihak RIM (Res ... [ www.fabrie.blogspot.com] Free Icon Untuk Blog Dan WebsiteBagi anda yang suka menghiasi blog atau website dengan berbagai macam ... [ www.fabrie.blogspot.com] Menampilkan Tanggal Terbit Posting Pada Hari Yang SamaSecara default, blogspot tidak dapat menampilkan tanggal postingan pa ... [ 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