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.
Keterangan:
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.
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.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>.
5. Klik simpan Template.
# kode warna biru adalah kode-kode warna.
# Masukan judul Tab pada tulisan berwaana hijau.
# Masukan kode HTML widget pada tulisan warna ungu.
Tidak lengkap rasanya jika widget ini tidak dipadukan dengan :
- Cara membuat daftar artikel dengan 1 label
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.
Keterengan:
# kode warna merah adalah kode-kode ukuran,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 biru adalah kode-kode warna.
# Masukan judul Tab pada tulisan berwaana hijau.
# Masukan kode HTML widget pada tulisan warna ungu.
Tidak lengkap rasanya jika widget ini tidak dipadukan dengan :
- Cara membuat daftar artikel dengan 1 label
Last Words
Bagaimana? sangat mudah sekali bukan? Sekarang anda dapat melihat hasil dari kedua cara diatas. Jadi kesimpulannya, Saya mencoba yang terbaik untuk membuat tutorial ini sesederhana mungkin untuk dapat anda pahami. Jika Anda masih menghadapi masalah untuk Cara menghemat area blog dengan Multi Tab Widget. Maka jangan ragu untuk bertanya kepada saya. Tinggalkan komentar di bawah posting ini dan saya pasti akan membalas Anda jika ada waktu yang memungkinkan.
Sekian post tentang Cara menghemat area blog dengan Multi Tab Widget. Jangan lupa membaca post saya yang lainnya dengan membaca DAFTAR ISI. Maaf bila ada salah-salah kata, semoga tulisan ini dapat bermanfaat bagi anda. Tetap terhubung dengan Ujangyoyo karena akan ada postingan baru yang lebih menarik. Happy Blogging friends!
AD-BLOCKER DETECTED!
