Add Tabs Widget for Blogger

Kamu tahu nggak apa Tabs Widget itu? nggak tahu? kalo nggak tahu, cobain nih ngunjungin situs-nya super active virus eliminator, diatas sendiri tuh, ada tabnya kan? ya itu lah yang namanya Tabs Widget, kalo belom jelas dan belom tahu apa itu Tabs Widget, lihat nie gambar brikut

Kamu tahu nggak apa Tabs Widget itu? nggak tahu? kalo nggak tahu, cobain nih ngunjungin situs-nya super active virus eliminator, diatas sendiri tuh, ada tabnya kan? ya itu lah yang namanya Tabs Widget, kalo belom jelas dan belom tahu apa itu Tabs Widget, lihat nie gambar brikut:

contoh Tabs Widget

gimana bagus kan? mau buat? ikuti yah nie artikel, nie langkah-langkah na, karena ini widget, JANGAN LUPA untuk memencet cek Expand Widget Templates di atas kanan textbox edit html. kalo bisa download dulu tuh tema-mu (backup dulu) nanti dari-pada elo gak bisa ngembaliinnya.

1. cari baris kode ini : "/** Page structure tweaks for layout editor wireframe */" (antara tanda petik itu, gak usah pake tanda petikna)

2. kalo udah ketemu, kopiin kode berikut, TEPAT dibawahnya langsung

#tabsJ {

float:left;

width:100%;

background:#fff;

font-size:93%;

line-height:normal;

border-bottom:1px solid #24618E;

margin-bottom:1em;

}

#tabsJ ul {

margin:0;

padding:10px 10px 0 50px;

list-style:none;

}

#tabsJ li {

display:inline;

margin:0;

padding:0;

}

#tabsJ a {

float:left;

background:url("Bikin Blogger_ AdSense_files/tableftJ.gif") no-repeat left top;

margin:0;

padding:0 0 0 5px;

text-decoration:none;

}

#tabsJ a span {

float:left;

display:block;

background:url("Bikin Blogger_ AdSense_files/tabright.gif") no-repeat right top;

padding:5px 15px 4px 6px;

color:#24618E;

}

/* Commented Backslash Hack hides rule from IE5-Mac \*/

#tabsJ a span {float:none;}

/* End IE5-Mac hack */

#tabsJ a:hover span {

color:#FFF;

}

#tabsJ a:hover {

background-position:0% -42px;

}

#tabsJ a:hover span {

background-position:100% -42px;

}-nya?

3. kalo udah, cariin kode ini : "<div id='header-inner'>" kalo udah ketemu, tempatkan kursor text-mu tepat dibawah penutup div header-inner yang paling terakhir (<div>). dan tempatkan kode ini tepat di akhir div inner tersebut:

<div class='widget Label' id='Label1'>

<div id='tabsJ'>

<ul>

<li><a href='http://bikinblogger.blogspot.com/'><span>Home</span></a></li>

<li><a href=''><span>Download</span></a></li>

<li><a href='http://bikinblogger.blogspot.com/search/label/Blogger%20Template'><span>Upload</span></a></li
<li><a href='http://bikinblogger.blogspot.com/search/label/Eurekster'><span>Guestbook</span></a></li>

<li><a href='http://bikinblogger.blogspot.com/search/label/Google%20Analytic'><span>Source Code</span></a></li>

<li><a href='http://bikinblogger.blogspot.com/search/label/Google%20co%20op'><span>Tips and Tricks</span></a></li>

</ul>

</div>

elo bisa nambain tabs lagi dengan format : <li><a href='alamat yang dituju'><span>nama tabs</span></a></li>

4. kalo udah, keseluruhannya akan terlihat seperti ini nie

<div id='header-inner'>

<div class='titlewrapper'>

<h1 class='title'>



<a href='http://bikinblogger.blogspot.com/'>Bikin Blogger</a>



</h1>

</div>

<div class='descriptionwrapper'>

<p class='description'><span>Saling membantu bikin blog di blogger baru !</span></p>

</div>

</div>



</div>

<div class='widget Label' id='Label1'>

<div id='tabsJ'>

<ul>

<li><a href='http://bikinblogger.blogspot.com/'><span>Home</span></a></li>

<li><a href=''><span>Download</span></a></li>

<li><a href='http://bikinblogger.blogspot.com/search/label/Blogger%20Template'><span>Upload</span></a></li <li><a href='http://bikinblogger.blogspot.com/search/label/Eurekster'><span>Guestbook</span></a></li>

<li><a href='http://bikinblogger.blogspot.com/search/label/Google%20Analytic'><span>Source Code</span></a></li>

<li><a href='http://bikinblogger.blogspot.com/search/label/Google%20co%20op'><span>Tips and Tricks</span></a></li>

</ul>

</div>

keterangan : yang dicetak hitam itu adalah teks/kode tambahan, dan yang teks berwarna biru itu adalah tambahan

catatan : anda juga bisa mennganti style tadi dengan gaya lainnya, nih lihat yah gaya-gaya lainnya, oh ya kalo mau ngganti style, caranya ganti aja tulisan tabsJ, dengan model tabs yang lainnya (tabsA, tabsB, tabsC, ato model lainnya, nie lihat ndirini):

Keywords: some of people not know how to create tabs on their blogger blog, they only now how to add Tabs at their HTML (not blogger, manual page creator/websites), so at this article we will learn to you how to make it at Blogger, it easy than at website. so lets read this article guy!

www.blogywalkie.blogspot.com

This article is about Blogger Addons