Cara pasang tab menu pada blogspot


Untuk memasang tab menu seperti yang boleh anda lihat pada blog ini (sila klik), sila ikut beberapa langkah di bawah.

p/s: Sila save script template anda.

Langkah 1

Log in blog => Dashboard => Layout Edit HTML.

Langkah 2

Dengan menggunakan keyboard, taip atau paste kod ]]></b:skin> pada ruang Find dan seterusnya tekan Enter.


Langkah 3

Salin kod berwarna biru di bawah dan paste di atas atau sebelum kod ]]></b:skin>

#tabmenu{
width: 210px;
margin: 0 auto;
}
.box{
background: #fff;
width: 196px;
padding: 0 5px 0 5px;
}
.boxholder{
clear: both;
padding: 2px;
background: #ccc;
}
.tab{
float: left;
height: 28px;
width: 68px;
margin: 0 0px 0 1px;
text-align: center;
background: url(http://2.bp.blogspot.com/_LZtXSNcp76A/S4fMmwmJs1I/AAAAAAAABAk/roZO67VJRF0/s320/btn_3.png) no-repeat;
}
.tabtxt{
margin: 0;
color: #fff;
font-size: 12px;
font-weight: bold;
padding: 8px 0px 0 5px;
}

Langkah 4

Sekali lagi, dengan menggunakan keyboard taip kod </head> dan seterusnya, tekan Enter.


Langkah 5

Salin kod berwarna merah di bawah dan paste di atas atau sebelum kod </head>

<script type="text/javascript" src="http://sites.google.com/site/defaultjssite/prototype.lite.js"></script>
<script type="text/javascript" src="http://sites.google.com/site/defaultjssite/moo.fx.js"></script>
<script type="text/javascript" src="http://sites.google.com/site/defaultjssite/moo.fx.pack.js"></script>
<script type="text/javascript">
function init(){
    var stretchers = document.getElementsByClassName('box');
    var toggles = document.getElementsByClassName('tab');
    var myAccordion = new fx.Accordion(
        toggles, stretchers, {opacity: false, height: true, duration: 600}
    );
    //hash functions
    var found = false;
    toggles.each(function(h3, i){
        var div = Element.find(h3, 'nextSibling');
            if (window.location.href.indexOf(h3.title) > 0) {
                myAccordion.showThisHideOpen(div);
                found = true;
            }
        });
        if (!found) myAccordion.showThisHideOpen(stretchers[0]);
}
</script>

Langkah 6

Salin kod hijau di bawah dan paste pada notepad. Edit teks yang di bold dengan memasukkan teks, link ataupun script yang sesuai.

<b:widget id='HTML100' locked='false' title='Tab menu' type='HTML'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div id='tabmenu'>
    <div id='content'>
    <h3 class='tab' title='first'><div class='tabtxt'><a href='#'>Title 1</a></div></h3>
    <div class='tab'><h3 class='tabtxt' title='second'><a href='#'>Title 2</a></h3></div>
    <div class='tab'><h3 class='tabtxt' title='third'><a href='#'>Title 3</a></h3></div>

    <div class='boxholder'>

        <div class='box'>
            Masukkan teks,link atau script disini
        </div>
        <div class='box'>
            Masukkan teks, link atau script disini
        </div>
        <div class='box'>
            Masukkan teks,link atau script disini
        </div>
        
    </div>
</div>

</div>
<script type='text/javascript'>
    Element.cleanWhitespace('content');
    init();
</script>

<b:include name='quickedit'/>
</b:includable>
</b:widget>

Langkah 7

Sekali lagi dengan menggunakan keyboard, taip atau paste kod <b:section class='sidebar' id='sidebar' preferred='yes'> 

Langkah 8

Salink kod yang telah siap di edit pada langkah 6 tadi dan paste kod tersebut di bawah atau selepas kod <b:section class='sidebar' id='sidebar' preferred='yes'>

Akhir sekali, klik Preview dan jika tiada mesej Error terpapar dan anda berpuas hati dengan hasilnya, klik saja Save.


{ 26 comments.. read them below or add one }

Melz Melz 10:02 PM
Cun la bro .nie la aku nak :) hehah!
Nescafe ais Nescafe ais 10:06 PM
@Mel

Button kuning boleh tukar. Tapi kena edit sikit. Gua rembat kat sini.

http://www.button-download.com/
Iza Iza 10:13 PM
Selalunya, org guna utk apa tu?
Nescafe ais Nescafe ais 10:17 PM
@Iza

Menjimatkan ruang
Siti Munirah,..Siti Munirah,.. 10:47 PM
...tolong, tolong..!!!
gadget pada layout tak boleh nak dialihkan... alih² balik tempat asal gak... apa yg tak kena..?
...tolong...!!!
Nescafe ais Nescafe ais 10:52 PM
@Siti Munirah

Linknya
Siti Munirah,..Siti Munirah,.. 11:01 PM
...masih tak faham...
annfrendly annfrendly 4:00 AM
bagus tutorial ni..
tu yang suke menjengah ke sini...
Miss Ekin Miss Ekin 9:28 AM
huhuhu i like! thnx :)
aReaL aReaL 10:05 AM
Thanks Bro... Bleh Try Nti nih...
ARC™ ARC™ 1:08 PM
nice gle tp xtau nak letak ape hehhehehe
Sakira Sakira 9:04 AM
I was looking for this ! Thanq so much for sharing :)
Iza Iza 3:44 PM
Benda ni akan beratkan blog tak?
Boleh tak kalau nak letak gbr?
Mr Kamikaze Mr Kamikaze 5:06 PM
Peh..ini yg gua cari2 selama nie..
syed shah rizal syed shah rizal 1:48 PM
This comment has been removed by the author.
ARC™ ARC™ 9:15 PM
bro code b section sidebar id sidebar preffered yes tu xdeee
I Am Me I Am Me 7:52 PM
sorry.link tu nak amik kat ner
ARC™ ARC™ 1:42 PM
abang ness...sidebar id xdeeeee
groupfb00 groupfb00 10:09 PM
semua yang baru masuk blog ni pasti akan kembali lagi,betul tak kawan2 ..aku dari dulu follow blog ni banyak info yang sangat berguna......
blog ni pun dah berwajah baru lagi cantik dari wajah dulu...tq nes..ais
knkcollection knkcollection 1:23 AM
cm ner nak cari yang nie...xder pn dalam html saya


kalo xder nak paste kat ner langkah no 6 tuh??
Ahmad Huzaimi Ahmad Huzaimi 12:57 AM
tutorial sgt berguna,kalau dah ramai permintaan di cadangkan buka forum.
saya blaja buat blog timba ilmu disini.
http://ahmadhuzaimi.blogspot.com
dini smiles a.k.a zircon dini smiles a.k.a zircon 12:32 AM
bang... note pad yang link hijau tu nak paste kat mana? pliease... ajor saya...