Tampil Cantik Dengan Menu Tab View

Menu Tab View,Tampil Cantik Dengan Menu Tab View,Tab View

gimana caranya bikin widget seperti Daftar Isi, Comment, Services dan Others yang disidebar atau di widget lainnya ??, kasih tahu doong,”

Menu Tab View bisa menghemat tempat di sidebar karena dalam satu widget bisa menyimpan beberapa menu sesuai kehendak kita , bukan itu saja tampilannyapun tampak cantik dan terkesan profesional . demo nya menyusul .. hehehee ..
langsung aj ..

1. Masuk ke Dashboard , Pilih Layout , lalu klik Edit HTML
2. Backup template dulu dengan Download Full Template
3. Kemudian cari kode ini ]]></b:skin>
4. Untuk memudahkan pencarian , pakai saja Ctrl +F , terus ketik kata yang dicari dikotak yang disediakan, lalu klik next.
5. Kemudian masukkan kode css berikut ini sebelum kode ]]></b:skin>

kode css nya:

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

6. Perhatikan text-text yang bercetak tebal, silahkan disesuaikan ya.
7. Selanjutnya pasang kode js berikut ini sebelum kode </head>

kode js nya:

<script src='http://japarus.xtgem.com/blogspot/tabview.js' type="text/javascript"/>

8. Jika sudah tinggal Save Templates
9. Selesai … untuk langkah pertama,
10. Langkah ke dua Silahkan masuk kemenu "Page Elements"
11. Klik "Add a Gadget" , pilih "HTML/Javascript" ,
12. Kemudian copy paste kode dibawah ini :

kode nya:

<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 260px;">

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

</div>
<div class="Pages" style="width: 256px; height: 270px;">
<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>

Catatan :

* Angka width: 260px;"> dan width: 256px; height: 270px;"> diatas adalah tinggi dan lebar tab view, silahkan disesuaikan

* kalau yang ini Adalah text Menu utama
<a>Menu 1</a>
<a>Menu 2</a>
<a>Menu 3</a>

* Kalau yang tab 1.1 sampai 3.3 adalah isi dari tab view tsb, kalau kurang perbanyak sendiri

13.

terakhir:

selesai ... slamat mancoba ..