Cara Membuat Widget Tab View 3 Kolom Pada Blog

Cara Membuat Widget Tab View 3 Kolom Pada Blog

Halo sobat Blogger, kali ini Saya akan membagikan sedikit tips untuk menghemat lokasi widget di blog sobat. kalau biasanya sobat memiliki banyak widget yang perlu ditampilkan baik itu untuk mempercantik template, script atau untuk optimasi SEO tapi terlalu banyak, maka sebaiknya sobat menggunakan widget tab view dengan 3 kolom pada blog dengan cara seperti dibawah yang akan Blogeraceh bagikan nanti, ok sobat langsung saja ke TKP ya..






1. Buka Tata letak dan Tambahkan HTML/CSS pada blog sobat
2. Untuk Judul kosongkan saja, langsung isi HTML nya seperti dibawah.

<style type="text/css">
div.TabView div.Tabs a
{
float: left;
display: block;
width: 90px; /* Lebar Kotak Tab */
height: 22px; /* Tinggi Menu Utama Atas */
text-align: center; /* Posisi Teks Menu Tab */
margin: 5px 0px 0px 3px; /* Posisi Kotak Tab */
background-color: #000; /* Warna background Kotak Tab */
padding-top: 2px; /* Spasi Atas */
border: 1px solid #ffffff; /* Warna border kotak Tab */
border-bottom: 1px solid #ccc; /*Warna border bawah kotak tab */
font-family: "Arial, Helvetica, sans-serif", Arial; /* Font Kotak Tab */
font-weight: 900; /* Ketebalan Teks kotak tab */
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #736F6E; /* Warna background utama kotak tab */ }
div.TabView div.Pages
{
clear: both;
border: 1px solid #cccccc; /* Warna border Kotak Konten */
overflow: hidden;
background-color: #ffffff; /* Warna background Kotak konten */
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 5px; /* Jarak teks dalam kotak content */
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}
</style>
<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 300px;" class="Tabs">
<a><span style="color: #fff">R. Comment</span></a>
<a><span style="color: #fff">FB. Comment</span></a>
<a><span style="color: #fff">Sahabat</span></a>
</div>
<div style="width: 310px; height: 400px;" class="Pages">
<div class="Page">
<div class="Pad">
------------| isi konten 1 |-----------</div></div>
<div class="Page">
<div class="Pad">
------------| isi konten 2 |-----------</div></div>
<div class="Page">
<div class="Pad">
------------| isi konten 3 |-----------</div></div>
</div>
</div>
</form>
<script src="http://septiamujizat.googlecode.com/files/tab_view.js">
</script>
<script type="text/javascript">
tabview_initialize('TabView');
</script>

3. Untuk Tulisan berwarna bisa diganti dengan judul Tab seperti keinginan sobat, dan tanda ----|isi konten|---- adalah tempat sobat meletakkan isi konten seperti link sahabat, script, twitter,comment,fan page dan hal-hal lain. untuk posisi lebar, tinggi dan ukuran lain bisa diubah menurut petunjuk di script.
Untuk Contoh yang telah jadi bisa sobat lihat di blog Saya yang satu lagi yaitu Investasi Online. Semoga cara membuat widget tab view 3 kolom pada blog yang Blogeraceh bagikan bisa bermanfaat bagi blog sobat.
Happy Blogging!