23 March 2014

Cara menghemat area blog dengan Multi Tab Widget

01:35    6 comments
بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم


 
 
Lama sekali saya tidak membuat tutorial mengenai pengembangan blog. Oleh karena itu berhubung ada sahabat yang kemarin menanyakan maka akan saya bahas di sini. Pertanyaan yang muncul dari teman saya adalah seputar permasalahan yang sering terjadi pada blogger yakni kurangnya lahan untuk membuat widget baru ataupun widget yang berantakan. Ketika kegiatan mendesign ini membuat beberapa diantara kita kesulitan maka biasanya semangat untuk mendalami dunia blogger mulai terbiaskan.


Oleh karena itu untuk menyelesaikan permasalahan itu sebaiknya anda mengikuti tutorial yang coba saya bahas 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.
Untitled3

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>

 Keterangan:
# kode warna merah adalah kode-kode ukuran,
# kode warna biru adalah kode-kode warna.
# Masukan judul Tab pada tulisan berwarna 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
Description: Cara menghemat area blog dengan Multi Tab Widget Rating: 4.5 Reviewer: petanimilenial ItemReviewed: Cara menghemat area blog dengan Multi Tab Widget

6 komentar:

  1. UnknownAugust 25, 2014 at 6:03 PM

    I read this blog, very nice article and content..i like this page.
    Panasonic laptops

    ReplyDelete
  2. AnonymousOctober 13, 2015 at 4:33 AM

    nice post gan.
    Sangat bermanfaat
    Kunjunngi balik ya www.candrablog.cf

    ReplyDelete
  3. AnonymousOctober 30, 2018 at 6:27 PM

    Thanks for sharing these tips. They are great for people who have their own blog. The live writing services can help with ideas for writing if you need any. Great post, thanks for sharing!

    ReplyDelete
  4. Sophie GraceJuly 6, 2019 at 9:30 AM

    Great Blog. Thanks for sharing such a valuable information. I really need it and also want to suggest it to my friends also. picbear

    ReplyDelete
  5. Bang Domath IDDecember 13, 2022 at 2:57 PM

    Mampir ke www.yukinoshita.web.id

    ReplyDelete
  6. yarenJune 5, 2023 at 8:33 PM

    canlı sex hattı
    jigolo arayan bayanlar
    P5QL

    ReplyDelete