Membuat Tab View Pada Blogspot

Postingan ini merupakan permintaan sobat Zikri yang merupakan salah satu teman saya di SMAN 1 Pekanbaru yang selalu ingin berkonsultasi dan memberi saya ide tentang postingan blog saya, untuk sobat Zikri, ini merupakan permintaan anda dan mohon maaf jika terlambat dan lama mempostingnya !!!

Apa Fungsi Tab View ?
Sobat Blogger semua tentu tahu tantang Tab View. Jika belum maka gambar disamping merupakan salah satu contoh Tab View yang merupakan tutorial yang akan saya beri kepada sobat blogger semua !!! Jika anda masih bingung seperti apa Tab View ini, Silahkan lihat pada sidebar sebelah kanan blog saya, Sidebar :: Information :: tersebutlah salah satu contoh Tab View yang terpasang pada blog saya saat ini !!!

Lalu apa fungsi dari Tab View ini ? Selain menu yang berada pada menu blog kita, tab view juga merupakan salah satu solusi bagaimana seseorang blogger yang mengunjungi blog kita akan mudah memperoleh banyak informasi di blog kita !!! Selain itu, Tab View dapat memperhemat lokasi baik pada bagian sidebar blog kita untuk memberikan lebih banyak lagi informasi kepada pengujung blog kita !!!

Bagaimana Cara Membuatnya ?
Ok, Jika Tidak mau pikir panjang, ayo dan simak pembuatannya di bawah ini !!!
1. Login pada Blogger
2. Masuk ke bagian Rancangan, kemudian ke bagian Edit HTML
    Back up Template dengan cara Mengklik : Download Template Lengkap
    Setelah itu, beri tanda cek pada Expand Widget Templates.
 
3. Copy kode CSS dibawah ini,

div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 90px; /* Lebar Menu Utama Atas */ text-align: center;
height: 24px; /* Tinggi Menu Utama Atas */
padding-top: 3px;
vertical-align: middle;
border: 1px solid #000; /* 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: #000; /* Warna Font Menu Utama Atas */
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #FF9900; /* Warna background Menu Utama Atas */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #6E6E6E; /* Warna border Kotak Utama */
overflow: hidden;
background-color: #FF9900; /* 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;
}

Note : Pada tulisan berwarna merah silahkan anda rubah dan sesuaikan dengan blog anda, untuk kode warna bisa dilihat di Kode Warna HTML
4.  Setelah itu, Paste kode tersebut diatas kode ]]></b:skin>

5. Copy kode Di bawah ini :

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

6. Paste Kode tersebut diatas kode </head>

7. Setelah itu,

• Simpan template anda.
• Kemudian pilih tab Elemen Halaman --> Tambah Gadget --> HTML/JavaScript 

8. Copy dan Paste Kode dibawah ini :

<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 350px;">
<a>Tab 1</a>
<a>Tab 2</a>
<a>Tab 3</a>
</div>
<div class="Pages" style="width: 350px; height: 250px;">

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

Keterangan:
- Text yang berwarna Biru  adalah ukuran tinggi dan lebar tabview. (Silahkan anda sesuaikan dengan blog anda)
- Kode yang berwarna Hijau yang muncul di Menu utama (Menu Atas).
- Kode yang berwarna Kuning adalah isi dari Tab View. Kamu bisa mengisinya dengan link, gambar, banner, script dll.

9. Lalu Klik Simpan, dan lihat blog kamu sekarang !!!

" SELAMAT BERKREASI SOBAT "

Bagikan Jika Artikel ini menarik, Diharapkan agar memberikannya kepada teman2 anda di Facebook

Artikel Lainnya :

Tip n Trik

• Menampilkan Akun Google Plus Di SERP Google
• Tips Mempersingkat Alamat URL Akun Google Plus
• Hubungkan Google Plus dengan Facebook | Twitter
• Menghubungkan Google Plus ke FB dan Twitter
• Twitteran Di Dashboard Akun Google Plus
• Cara Download Semua Album Foto di Facebook
• Tips Cara Mendapatkan Sitelink Google
• Membuat Sebuah Link Mengarah Ke Lebih 2 URL
• Show Hide Chatbox Efek Jquery di Sidebar Blog
• Maksud Pesan Error Saat Mengakses Internet
• Merubah Kotak Chat Facebook ke Versi Lama
• Memasang Simple Menu Navigasi Horizontal
• Memasang Floating Share Button
• Googlebot Access Blog Bermasalah
• Tag H1 Untuk Judul Postingan dan Judul Blog
• Mempercepat IDM Menggunakan IDM Optimizer
• Memasang Hidden Chatbox With Jquery Di Sidebar
• Memasang Hidden Chatbox Pada Sidebar Blog
• Memasang Sticky Tooltips Di Blogspot
• Tingkatkan Traffic Blog Lewat VLog | VIVANews
• Tampilan Halaman Label Hanya Judul Postingan
• Cara Transfer Foto Dari Facebook Ke Google+
• Tips SEO Terbaru di Tahun 2011
• Tutorial Membuat S3slider Images Show
• Akhirnya, Bisa Juga Join Ke Google+

Tutorial Blog

• Menampilkan / Menyembunyikan Sidebar Blog
• Membuat Sebuah Link Mengarah Ke Lebih 2 URL
• Show Hide Chatbox Efek Jquery di Sidebar Blog
• Memasang Simple Menu Navigasi Horizontal
• Memasang Floating Share Button
• Tag H1 Untuk Judul Postingan dan Judul Blog
• Memasang Hidden Chatbox With Jquery Di Sidebar
• Memasang Hidden Chatbox Pada Sidebar Blog
• Memasang Sticky Tooltips Di Blogspot
• Tampilan Halaman Label Hanya Judul Postingan
• Tutorial Membuat S3slider Images Show
• Memasang Tombol Google +1 di Blogspot
• Membuat Recent Post With Thumbnails
• Membuat Intro Page Pada Blogspot
• Kode Warna HTML
• Combine Show Hide Sidebar with Tooltips
• Navigasi Breadcrumb Pada Postingan Blog
• Membuat Tooltips Pada Sebuah Objek
• Membuat Menu Navigasi Dengan Tooltips
• Membuat Page Peel Effect Pada Blogger
• Related Post With Scrool Function
• Pesan Kamu Di Atas "Poskan Komentar's Box"
• Membuat Form Komentar Admin
• Membuat Rate Widget Pada Blog