• Natlie Imbruglia

    Doesn`t she look very cool?

  • Thousands of Years

    Earth has lived thousands of years...

  • Fruits

    Fruits are vital for health and their nutrients...

  • The Lonely Road

    The Lonely Road reminds Me with You...

  • Twister

    Here are some twisting graphics for you...

Friday, February 26, 2010

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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEW4J4Go9V3O88RFFxPiCbrqp-_ldOkoiM0MaanLSyAzUKXdc4ljeCPK8yBVoARBkUCLutMNTa8WX0QhkVyV2GMHO6BnBScVWw-61msRG0-HZlAO1zSY8G_jaT7J-pGjugDBb1ph-Ng9Y/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.

13 comments:

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

    ReplyDelete
  2. @Mel

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

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

    ReplyDelete
  3. Selalunya, org guna utk apa tu?

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

    ReplyDelete
  5. ...masih tak faham...

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

    ReplyDelete
  7. Thanks Bro... Bleh Try Nti nih...

    ReplyDelete
  8. nice gle tp xtau nak letak ape hehhehehe

    ReplyDelete