Cara Memasang Widget Tab Keren di Blog

Pengen Blog Kamu Tampil Profesional, Rapi dan Menarik tentunya ???

Apalagi blog kamu penuh dengan widget yang terpasang,, tentunya kurang rapi dan bikin loading blog jadi lelet, saya sarankan ganti saja tampilan widged'a ke bentuk tampilan TAB seperti gambar dibawah ini :

Jangan Dibaca aja,,,Langsung praktek yukk,,,,

Langkah Pertama :

• Login Ke Blog masing2
• Edit template HTMLnya : cari kode ]]></b:skin> dan letakkan kode dibawah ini tepat diatas kode ]]></b:skin> tadi :

/* Menu Tab View
----------------------------------------------- */
div.TabView div.Tabs {
padding-top: 0px;
height: 24px;
overflow: hidden;
}
/* Menu Utama */
div.TabView div.Tabs a {
float: left;
display: block;
width: 80px; /*ukuran lebar tabmenu*/text-align: center;
height: 24px; /*ukuran tinggi tabmenu*/padding-top: 3px;
margin-right:4px; /*jarak antartabmenu*/vertical-align: middle;
border: 1px solid #CCC; /*warna border menu*/border-bottom-width: 0;
font-family: "Arial", Times New Roman, Serif; /*jenis hurup menu*/font-size: 12px; /*besar hurup menu*/letter-spacing: -1px;
background-color: #A4A4A4; /*warna latar menu*/color: #FFFFFF; /*warna hurup menu*/-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
-webkit-border-top-left-radius:10px;
-webkit-border-top-right-radius:10px;
}
div.TabView div.Tabs a.Active {
background-color: #888888; /*warna background menu aktif*/color: #FFFFFF;
}
div.TabView div.Tabs a:hover {
background-color: #999999; /*warna background menu hover*/color: #FFFFCC;
font-weight: bold;
}
/* Kotak Utama */
div.TabView div.Pages {
clear: both;
border: 1px solid #CCC; /*warna border kotak utama*/overflow: hidden;
background:url("http://sites.google.com/site/ruangsc/image/bgtabview.gif"); /*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;
font-size: 12px; /*besar hurup kotak utama*/}

Note : Pada bagian yang diberi tanda keterangan merah, kamu dapat mengubahnya sesuai dengan yang diinginkan, seperti pada ukuran, warna maupun jenis hurup.

• Setelah itu letakkan sumber script berikut di bawah ]]></b:skin>

<script src="http://enes-sc.googlecode.com/files/tabview.js" type="text/javascript"/>

• Simpan edit template tadi

• Langkah Kedua :

• Pilih menu Tata Letak.
• Klik pada bagian Tambah Gadget dan pilih HTML/JavaScript.
• Kopikan script berikut ini :

<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 100%;" class="Tabs">
<a title="Keterangan Menu 1">Menu 1</a>
<a title="Keterangan Menu 2">Menu 2</a>
<a title="Keterangan Menu 3">Menu 3</a>
<a title="Keterangan Menu 4">Menu 4</a>
</div>
<div style="width: 100%; height: 200px;" class="Pages">

<!--Awal Menu 1-->
<div class="Page"><div class="Pad">
Isi Menu 1.1<br/>
Isi Menu 1.2<br/>
Isi Menu 1.dst<br/>
</div></div>
<!--Akhir Menu 1-->

<!--Awal Menu 2-->
<div class="Page"><div class="Pad">
Isi Menu 2.1<br/>
si Menu 2.2<br/>
Isi Menu 2.dst<br/>
</div></div>
<!--Akhir Menu 2-->

<!--Awal Menu 3-->
<div class="Page"><div class="Pad">
Isi Menu 3.1<br/>
Isi Menu 3.2<br/>
Isi Menu 3.dst<br/>
</div></div>
<!--Akhir Menu 3-->

<!--Awal Menu 4-->
<div class="Page"><div class="Pad">
Isi Menu 4.1<br/>
Isi Menu 4.2<br/>
Isi Menu 4.dst<br/>
</div></div>
<!--Akhir Menu 4-->

</div></div></form>

<script type="text/javascript" src="http://enes-sc.googlecode.com/files/tabview-tab.js"></script>

Pada tulisan yang berwarna merah dapat kamu ubah disesuaikan dengan kebutuhan. Milsalnya pada ukuran width (lebar) dan height (tinggi), dapat kamu gunakan ukuran % atau pixel (px) yang disesuaikan dengan lebar sidebar blog kamu. Begitupun dengan judul Menu dan Isi Menu dapat kamu buat sendiri sesuai keinginan. 

Selain itu kamu juga bisa menambahkan menu-menu lain (lebih dari 4) asalkan lebar sidebarblog kamu mencukupi. Atau bisa juga mengakalinya dengan cara memperkecil ukuran lebar menu pada script yang tadi diletakkan pada HTML template blog kamu.

Sumber

BAGIKAN ARTIKEL : Facebook Twitter Google+ Linkedin