Cara menghemat area blog dengan Multi Tab Widget

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم

Permasalahan yang sering terjadi pada blogger adalah kurangnya lahan untuk membuat widget baru ataupun widget yang berantakan. Untuk menyelesaikan permasalahan itu ada baiknya anda mengikuti tutorial ini.  Multi Tab Widget adalah penggabungan beberapa Widget pada satu kolom dengan Tab view. Multi Tab widget ini sangat berguna jika Blog anda membutuhkan terlalu banyak widget. Anda bisa menggabungkan widget-widget tersebut pada satu kolom dengan Tab diatasnya. Jadi Anda tidak perlu menyediakan area yang luas untuk widget yang banyak. 

Ada dua cara untuk membuat multi tab ini. Jika anda tertarik, anda bisa ikuti step by stepnya dibawah ini:

Cara Pertama

1. Masuk ke Blogger anda. 2. Template > Edit HTML.
3. SImpan kode berikut diatas kode </head>

<script src="http://code.jquery.com/jquery-2.0.2.min.js"></script> <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

4. Klik simpan Template.

5. Selanjutnya masuk ke bagian Tata Letak / layout.
6. Klik Tambah Gadget di posisi yang anda inginkan.
7. Pilih HTML/Javascript.
8. Masukan kode berikut.

.blogtabs {padding: 0px !important;border: 0 solid #bbb;}.blogtabs h2 {float: left;margin: 0 2px 4px 0;font-size: 12px;padding: 3px 5px;border: 1pxsolid #bbb;overflow: hidden;position: relative;background: #e0e0e0;cursor:pointer;}
html .blogtabs h2.active {background: #fff;}
.blogtabs .widget-content {border: 1px solid #bbb;padding: 10px;background:#fff;clear:both;margin:0;}
.btab, #showtabs {display:none;}
</style><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script type="text/javascript" src="http://ayriyzone.googlecode.com/files/SimpleTabViewJQuery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#showtabs').simpleBlogTab ({organictabs: 3});
});
</script>
<div id="showtabs"></div>

Keterangan:

#  kode berwarna biru adalah kode-kode warna,

#  kode berwarna hijau adalah kode-kode ukuran yang bisa sobat ubah. 

#  kode ({organictabs: 3}) adalah jumlah tab yang akan digabungkan

9.   Klik Simpan. 10. Letakan widget-widget yang akan digabungkan tepat di bawah widget yang baru saja dibuat.

Cara Kedua

1. Masuk ke Blogger anda.

2. Template > Edit HTML.
3. SImpan kode berikut diatas 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. Simpan kode berikut 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 Atas */
text-align: center;
height: text-align: center;height: 30px; /* Tinggi Menu Atas */
padding-top: 3px;
vertical-align: middle;
border: 1px solidpadding-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: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:-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 }div.TabView div.Pages{clear: both;border: 1px solid #BDBDBD; /* Warna border Kotak Utama */
overflow: hidden;
background-color: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;
}}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 simpan Template.

6. Selanjutnya masuk ke bagian Tata Letak / layout.
7. Klik Tambah Gadget di posisi yang anda inginkan.
8. Pilih HTML/Javascript.
9. Masukan kode berikut.

<form action="tabview.html" method="get"><div class="TabView" id="TabView"><div class="Tabs" style="width: 300px;"><a>Menu 1</a>
<a><a>Menu 2</a>
<a><a>Menu 3</a>
</div>
<div class="Pages" style="width: </div><div class="Pages" style="width: 300px; height: 250px;">
<div class="Page">
<div class="Pad">
Letakkan konten menu 1 disini<div class="Page"><div class="Pad">Letakkan konten menu 1 disini</div></div>
<div class="Page">
<div class="Pad">
Letakkan konten menu 2 disini<div class="Page"><div class="Pad">Letakkan konten menu 2 disini</div></div>
<div class="Page">
<div class="Pad">
Letakkan konten menu 3 disini<div class="Page"><div class="Pad">Letakkan konten menu 3 disini</div></div>
</div>
</div>
</form>
<script type="text/javascript">
tabview_initialize('TabView');
</script></div></div></form><script type="text/javascript">tabview_initialize('TabView');</script>

Keterengan:

# kode warna merah adalah kode-kode ukuran,
# kode warna biru adalah kode-kode warna.
# Masukan judul Tab pada tulisan berwaana hijau. 
# Masukan kode HTML widget pada tulisan warna ungu.