Cara Membuat Tab View Blogger

Bismillahirahmanirrahim. Kali ini kita akan membuat belajar Membuat Tab View Blogger. Tab View Blogger ini dimaksudkan agar dapat mengurangi ruang pada halaman sidebar sehingga bisa lebih tertata rapi. Kalian bisa liat demo Tab View Blogger pada link di bawah. Setelah itu kita lanjutkan tutorial untuk membuat tab view blogger.

Download Demo

Langkah-langkah untuk membuat tab view blogger sebagai berikut:

• Seperti biasa kita harus login dulu di Blogger lalu pilih Rancangan dan Pilih lagi Edit HTML lalu beri cheklis Expand Template Widget
• Lalu  masukkan kode CSS di bawah ini sebelum kode ]]></b:skin>
div.TabView div.Tabs{width:350px;height:24px;overflow:hidden} div.TabView div.Tabs a{float:left;display:block;width:90px;text-align:center;height:24px;margin-left:3px;padding-top:3px;vertical-align:middle;-moz-border-radius-topleft:5px;-moz-border-radius-topright:5px;-webkit-border-radius-topleft:5px;-webkit-border-radius-topright:5px;-khtml-border-radius-topleft:5px;-khtml-border-radius-topright:5px;border-top-left-radius:5px;border-top-right-radius:5px;border:1px solid #666;border-bottom-width:0;text-decoration:none;font:12px Arial, Times New Roman, Serif;color:#000;font-weight:900} div.TabView div.Tabs a:hover,div.TabView div.Tabs a.Active{background-color:#0D606B;color:#fff} div.TabView div.Pages{width:350px;height:250px;clear:both;color:#fff;background-color:#0D606B;-moz-border-radius:5px;-webkit-border-radius:5px;-khtml-border-radius:5px;border-radius:5px;border:1px solid #666;overflow:hidden} div.TabView div.Pages div.Page{height:100%;overflow:hidden;padding:0} div.TabView div.Pages div.Page div.Pad{padding:3px 5px}
• Setelah itu copy paste script dibawah ini sebelum kode  </head>
<script src="http://ekosusanto.googlecode.com/files/Tab%20View%20Blogger.js"> </script>
• Setelah itu simpan template

Langkah-langkah di atas digunakan untuk mengatur tampilan dari Tab View Blogger.  Setelah langkah-langkah di atas selesai kita lanjutkan dengan langkah-langkah di bawah ini

• Login Blogger lagi lalu pilih Rancangan dan Klik Tambah Gadget lalu Pilih HTML/JavaScript lalu isikan dengan script di bawah ini
<form action="tabview.html" method="get"> <div class="TabView" id="TabView"> <div class="Tabs"> <a>Tab 1</a> <a>Tab 2</a> <a>Tab 3</a> </div> <div class="Pages"> <div class="Page"> <div class="Pad">    Kamu bisa memasukkan script, gambar, link disini </div> </div> <div class="Page"> <div class="Pad">    Kamu bisa memasukkan script, gambar, link disini </div> </div> <div class="Page"> <div class="Pad">   Kamu bisa memasukkan script, gambar, link disini </div> </div> </div> </div> </form> <script type="text/javascript"> tabview_initialize('TabView'); </script>
• Simpan
• Lalu liat blog

Catatan:
Ganti Kamu bisa memasukkan script, gambar, atau link disini dengan script yang kalian ingin kan

Sekian tutorial kali ini tentang Cara Membuat Tab View Blogger semoga dapat bermanfaat dan jangan lupa mampir lagi ke blog ini dengan posting yang lebih menarik.