membuat tab view 2

masuk ke edit html, "centang Expand Widget Templates" Sekarang kita cari kode ]]></b:skin>, untuk memudahkan gunakan fungsi search browser (Ctrl+F). Setelah ketemu masukan script pertama dibawah ini di atas kode ]]></b:skin>

/* tabview css start */<br /><br />div.TabView div.Tabs<br />{<br />height: 24px;<br />overflow: hidden;<br />}<br />div.TabView div.Tabs a<br />{<br />float: left;<br />display: block;<br />width: 100px; /* Lebar menu utama */<br />text-align: center;<br />height: 24px; /* Tinggi menu utama */<br />padding-top: 3px;<br />vertical-align: middle;<br />border: 1px solid #000; /* Warna border menu utama */<br />border-bottom-width: 0;<br />text-decoration: none;<br />font-family: "Verdana", Serif; /* Font menu utama */<br />font-weight: 900;<br />color: #000; /* Warna font menu utama */<br />}<br />div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active<br />{<br />background-color: #F3F53A; /* Warna background menu utama */<br />}<br />div.TabView div.Pages<br />{<br />clear: both;<br />border: 1px solid #6E6E6E; /* Warna border isi konten */<br />overflow: hidden;<br />background-color: #9BA9FE; /* Warna background isi konten */<br />}<br />div.TabView div.Pages div.Page<br />{<br />height: 100%;<br />padding: 0px;<br />overflow: hidden;<br />}<br />div.TabView div.Pages div.Page div.Pad<br />{<br />padding: 3px 5px;<br />}<br /><br />/* tabview css end */<br />

kemudian kopi lagi kode ini diatas </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><br />

tambahkan elemen widget baru , kopi kode berikut

<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><br />

Tulisan Terkait : Menampilkan kode script pada posting blogMasuk Blogger>Klik Layout(tata letak).Pada Layout/tata letak klik ... [ www.fabrie.blogspot.com] Menampilkan update status twitter di blog dengan javascriptHai Sobat!      Kali ini ada script yang sebetul ... [ 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] buku tamu tersembunyi 2 (gadget tersembunyi)Sebetulnya cara ini sama saja dengan , membuat buku tamu tersembunyi ... [ www.fabrie.blogspot.com] Apa itu Bloging (Ngeblog) dan Apa manfaatnya?Selama ini banyak orang yang bertanya apa itu blog? blogging atau nge ... [ www.fabrie.blogspot.com] Tips Menyimpan/ Save As File Flash dari Website! Saat kita browsing atau jalan-jalan di internet, sering kita meliha ... [ 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] 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] Tool Untuk Mempercepat Loading BlogTool untuk optimasi loading blog - Mengukur Berat dan Loading blog - ... [ www.fabrie.blogspot.com] Blogspot Mobile View? (Mobile Version)Selama ini kita mengetahui bahwa blogspot tidak tersedia fitur mobile ... [ 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] Mempercepat Loading Page Pada BlogWidget yang terlalu banyak menbabkab loading blog tergannggu, seperti ... [ www.fabrie.blogspot.com] menambah elemen baru di atas footerSalam sobat , kali ini saya akan coba menjelaskan langkah-langkah unt ... [ www.fabrie.blogspot.com] misteri ka'bahNeil Amstrong telah membuktikan bahwa kota Mekah adalah pusat dari pl ... [ www.fabrie.blogspot.com] Cara Menjadi Penulis Di Blog IniMakin hari perkembangan blog ini semakin pesat. Tiap hari ratusan ora ... [ www.fabrie.blogspot.com] Tips menampilkan pesan pada jam tertentuKadang kita bingung bagaimana berkomunikasi dengan pengunjung karna k ... [ www.fabrie.blogspot.com] Cara Mudah Membuat simbol trademark, registered , copyright dan simbol lainnyaUntuk membuat TradeMark alias TM TM adalah singkatan dari TradeMark. ... [ www.fabrie.blogspot.com] Free Icon Untuk Blog Dan WebsiteBagi anda yang suka menghiasi blog atau website dengan berbagai macam ... [ 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] Cara Menghilangkan Nama Admin Pada Top CommentatorCara Menghilangkan Nama Admin Pada Top Commentator sebetulnya bisa ... [ www.fabrie.blogspot.com] MENGATUR PENAMPILAN LINKIkuti langkah-langkahnya.Masuk ke Blogger.Pilih Tata letak.Pilih Elem ... [ 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] Cara Memasang Iklan Ditengah Posting BlogspotBerbeda dengan wordpress, blogspot tidak menggunakan plugins seperti ... [ 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] membuat kotak komentar ada foto komentatornyaberikut langkah-langkahnya: klik tata letak,Edit HTML → Sebelumnya ... [ www.fabrie.blogspot.com] Membuat Title Bar Berjalan .fullpost{display:inline;} Agar dapat membuat title bar berjalan, ... [ www.fabrie.blogspot.com] menampilkan Avatar Mybloglog di Kotak KomentarLangsung saja, seperti biasa loginlah terlebih dahulu ke blogger. ... [ www.fabrie.blogspot.com] Cara Mudah Membuat Banner Online GratisLangkah-langkah gratis: 1. Kunjungi situs ini Bannerfans.com 2. Regis ... [ 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] tips menjaga alexa rank dan page rankbagaimana membuat alexa dan Pr agar terjaga dan terus meninggkat wala ... [ www.fabrie.blogspot.com] Cara Membuat Daftar Isi BlogspotMembuat daftar isi sepertiini kadang membuat loading blog menjadi lam ... [ www.fabrie.blogspot.com] sahabat yang mau tukeran link silahkan komen disini Baca Peraturan terlebih dahulu sebelum barter link. Terimakasih tel ... [ 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] MENAMBAH EMOTIONS DI BUKU TAMU (SHOUTBOX)anda dapat menambah emotions dengan koleksi anda sendiri atau mengcop ... [ www.fabrie.blogspot.com] Beda antara Border ,Padding dan Margin .fullpost{display:inline;} Barangkali anda yang sudah terbiasa d ... [ www.fabrie.blogspot.com] Membuat Related Post Tanpa DuplikatPada tutorial sebelumnya tentang artikel terkait atau related post. P ... [ 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] Membuat Floating Image Yang Bisa Ditutup (close) Pada BlogFloating image merupakan image mengambang yang biasanya berada di seb ... [ www.fabrie.blogspot.com] Fitur Baru Dashboard Posting BloggerFitur Baru Dashboard Posting Blogger. Hari ini saya agak merasa kikuk ... [ www.fabrie.blogspot.com] Memasang Navigasi Halaman [ Page Navigation] di Blogspotenu navigasi halaman adalah fitur blog pengganti untuk tulisan "posti ... [ www.fabrie.blogspot.com] HTML Color Picker Online : Kode HTML warna ... [ www.fabrie.blogspot.com] Membuat label blogspot dengan menu dropdownKeterbatasan space di blog memang membuat kita musti berhemat menggun ... [ www.fabrie.blogspot.com] Cara Setting BlogspotHal pertama yang penting anda lakukan agar blog anda di blogger mempu ... [ 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] Cara Menganti Akun Login BlogpsotMisalkan anda ingin mengganti email login ke blog anda dari AkunLama ... [ 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] Menampilkan Tanggal Terbit Posting Pada Hari Yang SamaSecara default, blogspot tidak dapat menampilkan tanggal postingan pa ... [ 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] membuat buku tamu tersembunyiingin menampilkan buku tamu tersembunyi di blog? Masuk ke account Blo ... [ 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