Cara mudah pasang tab menu versi 2

Tab menu versi 2 yang boleh anda lihat di sini(sila klik) mungkin dapat meminimumkan ruang sidebar blog anda. Widget seperti Recent Comments, Top Commentators dan Popular Posts boleh di masukkan pada tab menu. Selain daripada widget tersebut, widget lain juga boleh dimasukkan seperti widget shout box da juga widget tambahan yang lain.

Jika anda berminat untuk menggunakan tab menu yang telah dimasukkan dengan widget Recent Comments, Top Commentators dan Popular Posts, sila ikut beberapa langkah yang mudah dibawah.

Langkah 1

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

Langkah 2

Dengan menggunakan keyboard, tekan kekunci Ctrl dan F secara serentak dan bar Find akan muncul. Seterusnya, taip atau paste kod ]]></b:skin> pada ruang Find dan kemudian tekan Enter.

Langkah 3

Salin kod biru dibawah dan kemudian, paste kod tersebut diatas atau sebelum kod ]]></b:skin> pada script template(rujuk langkah 2)

UL.tabNavigation {
list-style: none;
margin: 0 5px;
padding: 0;
}

UL.tabNavigation LI {
display:inline;
}

UL.tabNavigation LI A {
padding: 3px 10px;
-moz-border-radius-topleft:7px;
-moz-border-radius-topright:7px;
background-color: #1180FE;
color: #fff;
text-decoration: none;
}

UL.tabNavigation LI A.selected,
UL.tabNavigation LI A:hover {
background-color: #888888;
color: #fff;
padding-top: 7px;
}

UL.tabNavigation LI A:focus {
outline: 0;
}

div.tabs > div {
padding: 5px;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
margin-top: 0px;
border: 3px solid #ccc;
}

div.tabs > div h2 {
margin-top: 0;
}

#first {
background-color: #fff;
}

#second {
background-color: #fff;
}

#third {
background-color: #fff;
}

Langkah 4

Sekali lagi pada bar Find,taip atau paste kod </head> dan seterusnya, tekan Enter.

Langkah 5

Salin kod merah dibawah dan paste diatas atau sebelum kod </head>(rujuk langkah 4)

<script src="http://sites.google.com/site/defaultjssite/jquerytabmenu.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
$(function () {
var tabContainers = $('div.tabs > div');
tabContainers.hide().filter(':first').show();

$('div.tabs ul.tabNavigation a').click(function () {
tabContainers.hide();
tabContainers.filter(this.hash).show();
$('div.tabs ul.tabNavigation a').removeClass('selected');
$(this).addClass('selected');
return false;
}).filter(':first').click();
});
</script>

Seterusnya, klik SAVE TEMPLATE.

Langkah 6

Klik Layout => Add A Gadget => HTML/Javascript


Langkah 7

Salin kod hijau dibawah dan paste pada notepad. Edit kod yang di bold dengan menggantikannya dengan URL blog nama anda.

<div class="tabs">
<ul class="tabNavigation">
<li><a href="#first">First</a></li>
<li><a href="#second">Second</a></li>
<li><a href="#third">Third</a></li>
</ul>
<div id="first">
<h3>Recent Comments</h3>
<script style="text/javascript" src="http://sites.google.com/site/testingsahaja/recentcomments.js"></script><script style="text/javascript">var numcomments = 5;var showcommentdate = false;var showposttitle = false;var numchars = 40;</script><script src="http://URL blog anda.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script>
</div>
<div id="second">
<h3>Top Commentators</h3>
<p><script type="text/javascript"> function pipeCallback(obj) { document.write('<ol>'); var i; for (i = 0; i < obj.count ; i++) { var href = "'" + obj.value.items[i].link + "'"; if(obj.value.items[i].link == "") var item ="<li>" + obj.value.items[i].title + "</li>"; else var item = "<li>" + "<a href=" + href + ">" + obj.value.items[i].title + "</a> </li>"; document.write(item); } document.write('</ol>'); } </script> <script src="http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback&_id=7b5e76fd684f11e94320abd4e00fbbca&url=http%3A%2F%2FURL blog anda.blogspot.com&num=10&filter=nama anda" type="text/javascript"></script></p>
</div>
<div id="third">
<h3>Popular Posts</h3>
<p><script language="JavaScript">
aBold = false;
numposts=1000;
maxshowresult=5;
home_page = "http://URL blog anda.blogspot.com/";
</script>
<script src="http://sites.google.com/site/testingsahaja/toppost.js" type="text/javascript"></script></p>
</div>
</div>

Lagkah 8

Salin kod yang telah siap diedit (rujuk langkah 7) dan paste pada ruang Content HTML/Javascript(rujuk langkah 6)

Akhir sekali klik Save.
Cara mudah pasang tab menu versi 2

shoutbix pun blh masuk.cantik

blognya bagus..
saya suka baca disini..
tetep update ya..
from ; indonesia

hi what do you think about Indonesia ?
whatever they said, we are friends together..
I love malaysia, one day I wish to go abroad and the first place I visit surely Malaysia.. :)

@aldrix

Kita serumpun. Tak ada bezanya. Yang penting saling hormat-menghormati. Terima kasih sebab melawat blog ini

Stuju!! yg bertegang leher tuh manusia subversif! kita... dari zaman dlu mmg brothers!!!

bro..kalau nak masukkan shoutbox,teks ataupun lain2..camne..apa nak kena ganti?

nak tanye en sifu nescafe ais...saye dah wat ikut arahan...tp nape comment yg telah ade b4 this xde eh?or saye kene delete box comment yg dah sedia ada?

buat memasukankan yang lain pada tab bagaimana, seperti sout box dan lainnya

Banyak maklumat berguna di blog anda,terima kasih

thanks for the info..alhamdulillah..menjadi..

sya dh try masukkn kod tu kat ruangan find tp bila enter kuar text ni -- text not found...

byk kali gak buat still sama jer..

nape erk?

kalau nak letak shout box kat dalam tuh camne ek ?
send kat blog dawy eh . :)

kalo nak ubah size first second and third macam mana? saya dah buat tapi nak ubat tak dapat tengok kat blog saya
http://bdkminang.blogspot.com/

@bdkminang

Edit pada First, Second, Third pada kod bawah:

<div class="tabs">
<ul class="tabNavigation">
<li><a href="#first">First</a></li>
<li><a href="#second">Second</a></li>
<li><a href="#third">Third</a></li>

memang menjadik~! hehe thnkx :D

bro, apesal tak jadi ekh yang ni? ni mesti masalah javascript ni kan? try tengok kat blog ni www.munzirshafie.com tak jadi. tapi try kat blog belogcubacuba.blogspot.com jadi pulak.. plis plis help mee....huhuhuhu

makasih ilmunya gan..langsung di praktekin ilmunya niihh..

langsung dicoba aja gan ilmunya..makasih udh shre..

buat ngembaliinnya gimana gan??

biar ga penasaran langsung nyoba aj deehh gan..

biar ga penasaran langsung nyoba aj deehh gan..