[SHARE] Cara Membuat Tab View Widget Pada Sidebar Blog

Garyu78 Fri Apr 01, 2011 3:36 pm

Sesuai judul, Saya akan share tutorial cara membuat tab view widget pada sidebar. Mungkin sobat pasti pernah merasakan menggunakan templates yang buat wadah widgetnya agak sempit dan tidak bisa dimuat jika dipasang satu persatu. Inilah solusinya, dengan tab view widget Anda bisa mempermudah ruang untuk widget Anda, dan tidak akan boros halaman.

Cara ini sudah banyak dilakukan oleh beberapa blogger yang templatesnya kurang memadai untuk widget, jika Anda berminat untuk menggunakannya silahkan ikuti tutorial berikut ini.

Langkah Pertama

Login ke akun Blogger kamu.
Dari halaman dashboard, pilih Edit HTML.
Pada halaman Edit HTML, cari kode ]]></b:skin> pada script template blog kamu. Tekan Control F untuk mencarinya.
Kopikan kode CSS berikut (gunakan Control C) dan letakkan di atas kode ]]></b:skin> tersebut.

/* Menu Tab View

----------------------------------------------- */
div.TabView div.Tabs {
padding-top: 0px;
height: 24px;
overflow: hidden;
}

/* Menu Utama */
div.TabView div.Tabs a {
float: left;
display: block;
width: 80px; /*ukuran lebar tabmenu*/
text-align: center;
height: 24px; /*ukuran tinggi tabmenu*/
padding-top: 3px;
margin-right:4px; /*jarak antartabmenu*/
vertical-align: middle;
border: 1px solid #CCC; /*warna border menu*/
border-bottom-width: 0;
font-family: "Arial", Times New Roman, Serif; /*jenis hurup menu*/
font-size: 12px; /*besar hurup menu*/
letter-spacing: -1px;
background-color: #A4A4A4; /*warna latar menu*/
color: #FFFFFF; /*warna hurup menu*/
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
-webkit-border-top-left-radius:10px;
-webkit-border-top-right-radius:10px;
}

div.TabView div.Tabs a.Active {
background-color: #888888; /*warna background menu aktif*/
color: #FFFFFF;
}

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:url("http://sites.google.com/site/ruangsc/image/bgtabview.gif"); /*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;
font-size: 12px; /*besar hurup kotak utama*/
}

Pada bagian yang diberi tanda keterangan, kamu dapat mengubahnya sesuai dengan yang diinginkan, seperti pada ukuran, warna maupun jenis hurup.
Setelah itu letakkan sumber script berikut di bawah ]]></b:skin>

<script src="http://my-project-tabview-tab.googlecode.com/files/tabview.js" type="text/javascript"/>

Simpanlah hasil editing tersebut.

Langkah Kedua

Pilih tab Elemen Halaman (Page Element).
Klik pada bagian Tambah Gadget dan pilih HTML/JavaScript.
Kopikan script berikut dan letakkan pada kotak Content yang tersedia:

<form action="tabview.html" method="get">
<div id="TabView" class="TabView">

<div style="width: 100%;" class="Tabs">
<a title="Keterangan Menu 1">Menu 1</a>
<a title="Keterangan Menu 2">Menu 2</a>
<a title="Keterangan Menu 3">Menu 3</a>
<a title="Keterangan Menu 4">Menu 4</a>
</div>

<div style="width: 100%; height: 200px;" class="Pages">



<div class="Page"><div class="Pad">
Isi Menu 1.1<br/>
Isi Menu 1.2<br/>
Isi Menu 1.dst<br/>
</div></div>





<div class="Page"><div class="Pad">
Isi Menu 2.1<br/>
Isi Menu 2.2<br/>
Isi Menu 2.dst<br/>
</div></div>





<div class="Page"><div class="Pad">
Isi Menu 3.1<br/>
Isi Menu 3.2<br/>
Isi Menu 3.dst<br/>
</div></div>





<div class="Page"><div class="Pad">
Isi Menu 4.1<br/>
Isi Menu 4.2<br/>
Isi Menu 4.dst<br/>
</div></div>



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

<script type="text/javascript" src="http://my-project-tabview-tab.googlecode.com/files/tabview-tab.js"></script>

Pada tulisan yang berwarna merah tebal dapat kamu ubah disesuaikan dengan kebutuhan. Milsalnya pada ukuran width (lebar) dan height (tinggi), dapat kamu gunakan ukuran % atau pixel (px) yang disesuaikan dengan lebar sidebar blog kamu. Begitupun dengan judul Menu dan Isi Menu dapat kamu buat sendiri sesuai keinginan.
Selain itu kamu juga bisa menambahkan menu-menu lain (lebih dari 4) asalkan lebar sidebar blog kamu mencukupi. Atau bisa juga mengakalinya dengan cara memperkecil ukuran lebar menu pada script yang tadi diletakkan pada HTML template blog kamu.
Simpan hasil kerjaan kamu dan lakukan pratinjau (preview) untuk melihat hasilnya.

Sumber

Threadnya Garyu78

Spoiler:

Vavalent'ss Mon Apr 04, 2011 9:37 pm

Top Share Gan

**[FDs]MOD_Angga** Tue Apr 05, 2011 1:34 pm

SS nya kalo dah jadi kayak gimana gan ?

Garyu78 Fri Apr 08, 2011 11:00 pm

Vavalent'ss wrote:Top Share Gan

thanks gan, jangan lupa cendolnya ya.

Mr. Noor™ wrote:SS nya kalo dah jadi kayak gimana gan ?

Kayak gini gan ..
[SHARE] Cara Membuat Tab View Widget Pada Sidebar Blog Tabview

klo mw lihat yg bgus lg lihat widget di blog Saya ..
[You must be registered and logged in to see this link.]

umar_abhe Sun May 08, 2011 8:25 pm

Garyu78 wrote:
Vavalent'ss wrote:Top Share Gan
thanks gan, jangan lupa cendolnya ya.

Mr. Noor wrote:SS nya kalo dah jadi kayak gimana gan ?

Kayak gini gan ..

klo mw lihat yg bgus lg lihat widget di blog Saya ..
[You must be registered and logged in to see this link.]

,.wah bagus gan ,.,widgetnya ,.,gimana tuh ,., Bingung

BlackJosh Sun Jun 12, 2011 9:56 pm

maap gan tab view tu gimana toh ? maklum newbie . hehe

Ga Jelas

sama drop down menu beda gk ?

ahlamyusuf Mon Jun 13, 2011 12:48 am

udd tau dari [You must be registered and logged in to see this link.] tapi kalau pake weebly gampang kalau mau bikin gituan mah pake weebly.com aja mantap!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!