Untuk menghemat sidebar pada blog teman-teman, mungkin ini salah satu cara yang sangat cocok untuk di coba. Dan cara ini saya sendiri menggunakannya pada blog saya ini, teman-teman bisa melihatnya pada bagian sidebar blog ini. Terdapat sebuah menu tab yang saya gunkan untuk memasang beberapa widget, hal ini saya lakukan unutk menghemat tempat di sidebar blog saya dan selain menghemat tempat saya juga menggunakanya agar sidebar saya gak kepanjangan karena widget yang terlalu banyak.
Kalo teman-teman berminat untuk mencobanya, silahkan ikuti langkah-langkah berikut ini.
1. Silahkan LogIn terlebih dahulu di blog teman-teman.
2. Masuk pada menu Design => Klik Edit HTML, biar lebih aman dan jaga-jaga kalu-kalu terjadi kesalahan silahkan Klik Download Template Lengkap, setelah download selesai jangan lupa beri centang Expand Template Widget.
3. Gunakan tombol Find (ctrl+f) unutk mencari kode</head> lalu letakkan kode di bawah ini tepat di atas kode </head>
<script type='text/javascript'>
//<![CDATA[
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>
4. Setelah itu cari kode berikut ]]></b:skin> lalu letakkan kode di bawah ini tepat di atas kode ]]></b:skin>
div.TabView div.Tabs
{
height: 30px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 98px; /**/
text-align: center;
height: 30px; /**/
padding-top: 3px;
vertical-align: middle;
border: 1px solid #BDBDBD; /**/
border-bottom-width: 0;
text-decoration: none;
font-family: "Verdana", Serif; /**/
font-weight: bold;
color: #000; /**/
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #E6E6E6; /**/
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #BDBDBD; /**/
overflow: hidden;
background-color: #E6E6E6; /**/
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}
5. Klik Save
6. Setelah semuanya selesai,, klik kembali menu Design/Rancangan, klik Tambah Gedget => pilih HTML/Javascript
7. Masukkan kode di bawah ini
<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 300px;">
<a>Tab 1</a>
<a>Tab 2</a>
<a>Tab 3</a>
</div> <a>Tab 2</a>
<a>Tab 3</a>
<div class="Pages" style="width: 300px; height: 300px;">
<div class="Page">
<div class="Pad">
Tab 1.1 <br />
Tab 1.2 <br />
Tab 1.3 <br />
</div> Tab 1.2 <br />
Tab 1.3 <br />
</div>
<div class="Page">
<div class="Pad">
Tab 2.1 <br />
Tab 2.2 <br />
Tab 2.3 <br />
</div> Tab 2.2 <br />
Tab 2.3 <br />
</div>
<div class="Page">
<div class="Pad">
Tab 3.1 <br />
Tab 3.2 <br />
Tab 3.3 <br />
</div> Tab 3.2 <br />
Tab 3.3 <br />
</div>
</div>
</div>
</form>
<script type="text/javascript">
tabview_initialize('TabView');
</script>
Pada kode yang berwarna hijau di atas, silahkan ganti dengan kode widgwt yang ingin anda tempatkan.
Pada kode yang berwarna orange, silahkan ganti dengan judul dari menu anda.
Pada kode yang berwarnah merah, silahkan teman-teman ganti dengan ukuran yang sesuai menurut anda
8. Selesai
Ok,,, sekarang anda bisa menghemat tempat pada sidebar di blog anda.
Selamat Mencoba......!!!
