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.