Cara Buat Tab View Link Blog

Labels:




Tab View ini menjimatkan ruang blog


Salam Blogger untuk semua...Entri kali ni Paatz nak kongsi tutorial untuk buat tabview link kawan-kawan sepertimana yang ada pada blog Kimiadanaku ni.Tutorial ni di-requestkan oleh saudari ein. Paatz meng'credit'kan tutorial ni buat kak eryza.Ok,jom kita mulakan
Langkah Pertama
Login Blogger>Layout>Edit HTML
(Pastikan korang dah check expand Widget Templates)

Langkah Kedua

Cari (Ctrl+F) kod ni..

</head>

Dan kemudian pastekan kod ni kat atas kod tadi tu

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


Langkah Ketiga

Cari kod ni


</b:skin>

Pastekan kod ni di atas kod tadi


/* Awal TAB VIEW 1*/
div.TabView div.Tabs
{
overflow: hidden;
}
div.TabView div.Tabs a
{
background: #0101DF ;
background-repeat: no-repeat;
float: left;
display: block;
width: 20px; /* Lebar Menu Utama Atas */
text-align: center;
height: 20px; /* Tinggi Menu Utama Atas */
padding-top: 0px;
vertical-align: middle;
border: 1px solid #eeeeee;
margin-top: 4px;
margin-left: 6px;
margin-right: 6px;
border-bottom: 2px solid #999999;
border-bottom-width: 2px;
text-decoration: none;
font-family: "Times New Roman", Serif; /* Font Menu Utama 

Atas */
font-weight: 800;
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: #0101DF; /* Warna Background Mouse Hover */
background-repeat: no-repeat;
}
div.TabView div.Pages
{
clear: both;
margin-top: 6px;
padding: 5px;
border: 2px double #999999; /* Warna border Kotak Utama */
overflow: hidden;
background-color: #091a9f; /* Warna background Kotak Utama */
}
div.TabView div.Pages div.Page
{
height: 200%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 4px 2px;
}
/* Akhir TAB VIEW 1*/

Kemudian korang SAVE...


Langkah Keempat

Pergi pada Page Element>Add Gadget>Html

Copy dan Pastekan kod ni pulak


<left> <table border="0"><tbody>
<tr><td><form action="tabview.html" method="get">

<div id="TabView" 
class="TabView">
<div style="width: 340px;" class="Tabs">
<a 
href=""><font color="#ffffff"><b>A</b></font></a> <a href=""><font 
color="#ffffff"><b>B</b></font></a> <a href=""><font 
color="#ffffff"><b>C</b></font></a> <a href=""><font 
color="#ffffff"><b>D</b></font></a> <a href=""><font 
color="#ffffff"><b>E</b></font></a> <a href=""><font 
color="#ffffff"><b>F</b></font></a> <a href=""><font 
color="#ffffff"><b>G</b></font></a> <a href=""><font 
color="#ffffff"><b>H</b></font></a> <a href=""><font 
color="#ffffff"><b>I</b></font></a> <a href=""><font 
color="#ffffff"><b>J</b></font></a> <a href=""><font 
color="#ffffff"><b>K</b></font></a> <a href=""><font 
color="#ffffff"><b>L</b></font></a> <a href=""><font 
color="#ffffff"><b>M</b></font></a> <a href=""><font 
color="#ffffff"><b>N</b></font></a> <a href=""><font 
color="#ffffff"><b>O</b></font></a> <a href=""><font 
color="#ffffff"><b>P</b></font></a> <a href=""><font 
color="#ffffff"><b>Q</b></font></a> <a href=""><font 
color="#ffffff"><b>R</b></font></a> <a href=""><font 
color="#ffffff"><b>S</b></font></a> <a href=""><font 
color="#ffffff"><b>T</b></font></a> <a href=""><font 
color="#ffffff"><b>U</b></font></a> <a href=""><font 
color="#ffffff"><b>V</b></font></a> <a href=""><font 
color="#ffffff"><b>W</b></font></a> <a href=""><font 
color="#ffffff"><b>X</b></font></a> <a href=""><font 
color="#ffffff"><b>Y</b></font></a> <a href=""><font 
color="#ffffff"><b>Z</b></font></a> <a href=""><font 
color="#ffffff"></font></a></div>
<div style="width: 330px; height: 200px;" class="Pages">
<div class="Page">
<div class="Pad">

<table>
<a href="letakkan link kawan anda" target="_ blank">[Nama Kawan]
</a>|
<a href="letakkan link kawan anda" target="_ blank">[Nama Kawan]
</a>|
<a href="letakkan link kawan anda" target="_ blank">[Nama Kawan]
</a>
</table>
</div>
</div>
<div class="Page">

<div class="Pad">
<table border="0">
<a href="letakkan link kawan anda" target="_ blank">[Nama Kawan]
</a>|
<a href="letakkan link kawan anda" target="_ blank">[Nama Kawan]
</a>|
<a href="letakkan link kawan anda" target="_ blank">[Nama Kawan]
</a>
</table>
</div>
</div>
<div class="Page">

<div class="Pad">
<table border="0">
<a href="letakkan link kawan anda" target="_ blank">[Nama Kawan]
</a>|
<a href="letakkan link kawan anda" target="_ blank">[Nama Kawan]
</a>|
<a href="letakkan link kawan anda" target="_ blank">[Nama Kawan]
</a>
</table>
</div>
</div>
<div class="Page">

<div class="Pad">
<table border="0">
<a href="letakkan link kawan anda" target="_ blank">[Nama Kawan]
</a>|
<a href="letakkan link kawan anda" target="_ blank">[Nama Kawan]
</a>|
<a href="letakkan link kawan anda" target="_ blank">[Nama Kawan]
</a>
</table>
</div>
</div>
<div class="Page">

<div class="Pad">
<table border="0">
<a href="letakkan link kawan anda" target="_ blank">[Nama Kawan]
</a>|
<a href="letakkan link kawan anda" target="_ blank">[Nama Kawan]
</a>|
<a href="letakkan link kawan anda" target="_ blank">[Nama Kawan]
</a>
</table>
</div>
</div>
<div class="Page">

<div class="Pad">
<table border="0">
<a href="letakkan link kawan anda" target="_ blank">[Nama Kawan]
</a>|
<a href="letakkan link kawan anda" target="_ blank">[Nama Kawan]
</a>|
<a href="letakkan link kawan anda" target="_ blank">[Nama Kawan]
</a>
</table>
</div>
</div>
<div class="Page">

<div class="Pad">
<table border="0">
<a href="letakkan link kawan anda" target="_ blank">[Nama Kawan]
</a>|
<a href="letakkan link kawan anda" target="_ blank">[Nama Kawan]
</a>|
<a href="letakkan link kawan anda" target="_ blank">[Nama Kawan]
</a>
</table>
</div>
</div>
<div class="Page">

<div class="Pad">
<table border="0">
<a href="letakkan link kawan anda" target="_ blank">[Nama Kawan]
</a>|
<a href="letakkan link kawan anda" target="_ blank">[Nama Kawan]
</a>|
<a href="letakkan link kawan anda" target="_ blank">[Nama Kawan]
</a>
</table>
</div>
</div>
<div class="Page">

<div class="Pad">
<table border="0">
<a href="letakkan link kawan anda" target="_ blank">[Nama Kawan]
</a>|
<a href="letakkan link kawan anda" target="_ blank">[Nama Kawan]
</a>|
<a href="letakkan link kawan anda" target="_ blank">[Nama Kawan]
</a>
</table>
</div>
</div>
<div class="Page">

<div class="Pad">
<table border="0">
<a href="letakkan link kawan anda" target="_ blank">[Nama Kawan]
</a>|
<a href="letakkan link kawan anda" target="_ blank">[Nama Kawan]
</a>|
<a href="letakkan link kawan anda" target="_ blank">[Nama Kawan]
</a>
</table>
</div>
</div>
<div class="Page">

<div class="Pad">
<table border="0">
<a href="letakkan link kawan anda" target="_ blank">[Nama Kawan]
</a>|
<a href="letakkan link kawan anda" target="_ blank">[Nama Kawan]
</a>|
<a href="letakkan link kawan anda" target="_ blank">[Nama Kawan]
</a>
</table>
</div>
</div>
<div class="Page">

<div class="Pad">
<table border="0">
<a href="letakkan link kawan anda" target="_ blank">[Nama Kawan]
</a>|
<a href="letakkan link kawan anda" target="_ blank">[Nama Kawan]
</a>|
<a href="letakkan link kawan anda" target="_ blank">[Nama Kawan]
</a>
</table>
</div>
</div>
<div class="Page">

<div class="Pad">
<table border="0">
<a href="letakkan link kawan anda" target="_ blank">[Nama Kawan]
</a>|
<a href="letakkan link kawan anda" target="_ blank">[Nama Kawan]
</a>|
<a href="letakkan link kawan anda" target="_ blank">[Nama Kawan]
</a>
</table>
</div>
</div>
<div class="Page">

<div class="Pad">
<table border="0">
<a href="letakkan link kawan anda" target="_ blank">[Nama Kawan]
</a>|
<a href="letakkan link kawan anda" target="_ blank">[Nama Kawan]
</a>|
<a href="letakkan link kawan anda" target="_ blank">[Nama Kawan]
</a>
</table>
</div>
</div>
<div class="Page">

<div class="Pad">
<table border="0">
<a href="letakkan link kawan anda" target="_ blank">[Nama Kawan]
</a>|
<a href="letakkan link kawan anda" target="_ blank">[Nama Kawan]
</a>|
<a href="letakkan link kawan anda" target="_ blank">[Nama Kawan]
</a>
</table>
</div>
</div>
<div class="Page">

<div class="Pad">
<table border="0">
<a href="letakkan link kawan anda" target="_ blank">[Nama Kawan]
</a>|
<a href="letakkan link kawan anda" target="_ blank">[Nama Kawan]
</a>|
<a href="letakkan link kawan anda" target="_ blank">[Nama Kawan]
</a>
</table>
</div>
</div>
<div class="Page">

<div class="Pad">
<table border="0">
<a href="letakkan link kawan anda" target="_ blank">[Nama Kawan]
</a>|
<a href="letakkan link kawan anda" target="_ blank">[Nama Kawan]
</a>|
<a href="letakkan link kawan anda" target="_ blank">[Nama Kawan]
</a>
</table>
</div>
</div>
<div class="Page">

<div class="Pad">
<table border="0">
<a href="letakkan link kawan anda" target="_ blank">[Nama Kawan]
</a>|
<a href="letakkan link kawan anda" target="_ blank">[Nama Kawan]
</a>|
<a href="letakkan link kawan anda" target="_ blank">[Nama Kawan]
</a>
</table>
</div>
</div>
<div class="Page">

<div class="Pad">
<table border="0">
<a href="letakkan link kawan anda" target="_ blank">[Nama Kawan]
</a>|
<a href="letakkan link kawan anda" target="_ blank">[Nama Kawan]
</a>|
<a href="letakkan link kawan anda" target="_ blank">[Nama Kawan]
</a>
</table>
</div>
</div>
<div class="Page">

<div class="Pad">
<table border="0">
<a href="letakkan link kawan anda" target="_ blank">[Nama Kawan]
</a>|
<a href="letakkan link kawan anda" target="_ blank">[Nama Kawan]
</a>|
<a href="letakkan link kawan anda" target="_ blank">[Nama Kawan]
</a>
</table>
</div>
</div>
<div class="Page">

<div class="Pad">
<table border="0">
<a href="letakkan link kawan anda" target="_ blank">[Nama Kawan]
</a>|
<a href="letakkan link kawan anda" target="_ blank">[Nama Kawan]
</a>|
<a href="letakkan link kawan anda" target="_ blank">[Nama Kawan]
</a>
</table>
</div>
</div>
<div class="Page">

<div class="Pad">
<table border="0">
<a href="letakkan link kawan anda" target="_ blank">[Nama Kawan]
</a>|
<a href="letakkan link kawan anda" target="_ blank">[Nama Kawan]
</a>|
<a href="letakkan link kawan anda" target="_ blank">[Nama Kawan]
</a>
</table>
</div>
</div>
<div class="Page">

<div class="Pad">
<table border="0">
<a href="letakkan link kawan anda" target="_ blank">[Nama Kawan]
</a>|
<a href="letakkan link kawan anda" target="_ blank">[Nama Kawan]
</a>|
<a href="letakkan link kawan anda" target="_ blank">[Nama Kawan]
</a>
</table>
</div>
</div>
<div class="Page">

<div class="Pad">
<table border="0">
<a href="letakkan link kawan anda" target="_ blank">[Nama Kawan]
</a>|
<a href="letakkan link kawan anda" target="_ blank">[Nama Kawan]
</a>|
<a href="letakkan link kawan anda" target="_ blank">[Nama Kawan]
</a>
</table>
</div>
</div>
<div class="Page">

<div class="Pad">
<table border="0">
<a href="letakkan link kawan anda" target="_ blank">[Nama Kawan]
</a>|
<a href="letakkan link kawan anda" target="_ blank">[Nama Kawan]
</a>|
<a href="letakkan link kawan anda" target="_ blank">[Nama Kawan]
</a>
</table>
</div>
</div>
<div class="Page">

<div class="Pad">
<table border="0">
<a href="letakkan link kawan anda" target="_ blank">[Nama Kawan]
</a>|
<a href="letakkan link kawan anda" target="_ blank">[Nama Kawan]
</a>|
<a href="letakkan link kawan anda" target="_ blank">[Nama Kawan]
</a>
</table>
</div>
</div>
<script type="text/javascript">
tabview_initialize('TabView');
</script> 
</div>
</div>
</form>
</td></tr>
</tbody></table>
</left>
OK..dah siap..Alhamdulillah..ngee

Nota:-

  • Korang boleh tukarkan warna Tab View Korang kat kod langkah Ketiga tadi.
Tutorial ini bukan hak cipta Paatz.Jadi sesiapa nak copy tutorial ni dipersilakan..Share2 la dengan yang lain

Berikan komen korang,tekan saja Atom Bergerak dan Paatz pasti seronok berkongsi dengan korangSmile18.com

7 Atom Bergerak :

masshah said...

Satu perubahan yang cukup baik..Insyallah saya akan cuba cara yang ni:)..salam perkenalan dan Ukhwah paatz:)

October 18, 2009 at 12:23 AM  
Putera Islam said...

bro paatz..nak tukar warna font pada kotak besar camne?kod mane kena ubah?

October 23, 2009 at 6:39 PM  
Naz said...

Bagus juga ye Tabview link ni. Terima kasih kerana berkongsi. Appreciate it. :)

October 26, 2009 at 1:03 PM  
Anonymous said...

[B]NZBsRus.com[/B]
Dismiss Idle Downloads Using NZB Files You Can Easily Search HD Movies, Console Games, MP3s, Applications & Download Them @ Electric Rates

[URL=http://www.nzbsrus.com][B]Newsgroup[/B][/URL]

February 5, 2010 at 9:17 PM  
~ ALIEN ~ said...

aku ade bt review psal tutorial ni kat blog aku. btw...tq very much utk tutorial yg BEST! aku guna widget ni...(^_^)


http://wordz-space.blogspot.com/2010/04/x-change-link-widget-cool-tapi.html

April 19, 2010 at 7:24 PM  
mijie said...

bgs gak..nnti boleh try explorer..hehe..:)

June 13, 2010 at 10:13 PM  
Anonymous said...

membaca seluruh blog, cukup bagus

January 27, 2011 at 1:25 PM  

Post a Comment

Subscribe to: Post Comments ( Atom )

Dari pena kimiadanaku

Semua post yang dibuat @ telah dibuat dalam laman ini hanyalah sekadar idea dan pendapat peribadi penulis. Tiada niat untuk menyinggung atau meniupkan sebarang bentuk provokasi, fitnah mahupun penipuan. Komen dan kritikan yang bernas amat dihargai.

Followers

dasdasdsadasdasdasdasdas

Rakan Paatz