Cara Pasang Tab View Menu di Sidebar

Mengingat banyaknya gadget yang harus dipasang di blog kita, maka cara ini mungkin lebih cocok untuk kita terapkan agar tidak terlalu menyita tempat pada sidebar blog. Caranya sangat simple dan tidak terlalu banyak menggunakan script yang akan menambah beban template blog kita.
Caranya :

• Login ke blogger
• Pilih Rancangan -> Page Element
• Tambah Gadget -> HTML Javascript
• Copy paste code script di bawah ini :

<style type="text/css">
div.TabView div.Tabs a
{
float: left;
display: block;
width: 80px; /* Lebar Kotak Tab */
height: 20px; /* Tinggi Menu Utama Atas */
text-align: center; /* Posisi Teks Menu Tab */
margin: 5px 0px 0px 3px; /* Posisi Kotak Tab */
background-color: #87CEFA; /* 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:transparent); /* Warna background utama kotak tab */
}
div.TabView div.Pages
{
clear: both;
border: 0px solid #cccccc; /* Warna border Kotak Konten */
overflow: hidden;
background:rgba(255,255,255,0.4); /* 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: 305px;" class="Tabs">
<a><span style="color:white">MENU 1</span></a>
<a><span style="color:white">MENU 2</span></a>
<a><span style="color:white">MENU 3</span></a>
</div>
<div style="width: 300px; float:center; height: 200px;" class="Pages">
<div class="Page">
<div class="Pad">
ISI MENU 1 DI SINI
</div>
</div>
<div class="Page">
<div class="Pad">
ISI MENU 2 DI SINI
</div>
</div>
<div class="Page">
<div class="Pad">
ISI MENU 3 DI SINI
</div>
</div>
</div></div></form>
<script style="text/javascript" src="http://cpakank.googlecode.com/files/tab_view.js"></script>
<script type="text/javascript">tabview_initialize('TabView');</script>

• Save Gadget
• Selesai

Untuk ukuran wide dan height silakan ganti dan sesuaikan dengan gadget blog sobat.

"Selamat mencoba, semoga bermanfaat!"

Read more..