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