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.


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

Wan Perlis Wan Perlis 10:48 AM
shoutbix pun blh masuk.cantik
aldrix aldrix 12:30 PM
blognya bagus..
saya suka baca disini..
tetep update ya..
from ; indonesia
aldrix aldrix 1:03 PM
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.. :)
Nescafe ais Nescafe ais 1:14 PM
@aldrix

Kita serumpun. Tak ada bezanya. Yang penting saling hormat-menghormati. Terima kasih sebab melawat blog ini
KIDbrush® KIDbrush® 3:07 PM
Stuju!! yg bertegang leher tuh manusia subversif! kita... dari zaman dlu mmg brothers!!!
Hadi Hadi 10:04 AM
bro..kalau nak masukkan shoutbox,teks ataupun lain2..camne..apa nak kena ganti?
sWeEt 'N LoVeLy sWeEt 'N LoVeLy 5:08 PM
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?
Nyach Nyach 1:45 AM
buat memasukankan yang lain pada tab bagaimana, seperti sout box dan lainnya
zaireey zaireey 1:33 AM
Banyak maklumat berguna di blog anda,terima kasih
adiezaqistina adiezaqistina 11:58 PM
thanks for the info..alhamdulillah..menjadi..
Cik SHiN~JU Cik SHiN~JU 12:23 AM
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?
Dawy Dawy 12:34 PM
kalau nak letak shout box kat dalam tuh camne ek ?
send kat blog dawy eh . :)
bdkminang bdkminang 6:02 PM
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/
Nescafe ais Nescafe ais 6:06 PM
@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>
Afiq Afiq 6:50 PM
memang menjadik~! hehe thnkx :D
MuJE MuJE 5:30 PM
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
Radang telinga Radang telinga 1:43 PM
makasih ilmunya gan..langsung di praktekin ilmunya niihh..
Trigliserida Trigliserida 1:45 PM
langsung dicoba aja gan ilmunya..makasih udh shre..
Jerawat Jerawat 1:46 PM
buat ngembaliinnya gimana gan??
Penyakit Sinusitis Penyakit Sinusitis 1:47 PM
biar ga penasaran langsung nyoba aj deehh gan..
Penyakit Sinusitis Penyakit Sinusitis 1:48 PM
biar ga penasaran langsung nyoba aj deehh gan..