Cara Buat Tab View Link Blog




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

9 Atom Bergerak :

masshah said...

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

Triple M said...

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

Naz said...

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

Anonymous said...

ups sorry delete plz [url=http://duhum.com].[/url]

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]

Anonymous said...

Analysis Our Sorrowful Prices at www.Pharmashack.com, The Unforgettable [b][url=http://www.pharmashack.com]Online Chemist's boutique [/url][/b] To [url=http://www.pharmashack.com]Buy Viagra[/url] Online ! You Can also Epoch to Outstanding Deals When You [url=http://www.pharmashack.com/en/item/cialis.html]Buy Cialis[/url] and When You You [url=http://www.pharmashack.com/en/item/levitra.html]Buy Levitra[/url] Online. We Also Be struck before a Stupendous Generic [url=http://www.pharmashack.com/en/item/phentermine.html]Phentermine[/url] As a running to Your Regimen ! We Closely in up Get star [url=http://www.pharmashack.com/en/item/viagra.html]Viagra[/url] and Also [url=http://www.pharmashack.com/en/item/generic_viagra.html]Generic Viagra[/url] !

~ 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

mijie said...

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

Anonymous said...

membaca seluruh blog, cukup bagus

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
There was an error in this gadget

Rakan Paatz