Assalamualaikum.... <form action="tabview.html" method="get"> <a>Tajuk tab 1</a> </div> <div class="Page"> <div style="text-align: center;"> <a href="link 1">text link 1</a> </div> <div class="Page"> <div style="text-align: center;"> <a href="link 1">text link 1</a> <div class="Page"> <div style="text-align: center;"> <a href="link 1">text link 1</a> </div> </div> <script type="text/javascript">
Terlebih dahulu saya ingin mengucapkan salam Maulidur Rasul kepada semua umat islam di seluruh Malaysia. Sesungguhnya banyak peristiwa penting yang berlaku di bulan ini (Rabiul Awal). Antaranya ialah kelahiran junjungan besar kita nabi Muhammad S.A.W yang menjadi penyuluh sekalian alam dan sebagai contoh dan ikutan untuk semua umat manusia di muka bumi ciptaan Allah ini, seperti mana Firman Allah dalam Surah Al-Ahzab ayat ke 21:
"Sesungguhnya, telah ada bagi kamu pada diri Rasulullah itu contoh ikutan yang baik bagimu, (iaitu) orang yang sentiasa mengharapkan (keredhaan) Allah dan (balasan baik) hari akhirat, serta dia pula banyak menyebut dan mengingati Allah (dalam masa susah dan senang)".
Suri teladan tersebut bukan sahaja diperolehi selepas baginda menerima wahyu pertama, malah kehidupan baginda sejak sebelum diutus menjadi Nabi lagi.
Kita dapat mengetahui segalanya dari Nabi Muhammad S.A.W sebab kesemua pakej lengkap perjalanan seorang manusia dan seorang pejuang kebenaran ada pada Muhammad bin Abdullah yang satu ini.
Melalui baginda Muhammad, kita dapat mengetahui gaya muamalah atau cara berinteraksi dengan para isterinya. Kita akan tahu seluruh kehidupannya dengan lebih terperinci sebab peribadi baginda yang terbuka dan telus jujur. Menjadi tatapan yang senang buat semua orang berjumpa dan mendengar perihal baginda.
Begitulah keindahan peribadi mulia junjungan besar kita Muhammad S.A.W. yang kita cintai.
Tapi kat sini saya bukan nak cerita pasal Maulidr Rasul hehehe..... saya ada terima email dari saudara Tiong, beliau bertanya kepada saya bagaimana hendak buat tab view. Apa tab view???... Tab view tu spt yang ada di blog saya di atas....
Sebelum anda mencuba trik ini diingatkan adalah lebih baik anda backup dulu template anda. cara nak backup template sila rujuk posting yang lepas.
1. Login ke blogger dan pilih menu "Layout --> Edit HTML".
2. Kemudian cari kod ini ]]></b:skin>
3. Kemudian copy/paste kod berikut ini sebelum kod ]]></b:skin> div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: ; /* Lebar Menu Utama Atas */ text-align: center;
height: ; /* Tinggi Menu Utama Atas */
padding-top: 3px;
vertical-align: middle;
border: 1px solid ; /* Warna border Menu Atas */
border-bottom-width: 0;
text-decoration: none;
font-family: , Serif; /* Font Menu Utama Atas */
font-weight: 900;
color: ; /* Warna Font Menu Utama Atas */
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: ; /* Warna background Menu Utama Atas */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid ; /* Warna border Kotak Utama */
overflow: hidden;
background-color: ; /* Warna 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;
}
4. Perhatikan text-text yang berkedip. ia merupakan keterangan untuk Tab View anda. seperti ukuran, warna dll. Untuk mengetahui kod2 warna boleh rujuk kepada kod warna di bawah:
5. Langkah seterusnya copy/paste kod ini sebelum kod <head> <script src='http://superinhost.com/trikblog/tabview.js' type='text/javascript'/>
6. Kemudian "save" (penting).
7. Kemudian pergi ke menu "Page Elements".
8. Pilih "Add a Gadget" --> "HTML/Javascript" (letakkan Tab View anda mengikut kesesuaian dan kreativiti anda).
9. Selepas itu copy/paste script ini kedalam kotak "content" :
<div id="TabView" class="TabView">
<div style="width: 275px;" class="Tabs">
<a>Tajuk tab 2</a>
<a>Tajuk tab 3</a>
<div style="width: 275px; height: 260px;" class="Pages">
<div class="Pad">
<br/>
<br/>
<a href="link 2">text link 2</a>
<br/>
<br/>
<a href="link 3">text link 3</a>
<br/>
<br/>
</div>
</div>
<div class="Pad">
<br/>
<br/>
<a href="link 2">text link 2</a>
<br/>
<br/>
<a href="link 3">text link 3</a>
<br/>
<br/>
</div>
</div>
</div>
<div class="Pad">
<br/>
<br/>
<a href="link 2">text link 2</a>
<br/>
<br/>
<a href="link 3">text link 3</a>
<br/>
<br/>
</div>
</div>
</div>
</form>
tabview_initialize('TabView');
</script>
Kemudian jangan lupa save dan lihat adakah tab view anda telah dipaparkan atau jadi benda lain... takut nanti abisshhh hancusss... mukhlisinn...hahaha....
4
comments
4 comments for �Membuat Tab View�
Leave a Reply
muraisenja
March 10, 2009 at 10:33 AM
terlebih dahulu saya mohon maaf kerana tidak dapat menyiarkan komen pelawat yg terdahulu, posting ini terpaksa saya edit semula utk kesesuaian pada blog ini tetapi kandungannya masih sama tiada perubahan.
harap maklum
Zai
April 13, 2009 at 9:07 AM
salam,bole tnye ckit x?dekat tabview yg muraisenja punye brlainan ckit di kotak MENU UTAMA nya..Kotak menunye tidak petak,tetapi bulat diatasnye..dh lame saye cri,camne nk buat tuh?
Zai
April 18, 2009 at 10:21 AM
hu..hu..xde respon..
muraisenja
April 24, 2009 at 1:40 AM
sori zai sy sibuk skit... tab view yg bulat tu kena adjust skit la kod dia.... nanti saya emailkan...bagi alamat email