Saturday 25 December 2010

Tips Blogger | Memasang Widget Menu Tab View Tiga Kolom Di Sidebar

C

oba hitung berapa widget yang terpasang di sidebar Blog sobat! Apakah sobat ingin menambah daftar widget yang baru di sidebar Blog, wah tentunya sidebar Blog akan menjadi semakin panjang dan kurang nyaman dilihat. Untuk mengakali masalah ini sobat dapat memanfaatkan widget khusus yang bernama Menu Tab View 3 kolom di sidebar. Dengan Menu Tab view 3 kolom ini sobat dapat menghemat banyak space di sidebar Blog. Sehingga tampilan blog menjadi lebih cantik dan nyaman dipandang.


Membuat menu dengan tab view di sidebar ini memerlukan kode HTML yang lumayan panjang dan agak ribet, jadi sebaiknya simak baik–baik tutorial ini sebelum memulainya dan yang paling penting jangan lupa untuk backup template Blog terlebih dahulu.

Mari kita Mulai :



1). Login ke Akun Blogger sobat >> klik Rancangan/Design >> klik Edit HTML, beri tanda contreng pada kotak bertuliskan Expand Template Widget lalu jangan lupa klik terlebih dahulu pada tulisan Download Template Lengkap untuk membackup template blog sobat.

2). Cari kode yang bernama </head> , untuk lebih mudah mendapatkannya gunakan fasilitas search pada internet Browser dengan cara menekan tombol F3 lalu masukan kode yang diinginkan

3). Setelah kode </head> ketemu, kemudian langsung ganti dengan kode di bawah ini:

<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>
</head>



4). Setelah itu cari kode ]]></b:skin> dan langsung ganti dengan kode di bawah ini :

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;
}
]]></b:skin>



5). Kemudian simpan template sobat!

6). Langkah selanjutnya, kembali klik Rancangan/Design >> klik Add Gadget/Tambah Gadget >> pilih yang HTML/Javascript. Berilah judul pada kolom HTML/Javascript sesuai yang diinginkan dan masukan kode di bawah ini ke dalam content HTML/Javascript

<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>



7). Kemudian Simpan Widget yang sudah sobat buat tadi.

NB.



= Kode yang berwarna BIRU silahkan sobat isi dengan judul - judul dari menu
= Berwarna MERAH isi dengan menu. (Sobat bisa menambahkan link, gambar, banner, dll.)

Artikel Terkait:



Languages : English French German Spain Italian Dutch Russian Japanese Korean Arabic Chinese Simplified


11 komentar:

Unknown said...

makasih bang telah berkunjung ke blog ane, sekali-sekali kasih masukan...mahesa (makin hebat saja)ini blog :))

masmud said...

wah mantab sekali gan infonya.minta ijin nyedot ilmunya ya...salam kenal

Anonymous said...

thank gan atas artikelnya.....

Anonymous said...

thanks atas infonya gan

Orange County lawyer bankruptcy said...

It was a very blog beautiful and interesting blog really. The template you used is having a very attractive color. keep it up

Web Design Horsham said...

It's a tough call between these two phones, both have some great features. Although one stands out in my mind over the other....

EG Heat said...

Good work! I always like to leave comments whenever I see something unusual or impressive. I think we must appreciate those who do something especial. Keep it up, thanks

toko bunga online said...

Kenapa tab view di blog saya, jadi memperlambat loading

obat disfungsi ereksi said...

wah banyak juga scripnya izin copy ya sob..

togel said...

halo semuanya. ikut nimbrung diskusi ya. Menu tab di blog memang bikin tampilan oke banget

Konveksitas Selempang said...

you are in reality a excellent webmaster. The website loading velocity
is amazing. It sort of feels that you’re doing any distinctive trick.
Moreover, The contents are masterpiece. you have performed a great activity in this subject!
Visit my site: Konveksi Tas Selempang

:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Post a Comment

loading...