Sep 12, 2008

Tab View Untuk Pautan Blog


Rakan bloggers iaitu AliyaAnnuar telah meninggalkan soalan di kotak jeritan iaitu tentang kotak pautan penulis yang memaparkan senarai blog / laman web sahabat² yang lain. Justeru, topik kali ini akan mengajar cara² untuk memasukkan kotak tersebut ke dalam blog.


Berikut ialah cara²nya.
  • Login.
  • Pilih Layout - Edit HTML.
  • Download Full Template sebelum mengedit blog.
  • Cari </head> dan letakkan kod ini sebelumnya.

<script src='http://ladyqistina.googlepages.com/tabview.js' type='text/javascript'/>

  • Kemudian, cari pula ]]></b:skin> dan letakkan kod dibawah ini sebelumnya.

/* Awal TAB VIEW 1*/
div.TabView div.Tabs
{
overflow: hidden;
}
div.TabView div.Tabs a
{
background: #eeeeee ;
background-repeat: no-repeat;
float: left;
display: block;
width: 18px; /* Lebar Menu Utama Atas */
text-align: center;
height: 18px; /* Tinggi Menu Utama Atas */
padding-top: 0px;
vertical-align: middle;
border: 1px solid #999999;
margin-top: 2px;
margin-left: 3px;
margin-right: 3px;
border-bottom: 1px solid #999999;
border-bottom-width: 1px;
text-decoration: none;
font-family: "Times New Roman", Serif; /* Font Menu Utama Atas */
font-weight: 900;
color: #fff; /* Warna Font Menu Utama Atas */
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #FFFFFF; /* Warna background Menu Utama Atas */
background: #FFFF00; /* Warna Background Mouse Hover */
background-repeat: no-repeat;
}
div.TabView div.Pages
{
clear: both;
margin-top: 5px;
padding: 4px;
border: 4px double #999999; /* Warna border Kotak Utama */
overflow: hidden;
background-color: #FFFFFF; /* 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: 1px 1px;
}
/* Akhir TAB VIEW 1*/

  • Save template.
  • Akhir sekali, pergi ke Layout - Page Element - Add a Gadjet - HTML / Javascript. Tampal semua kod A - Z dibawah ini ke dalamnya.

<left> <table border="0"><tbody>
<tr><td><form action="tabview.html" method="get"><div id="TabView" class="TabView"><div style="width: 335px;" class="Tabs"><a href=""><font color="#666666"><b>A</b></font></a> <a href=""><font color="#666666"><b>B</b></font></a> <a href=""><font color="#666666"><b>C</b></font></a> <a href=""><font color="#666666"><b>D</b></font></a> <a href=""><font color="#666666"><b>E</b></font></a> <a href=""><font color="#666666"><b>F</b></font></a> <a href=""><font color="#666666"><b>G</b></font></a> <a href=""><font color="#666666"><b>H</b></font></a> <a href=""><font color="#666666"><b>I</b></font></a> <a href=""><font color="#666666"><b>J</b></font></a> <a href=""><font color="#666666"><b>K</b></font></a> <a href=""><font color="#666666"><b>L</b></font></a> <a href=""><font color="#666666"><b>M</b></font></a> <a href=""><font color="#666666"><b>N</b></font></a> <a href=""><font color="#666666"><b>O</b></font></a> <a href=""><font color="#666666"><b>P</b></font></a> <a href=""><font color="#666666"><b>Q</b></font></a> <a href=""><font color="#666666"><b>R</b></font></a> <a href=""><font color="#666666"><b>S</b></font></a> <a href=""><font color="#666666"><b>T</b></font></a> <a href=""><font color="#666666"><b>U</b></font></a> <a href=""><font color="#666666"><b>V</b></font></a> <a href=""><font color="#666666"><b>W</b></font></a> <a href=""><font color="#666666"><b>X</b></font></a> <a href=""><font color="#666666"><b>Y</b></font></a> <a href=""><font color="#666666"><b>Z</b></font></a>

</div><div style="width: 300px; height: 100px;" class="Pages"><div class="Page"><div class="Pad"><table border="0"><a href="#">A</a> <a href="#">A</a> <a href="#">A</a> <a href="#">A</a> </table></div></div>

<div class="Page"><div class="Pad"><table border="0"><a href="#">B</a> <a href="#">B</a> <a href="#">B</a> <a href="#">B</a> </table></div></div>

<div class="Page"><div class="Pad"><table border="0"><a href="#">C</a> <a href="#">C</a> <a href="#">C</a> <a href="#">C</a> </table></div></div>

<div class="Page"><div class="Pad"><table border="0"><a href="#">D</a> <a href="#">D</a> <a href="#">D</a> <a href="#">D</a> </table></div></div>

<div class="Page"><div class="Pad"><table border="0"><a href="#">E</a> <a href="#">E</a> <a href="#">E</a> <a href="#">E</a> </table></div></div>

<div class="Page"><div class="Pad"><table border="0"><a href="#">F</a> <a href="#">F</a> <a href="#">F</a> <a href="#">F</a> </table></div></div>

<div class="Page"><div class="Pad"><table border="0"><a href="#">G</a> <a href="#">G</a> <a href="#">G</a> <a href="#">G</a> </table></div></div>

<div class="Page"><div class="Pad"><table border="0"><a href="#">H</a> <a href="#">H</a> <a href="#">H</a> <a href="#">H</a> </table></div></div>

<div class="Page"><div class="Pad"><table border="0"><a href="#">I</a> <a href="#">I</a> <a href="#">I</a> <a href="#">I</a> </table></div></div>

<div class="Page"><div class="Pad"><table border="0"><a href="#">J</a> <a href="#">J</a> <a href="#">J</a> <a href="#">J</a> </table></div></div>

<div class="Page"><div class="Pad"><table border="0"><a href="#">K</a> <a href="#">K</a> <a href="#">K</a> <a href="#">K</a> </table></div></div>

<div class="Page"><div class="Pad"><table border="0"><a href="#">L</a> <a href="#">L</a> <a href="#">L</a> <a href="#">L</a> </table></div></div>

<div class="Page"><div class="Pad"><table border="0"><a href="#">M</a> <a href="#">M</a> <a href="#">M</a> <a href="#">M</a> </table></div></div>

<div class="Page"><div class="Pad"><table border="0"><a href="#">N</a> <a href="#">N</a> <a href="#">N</a> <a href="#">N</a> </table></div></div>

<div class="Page"><div class="Pad"><table border="0"><a href="#">O</a> <a href="#">O</a> <a href="#">O</a> <a href="#">O</a> </table></div></div>

<div class="Page"><div class="Pad"><a href="#">P</a> <a href="#">P</a> <a href="#">P</a> <a href="#">P</a> </div></div>

<div class="Page"><div class="Pad"><table border="0"><a href="#">Q</a> <a href="#">Q</a> <a href="#">Q</a> <a href="#">Q</a> </table></div></div>

<div class="Page"><div class="Pad"><a href="#">R</a> <a href="#">R</a> <a href="#">R</a> <a href="#">R</a> </div></div>

<div class="Page"><div class="Pad"><table border="0"><a href="#">S</a> <a href="#">S</a> <a href="#">S</a> <a href="#">S</a> </table></div></div>

<div class="Page"><div class="Pad"><table border="0"><a href="#">T</a> <a href="#">T</a> <a href="#">T</a> <a href="#">T</a> </table></div></div>

<div class="Page"><div class="Pad"><table border="0"><a href="#">U</a> <a href="#">U</a> <a href="#">U</a> <a href="#">U</a> </table></div></div>

<div class="Page"><div class="Pad"><table border="0"><a href="#">V</a> <a href="#">V</a> <a href="#">V</a> <a href="#">V</a> </table></div></div>

<div class="Page"><div class="Pad"><table border="0"><a href="#">W</a> <a href="#">W</a> <a href="#">W</a> <a href="#">W</a> </table></div></div>

<div class="Page"><div class="Pad"><table border="0"><a href="#">X</a> <a href="#">X</a> <a href="#">X</a> <a href="#">X</a> </table></div></div>

<div class="Page"><div class="Pad"><a href="#">Y</a> <a href="#">Y</a> <a href="#">Y</a> <a href="#">Y</a> </div></div>

<div class="Page"><div class="Pad"><a href="#">Z</a> <a href="#">Z</a> <a href="#">Z</a> <a href="#">Z</a> </div></div>

<script type="text/javascript">
tabview_initialize('TabView');
</script> </div></div></form></td></tr>
</tbody></table></left>


Contoh untuk mengisi senarai blog /laman web adalah seperti berikut :-

<div class="Page"><div class="Pad"><table border="0"><a href="http://eriyzaqistina.tk/">Eriyza</a> <a href="#">E</a> <a href="#">E</a> <a href="#">E</a> </table></div></div>

Tanda # ditukar dengan alamat blog = http://eriyzaqistina.tk/
Abjad E pula ditukar dengan nama pemilik blog = Eriyza


Antara bahagian yang boleh diubahsuai ialah :-
Warna latarbelakang, tulisan, kotak = #66666, #FFFFFF dan lain².
Saiz width (lebar) dan height (tinggi) juga boleh ditukar.

Selamat mencuba. Semoga berhasil.

Sumber : Ien

28 Comment

cHeRyNa PiReS Fri Sep 12, 04:57:00 PM

waaaa...lawa...tp aku tak tau ade mase ke tidak...sbb kena masukkan link satu persatu kan?tak boleh pakai automatic kat link blogger ke?

sukiminna Fri Sep 12, 05:04:00 PM

wah bes ar eriyza nih..kejap jek da wat tutorial..:)

tima kasih !

iEn Fri Sep 12, 05:09:00 PM

thx for credit me

p/s: ada masa nanti iEn adjust balek bahagian CSSnye, ada problem skit.. Hover tak jalan lak uhuk2.

Eriyza Fri Sep 12, 05:32:00 PM

Cheryna, hang kena salin balik link² tuh satu persatu. Wat sesket pun bleh. :)

Sukiminna, sama². ;)

Ien, asalkan skrip bleh guna, takperlah kalo hover x befungsi pun. Amik mudah jer. Hehehe!!! ;))

Zariel Fri Sep 12, 05:36:00 PM

memang teringin nk buat...tapi malasnyeeee nak masukkn link satu persatu...alang2 tunggu cik iEn kita adjust apa yg ptt dulu br buat ;)

iEn Fri Sep 12, 06:41:00 PM

Eriyza: takper, ien update kasik kemas skit, anyway dah update skit dengan sintaks bahasa melayu. Eriyza bleh goreng2 sendiri nanti..

Mohd Kamal Fri Sep 12, 07:11:00 PM

kreatif..!! tusyen secara online. kena berguru la ngan otai² lama mcm eriyza

@LiYaNNuaR Fri Sep 12, 07:15:00 PM

thanks eriyza... nanti sya cuba!

Eriyza Fri Sep 12, 09:40:00 PM

Zariel, bleh laa try sbb Ien dah kemaskini kodnya. :)

Ien, terima kasih sbb betulkan skrip. Eriyza dah update. Cayang Ien. :x

Mohd Kamal, sy pun beguru dgn Ien. ;)

AliyaAnnuar, selamat mencuba. :D

iEn Fri Sep 12, 10:19:00 PM

sama2.. check2 lah same yee.. main2 skit ngan kod CSS tu (bak kata delang) hehe!

Eriyza Fri Sep 12, 10:25:00 PM

Ien, bak main kod CSS tuh yg lemah. Almaklum laa pikap agak slow. Namun, jutaan time kasih diucapkan. :)

@LiYaNNuaR Fri Sep 12, 11:26:00 PM

sekali cuba... berjaya jugaks... thanks!

Eriyza Sat Sep 13, 12:04:00 AM

Tahniah AliyaAnnuar sbb bejaya mengikuti tutorial yg sy wat nih. Wisau gak owg x paham. Huhuhu!!! ;))

Reez Sat Sep 13, 06:32:00 AM
This comment has been removed by the author.
Reez Sat Sep 13, 06:33:00 AM

Eriyza...

Kalau template menggunakan format XML, macam mana pula ya?

Basically, semua side bar menggunakan auto widget...

Guna coding yang sama gak ke?

Eriyza Sat Sep 13, 09:07:00 PM

Reez, sy pun guna template xml gak.
Kena try dolu laa sbb sy pun x pasti bleh guna tak kat blog awak. :)

~WhEn dZuHRiAh sCribbLe~ Sun Sep 14, 11:41:00 PM

wah.. bestnya blog ni.. siap ada tutorial lagi.. konfem wajib nk kena link ni..

Eriyza Mon Sep 15, 12:53:00 AM

WhEn dZuHRiAh sCribbLe, terima kasih. :)

Truly Malaysian Thu Sep 25, 12:50:00 AM

kalau layout guna blogskins macam mana pulak?

Eriyza Thu Sep 25, 01:46:00 AM

Kalo layout blogskins, sy tidak pasti.
Mungkin bleh try and error. :)

19zim Thu Sep 25, 02:43:00 AM

Lepas ni boleh la buat tutorial pasal kategori yang berpusing2 tu pulak, macam best je...

Latest post Tagged by Cikin

Eriyza Thu Sep 25, 01:18:00 PM

19zim, tutorial ttg blogumus tuh dah ada. ;)
Sila rujuk http://eriyzaqistina.blogspot.com/2008/09/blogumus-label-flash-beranimasi.html

eworque Thu Jan 01, 04:41:00 AM

yang ni sama cam blog list ke?

Eriyza Thu Jan 01, 11:18:00 AM

Eworque : Yup, tab view nih digunakan tuk letak pautan blog / web yg kita suka. :)

♡ Eibu June's ♡ Wed Feb 18, 11:55:00 PM

salam eriyza...
trima kaseh...akhirnya berhasil jugak ibu buat,..
mmg mantap tutorial ni...

Eriyza Thu Feb 19, 12:09:00 AM

Eibu Junes : Wsalam Ibu.
Tahniah. Hehehe!!! :)

paatz Sat Oct 03, 08:34:00 AM

salam kak..paatz ade referkan tutorial akak kat entri paatz tau...cara buat tab view...credit utk akak..tq ya

Eriyza Sat Oct 03, 11:52:00 AM

paatz : Wsalam. Ok, Thanks atas linkbacknya.

Post a Comment

Gunakan tatabahasa yang betul sewaktu menulis komentar agar mudah difahami oleh penulis. Terima kasih. :-)

Sila ambil perhatian perkara² berikut :-

1. Tinggalkan nama dan url blog atau laman web anda.
2. HTML tag seperti <b>, <i>, <a> boleh digunakan.
3. Sila berhemah di dalam berbahasa.