Tutorial Blog : Membina Tabview

Banyak pertanyaan yang GB terima bagaimana untuk membina gadget atau widget "tabview" seperti yang terpapar di blog Kelab GB.

Di sini akan diberikan penerangan ringkas bagaimana untuk membinanya dan meletakkan di dalam blog.

Sekadar makluman pengatahuan asas HTML adalah berguna untuk memahami koding-kodingnya suapaya dapat mengelakkan kesilapan (namun ia tidaklah diperlukan sangat).

Cara membinanya mudah iaitu :


Pertama kena tambah sedikit koding di blog theme.

i) Buka Dashboard dan klik Layout
ii) Pilih Edit HTML dan klik kotak kecil "Expand Widget Templates" di sebelah kanan.
ii) Cari tanda ]]> (Gunakan fungsi Find yang terdapat di dalam browser anda)
iii) Sejurus sebelum koding itu,
iv) Masukkan koding berikut dan JANGAN LUPA MASUKKAN URL IMEJ LATABELAKANG di perkataan "masukkan url imej anda". Biarkan url atau alamat imej itu berada di dalam kurungan seperti begini:
background: url(http://www.apa-apa.com/imej.jpg) repeat-x;

div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
background: url(masukkan url imej anda) repeat-x;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 80px; ⁄* Width top main menu - Tab Buttons*⁄
text-align: center;
height: 24px; ⁄* Height top main menu - Tab Buttons*⁄
padding-top: 3px;
vertical-align: middle;
border: 1px solid #000; ⁄* Top Main menu border color *⁄
border-bottom-width: 0;
text-decoration: none;
font-family: "Times New Roman", Serif; ⁄* Top main menu font *⁄
font-weight: 900;

}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #F4F4F4; ⁄* Top main menu background color *⁄
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #A2ABB0; ⁄* Content Border color *⁄
border-top:0; font-size:90%;
overflow: hidden;
background:#000 url(masukkan url imej anda) no-repeat;
⁄* Content background color *⁄
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}

v) Setelah itu klik SAVE TEMPLATES
vi) dan beralih pula ke Dashboard anda semula, pilih Layout diikuti dengan Add A Gadget dan pilih HTML/JavaScript.

Di kotak yang telah disediakan, masukkan kod-kod berikut dengan menggantikan ayat-ayat yang anda ingin paparkan.

<center>
<div id="TabView" class="TabView">
<div style="width: 350px;" class="Tabs">
<a>TERKINI</a>
<a>KOTAK2</a>
<a>KOTAK3</a>
<a>KOTAK4</a>
</div>
<div style="width: 350px; height: 250px;" class="Pages">

<div class="Page">
<div class="Pad">
<br/><p><center>
<span style="FONT-WEIGHT: bold; font-size:175%;COLOR: rgb(255,0,0)">
BERITA TERKINI</span></center><br/>
<p><marquee onmouseover="this.scrollAmount=1"
direction="up" width="100%" onmouseout="this.scrollAmount=1" scrollamount="1" loop="true"> <span style="color: rgb(255, 255, 51);">

Ini kotak utama. Mesej akan diskrolkan
dari atas kebawah
Taipkan apa-apa di sini

</span></marquee></p>
<br/>
</p></div>
</div>
<div class="Page">
<div class="Pad">
<center><p>

Ini kotak kedua. Masukkan apa-apa di sini.

</p></center></div>
</div>

<div class="Page">
<div class="Pad">

<center>
<p>Ini kotak ketiga. Masukkan apa-apa di sini.</p>

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

<div class="Page">
<div class="Pad">

<center>
<p>Ini kotak keempat. Masukkan apa-apa di sini.</p>
</center>
</div>
</div>

</div>
</div>

<script type="text/javascript">
tabview_initialize('TabView');
</script>

Setelah siap, klik SAVE. Itu saja.
Selamat mencuba dan selamat berjaya.