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.
Cara pasang tab menu pada blogspot

Cun la bro .nie la aku nak :) hehah!

@Mel

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

http://www.button-download.com/

Selalunya, org guna utk apa tu?

@Iza

Menjimatkan ruang

Siti Munirah,..
delete

...tolong, tolong..!!!
gadget pada layout tak boleh nak dialihkan... alih² balik tempat asal gak... apa yg tak kena..?
...tolong...!!!

@Siti Munirah

Linknya

Siti Munirah,..
delete

...masih tak faham...

bagus tutorial ni..
tu yang suke menjengah ke sini...

huhuhu i like! thnx :)

Thanks Bro... Bleh Try Nti nih...

nice gle tp xtau nak letak ape hehhehehe

I was looking for this ! Thanq so much for sharing :)

Benda ni akan beratkan blog tak?
Boleh tak kalau nak letak gbr?

This comment has been removed by the author. - Hapus

Peh..ini yg gua cari2 selama nie..

This comment has been removed by the author. - Hapus

bro code b section sidebar id sidebar preffered yes tu xdeee

sorry.link tu nak amik kat ner

abang ness...sidebar id xdeeeee

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

cm ner nak cari yang nie...xder pn dalam html saya


kalo xder nak paste kat ner langkah no 6 tuh??

tutorial sgt berguna,kalau dah ramai permintaan di cadangkan buka forum.
saya blaja buat blog timba ilmu disini.
http://ahmadhuzaimi.blogspot.com

bang... note pad yang link hijau tu nak paste kat mana? pliease... ajor saya...