11 January 2011

Memasang Tab Widget pada Sidebar

Dalam seminggu ini, Sop agak pening kerana tercari-cari Tab Widget yang sesuai. Banyak juga yang telah Sop cuba, ada yang tidak sesuai dan ada juga berfungsi langsung. Cari punya cari, hari ini baru selesai pencarian tersebut kerana widget yang digunakan sekarang adalah yang terbaik. Sop jumpa tutorial ini di sini.

Kenapa hendak gunakan Tab Widget?
Tujuan Sop memasukkan Tab Widget ialah untuk menjimatkan ruang sidebar. Agak rimas apabila melihat sidebar terlalu jauh ke bawah. Dengan menggunakan Tab Widget, sidebar boleh dimasukkan dengan dengan lebih banyak widget. Berbeza dengan template sebelum ini, Sop menggunakan 2 sidebar yang membolehkan lebih banyak widget boleh dimasukkan.

Tutorial untuk memasang Tab Widget adalah seperti berikut:

1. Log masuk ke Blogger
2. Pilih Design -> Page Element
3. Klik Add a Gadget -> HTML/Javascript danu masukkan kode dibawah:
<style type="text/css">
div.TabView div.Tabs a
{
float: left;
display: block;
width: 80px; /* Lebar Kotak Tab */
height: 22px; /* Tinggi Menu Utama Atas */
text-align: center; /* Posisi Teks Menu Tab */
margin: 5px 0px 0px 3px; /* Posisi Kotak Tab */
background-color: #000; /* Warna background Kotak Tab */
padding-top: 2px; /* Spasi Atas */
border: 1px solid #ffffff; /* Warna border kotak Tab */
border-bottom: 1px solid #ccc; /*Warna border bawah kotak tab */
font-family: "Arial, Helvetica, sans-serif", Arial; /* Font Kotak Tab */
font-weight: 900; /* Ketebalan Teks kotak tab */

}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #736F6E; /* Warna background utama kotak tab */ }
div.TabView div.Pages
{
clear: both;
border: 1px solid #cccccc; /* Warna border Kotak Konten */
overflow: hidden;
background-color: #ffffff; /* Warna background Kotak konten */
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 5px; /* Jarak teks dalam kotak content */
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}

</style>

<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 385px;" class="Tabs">
<a><span style="color: #ffffff">Tab 1</span></a>
<a><span style="color: #ffffff">Tab 2</span></a>
<a><span style="color: #ffffff">Tab 3</span></a>
</div>
<div style="width: 300px; height: 180px;" class="Pages">

<div class="Page">
<div class="Pad">
konten atau kod HTML 1
</div>
</div>

<div class="Page">
<div class="Pad">
konten atau kod HTML 2</div>
</div>

<div class="Page">
<div class="Pad">
konten atau kod HTML 3</div>
</div>
</div></div></form>

<script style="text/javascript" src="http://hermanblog.googlecode.com/files/tab_view.js"></script>
<script type="text/javascript">tabview_initialize('TabView');
</script>
4. Simpan dan selesai.
Anda boleh mengubah kod-kod di atas berdasarkan taging yang dibuat.
Selamat berjaya..


EmoticonEmoticon