Salam semua..
Malam tadi saya langsung tak leh nak tido. Huhu..tah kenapa sejak 2 menjak nie susah sangat nak tido. Dalam pada menggodek2 laman web orang, tiba-tiba pukul 4.30 pagi si MinahKiwi buat request. Nak tahu bagaimana saya membuat seperti "kenalan saya" di bawah :
Tapi disebabkan mata dah kuyu jer..Hehe..saya tangguhkan dulu. And sekarang nie, saya cuba sedaya upaya untuk memenuhi permintaan Minahkiwi yer..
1. Mula-mula macam biasalah kan, Log In akaun anda > Layout > Edit HTML > Download Full Template ( Buat backup dulu..nanti tak jadi, menangis tak berlagu..Huhu ) > tandakan pada Expand Widget Templates
2. Cari </head> dan letakkan kod ini sebelumnya.
<script src='http://ladyqistina.googlepages.com/tabview.js' type='text/javascript'/>
3. Cari perkataan ini ]]></bskin>
4. Copy coding dibawah ni dan Paste kan dia di atas coding ]]></bskin>.
/* 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*/
5. Save template.
6. 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>
7. Contoh untuk mengisi senarai blog /laman web adalah seperti berikut :-
<div class="Page"><div class="Pad"><table border="0"><a href="http://din3187.via.my">[din3187]</a> <a href="#">D</a> <a href="#">D</a> <a href="#">D</a> </table></div></div>
Tanda # ditukar dengan alamat blog = http://din3187.via.my
Abjad D pula ditukar dengan nama pemilik blog = [din3187]
Antara bahagian yang boleh diubahsuai ialah :-
Warna latarbelakang, tulisan, kotak = #66666, #FFFFFF dan lain².
Saiz width (lebar) dan height (tinggi) juga boleh ditukar.
Sumber : Eryza
0 comments: