Admin Kamis, 17 Februari 2011 Categories:
Salam.....!!!

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; /*Lebar Menu Utama Atas*/
text-align: center;
height: 30px; /* Tinggi Menu Utama Atas */
padding-top: 3px;
vertical-align: middle;
border: 1px solid #BDBDBD; /* Warna border Menu Atas */
border-bottom-width: 0;
text-decoration: none;
font-family: "Verdana", Serif; /* Font Menu Utama Atas */
font-weight: bold;
color: #000; /* Warna Font Menu Utama Atas */
-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; /* Warna background Menu Utama Atas */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #BDBDBD; /* Warna border Kotak Utama */
overflow: hidden;
background-color: #E6E6E6; /* Warna 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;
}

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>
<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>
</div>
<div class="Page">
<div class="Pad">
Tab 2.1 <br />
Tab 2.2 <br />
Tab 2.3 <br />
</div>
</div>
<div class="Page">
<div class="Pad">
Tab 3.1 <br />
Tab 3.2 <br />
Tab 3.3 <br />
</div>
</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......!!!

Dapatkan Artikel Terbaru Dari Blog Ini Langsung Ke Email Anda


Enter your email address:


Delivered by FeedBurner


JIka artikel di atas bermanfaat untuk anda, silahkan tinggalkan komentar atau klik tombol Like/Suka di bawah ini


Sharing To Facebook



awesome comments

0 comments :

Posting Komentar

hostgator coupon Healthy Life