>
tips dan trik, Tutorial

tips memasang widget menu tabview di blog

memasang menu tabview di blog tujuannya untuk menghemat ruang sidebar blog kita.karena dalam satu widget bisa terisi beberapa menu misalnya “recent post | recent comment |daftar link |dll” berada dalam satu widget saja.

selain menghemat ruang sidebar kita agar tidak terlalu panjang kebawah ,menu tabview ini juga berguna untuk memperindah tampilan blog kita, karena blog akan terlihat rapi dan bersih.

Menu Tab View_rajacolek.com

oke langsung saja ikut langkah2 berikut ini.

1. masuk dashboard >layout>edit html

2. cari code  ]]></b:skin>  lalu copy paste code berikut di atasnya.

 

/* Menu Tab View
———————————————– */
div.TabView div.Tabs {widht:100%;
padding-top: 0px;
height: 24px;
overflow: hidden;
}
/* Menu Utama */
div.TabView div.Tabs a {
float: left;
display: block;
width: 110px; /* ukuran lebar menu */
text-align: center;
height: 30px; /* ukuran tinggi menu */
padding-top: 7px;
margin-right:4px; /* jarak antarmenu */
vertical-align: middle;
border: 1px solid #ccc; /* warna border menu */
border-bottom-width: 0;
margin:0px;
padding: 5px 0;
font-family:Arial,Helvetica,sans-serif;
font-size:12px;
font-weight:bold;; /* besar hurup menu */
background-color: #4c4c4c; /* warna latar menu */
color: #FFFFFF; /* warna hurup menu */
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;
-webkit-border-top-left-radius:15px;
-webkit-border-top-right-radius:15px;
}
div.TabView div.Tabs a.Active {
background-color: #FFFFFF; /* warna background menu aktif */
color: #000000;
}
div.TabView div.Tabs a:hover {

 

background-color: #999999; /* warna background menu hover */

 

color: #FFFFCC;
font-weight: bold;
}
/* Kotak Utama */
div.TabView div.Pages {
clear: both;
border: 1px solid #CCC; /* warna border kotak utama */
overflow: hidden;
background:#FFFFFF; /* background kotak utama */
}
div.TabView div.Pages div.Page {
height: 100%;
padding: 7px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad {
padding: 5px 0px;
font-size: 12px; /* besar hurup kotak utama */
}

/* tabview css end */

 

3. kemudian pasang code berikut di bawah code <head>

<script src=’http://sites.google.com/site/amatullah83/js-indahnyaberbagi/tabview.js&#8217; type=”text/javascript”/>

4. silahkan tekan tombol preview/pratinjau dulu ,jika tidak ada pesan error berarti pemasangan script sudah benar  kemudia klik simpan

5.pasang code berikut ini di widget/sidebar blog anda.
<form action=”tabview.html” method=”get”>
<div id=”TabView”>
<div style=”width: 260px;”>

<a>Menu 1</a>
<a>Menu 2</a>
<a>Menu 3</a>

</div>
<div style=”width: 256px; height: 270px;”>
<div>
<div>

Tab 1.1 <br />
    Tab 1.2 <br />
    Tab 1.3 <br />

</div></div>
<div>
<div>

Tab 2.1 <br />
    Tab 2.2 <br />
    Tab 2.3 <br />

</div></div>
<div>
<div>

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>

 

NOTA:

– angka yang berwarna hijau  adalah ukuran lebar dan tinggi widget ( silahkan di sesuaikan dengan sidebar blog anda)

– code yang berwarna merah adalah judul dari menu tabview

– code yang berwarna biru adalah isi dari menu tabview. ( bisa anda isi dengan script recent comment | recen post dll terserah anda)

semoga tips memasang widget menu tabview ini bisa bermamfaat buat yang membutuhkan:D

selamat mencoba moga sukses.

About rajacolek blumbungan

tentang saya lihat aja di menu about yaa hehheehe

Discussion

7 thoughts on “tips memasang widget menu tabview di blog

  1. Waduuh. . .
    ribet sekali ya, Mas.😀

    yang benar tuh huruf, bukan hurup. .. 😆

    Posted by Idah Ceris | December 12, 2012, 3:31 am
  2. tabview ini untuk blogspot ya gan? klu untuk wordpress selghosting ada g gan? thx

    Posted by Portal informasi online | December 8, 2013, 3:40 pm
  3. thanks for share

    Posted by inforaja | September 15, 2013, 12:04 pm

Trackbacks/Pingbacks

  1. Pingback: tips memasang widget menu tabview di blog | hutasoit01's Blog - March 29, 2013

  2. Pingback: Tips memasang widget menu tabview di blog | To The Sky - September 12, 2013

berikan komentar pada artikel di atas.

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

TRANSLATE THIS BLOG

INGGRIS| KOREA| JERMAN| ARAB| SPANYOL| INDIA| JEPANG

cara pasang translate seperti ini klik DISINI

rajacolek

%d bloggers like this: