Buat tab menu dengan CSS Tab Designer

CSS Tab designer adalah software yang sangat mudah digunakan untuk membina sendiri tab menu yang berbentuk vertical atau horizontal.

Terdapat lebih daripada 60 jenis design tab button yang sangat menarik yang disediakan oleh highdots.com. Anda hanya perlu memilih design yang berseuaian dengan theme blog anda.

Untuk mencuba CSS Tab Designer ini, sila download disini (sila klik)

Read More

Apa ada pada script template blogspot

Pada dasarnya, template blogger yang kita gunakan dibina dari HTML. Untuk lebih mudah lagi, pada script HTML, terdapat kod pembuka yang berkod seperti ini <contoh> dan penutup </contoh>. Di dalam script HTML juga terdapat dua lagi script iaitu CSS dan Javascript.

Di bawah ini, dipaparkan contoh kod HTML, CSS dan juga Javascript yang terdapat pada template blog.

Contoh kod HTML

Contoh CSS script

Contoh Javascript

Tip mengedit script template blogspot.

Apabila kita ingin membuat ubahsuai pada template, contohnya mengubah warna, jenis font, saiz font atau background pada blog, kita hanya perlu menumpukan pada CSS script sahaja tanpa mengganggu atau mengubah kod HTML dan javascript.

Sebelum membuat ubahsuai pada bahagian CSS script, kita perlu memahami beberapa kod asas yang penting.

body { (Merujuk kepada background pertama)

#header-wrapper { (Merujuk kepada header blog)

#outer-wrapper { (Merujuk kepada background ke2)

 #main-wrapper { (Merujuk kepada bahagian posting)

#sidebar-wrapper { (Merujuk kepada bahagian sidebar)

Jika kita ingin mengedit bahagian header blog, contohnya ingin menambah lagi lebar header, kita hanya perlu menumpukan bahagian #header-wrapper sahaja. Apa yang perlu kita lakukan adalah, menambah nilai width pada bahagian #header-wrapper tersebut.

Contoh:

#header-wrapper {
  width:660px;
  margin:0 auto 10px;
  border:1px solid $bordercolor;
  }

Read More

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.

Read More

Cara pasang tab menu accordion di sidebar

Jika anda ingin menjimatkan ruang dibahagian sidebar, anda boleh mencuba tab menu yang berefek accordion seperti yang boleh dilihat di sini(sila klik). Pada tab accordion tersebut, terdapat 3 widget iaitu Recent Comments, Top Commentators dan Popular Posts. Untuk pergi ke ruangan yang berkaitan, hanya perlu klik pada title tab tersebut.

Untuk memasang tab accordion beserta widget Recent Comments, Top Commentators dan Popular Posts, sila ikut beberapa langkah dibawah.

p/s: Sila backup script template anda terlebih dahulu.

Langkah 1

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

Langkah 2

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


Langkah 3

Salin kod biru di bawah dan paste sebelum atau diatas kod ]]></b:skin>
Ada boleh edit kod biru yang dibold dengan menggantikannya dengan kod warna yang sesuai. Kod warna boleh anda pilih disini.(sila klik)

dl {

width: 95%;}

dl,dd {

margin: 0px 10px;}

dt {

background: #e5e5e5;

font-size: 12px;

padding: 2px 20px;

margin: 2px;

border:2px solid #888888;

-moz-border-radius-topleft:5px;

-moz-border-radius-topright:5px;

-moz-border-radius-bottomleft:5px;

-moz-border-radius-bottomright:5px; 

}

Langkah 4

Sekali lagi, pada ruang Find, taip atau paste kod </head> . Seterusnya tekan Enter

Langkah 5

salin kod merah dibawah dan paste diatas atau sebelum kod </head>

<script src='http://sites.google.com/site/defaultjssite/jquery1.js'/>
    <script>
    $(document).ready(function(){
        $(&quot;dd:not(:first)&quot;).hide();
        $(&quot;dt a&quot;).click(function(){
            $(&quot;dd:visible&quot;).slideUp(&quot;slow&quot;);
            $(this).parent().next().slideDown(&quot;slow&quot;);
            return false;
        });
    });
    </script>

Seterusnya klik Preview dan jika tiada mesej Error yang terpapar, klik Save.

Langkah 6

Salin kod hijau dibawah dan paste pada notepad. Gantikan kod yang di bold dengan URL blog dan nama anda. Kemudian salin kod yang telah siap di edit ini ke dalam Add A Gadget => HTML/Javascript

<dl>
    <dt><a href="/">Recent Comments</a></dt>
    <dd>
        <ul>
<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 disini.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script>
    </ul>
        </dd>

    <dt><a href="#">Top Commentators</a></dt>
    <dd>
        <ul>
<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 disini.blogspot.com&num=10&filter=nama anda disini" type="text/javascript"></script>
    </ul>
        </dd>

    <dt><a href="#">Popular Posts</a></dt>
    <dd>
    <ul>
<script language="JavaScript">
aBold = false;
numposts=1000;
maxshowresult=10;
home_page = "http://URL dsini.blogspot.com/";
</script>
<script src="http://sites.google.com/site/testingsahaja/toppost.js" type="text/javascript"></script>
    </ul>
        </dd>
</dl>

Akhir sekali klik Save.

Read More

Efek salji pada kursor mouse

Efek salji pada kursor mouse seperti yang boleh anda lihat pada blog ini (sila klik) boleh di pasang di blog anda dengan cara yang sangat mudah.

Untuk memasang efek tersebut, sila ikut beberapa langkah yang mudah dibawah.

Langkah 1

Log in blog => Dashboard => Layout => Add A Gadget => HTML/Javascript.


Langkah 2

Salin kod biru dibawah dan paste pada ruang Content HTML/Javascript.

p/s: Anda boleh mengubah warna efek dengan mengubah kod yang dibold. black boleh di ubah kepada warna kegemaran. Jika anda meminati warna merah contohnya, anda boleh gantikan black kepada red.

<script type='text/javascript'>

// <![CDATA[

var colour="black";

var sparkles=100;

var x=ox=400;

var y=oy=300;

var swide=800;

var shigh=600;

var sleft=sdown=0;

var tiny=new Array();

var star=new Array();

var starv=new Array();

var starx=new Array();

var stary=new Array();

var tinyx=new Array();

var tinyy=new Array();

var tinyv=new Array();

window.onload=function() { if (document.getElementById) {

var i, rats, rlef, rdow;

for (var i=0; i<sparkles; i++) {

var rats=createDiv(3, 3);

rats.style.visibility="hidden";

document.body.appendChild(tiny[i]=rats);

starv[i]=0;

tinyv[i]=0;

var rats=createDiv(5, 5);

rats.style.backgroundColor="transparent";

rats.style.visibility="hidden";

var rlef=createDiv(1, 5);

var rdow=createDiv(5, 1);

rats.appendChild(rlef);

rats.appendChild(rdow);

rlef.style.top="3px";

rlef.style.left="0px";

rdow.style.top="0px";

rdow.style.left="3px";

document.body.appendChild(star[i]=rats);

}

set_width();

sparkle();

}}

function sparkle() {

var c;

if (x!=ox || y!=oy) {

ox=x;

oy=y;

for (c=0; c<sparkles; c++) if (!starv[c]) {

star[c].style.left=(starx[c]=x)+"px";

star[c].style.top=(stary[c]=y)+"px";

star[c].style.clip="rect(0px, 5px, 5px, 0px)";

star[c].style.visibility="visible";

starv[c]=50;

break;

}

}

for (c=0; c<sparkles; c++) {

if (starv[c]) update_star(c);

if (tinyv[c]) update_tiny(c);

}

setTimeout("sparkle()", 40);

}

function update_star(i) {

if (--starv[i]==25) star[i].style.clip="rect(1px, 4px, 4px, 1px)";

if (starv[i]) {

stary[i]+=1+Math.random()*3;

if (stary[i]<shigh+sdown) {

star[i].style.top=stary[i]+"px";

starx[i]+=(i%5-2)/5;

star[i].style.left=starx[i]+"px";

}

else {

star[i].style.visibility="hidden";

starv[i]=0;

return;

}

}

else {

tinyv[i]=50;

tiny[i].style.top=(tinyy[i]=stary[i])+"px";

tiny[i].style.left=(tinyx[i]=starx[i])+"px";

tiny[i].style.width="2px";

tiny[i].style.height="2px";

star[i].style.visibility="hidden";

tiny[i].style.visibility="visible"

}

}

function update_tiny(i) {

if (--tinyv[i]==25) {

tiny[i].style.width="1px";

tiny[i].style.height="1px";

}

if (tinyv[i]) {

tinyy[i]+=1+Math.random()*3;

if (tinyy[i]<shigh+sdown) {

tiny[i].style.top=tinyy[i]+"px";

tinyx[i]+=(i%5-2)/5;

tiny[i].style.left=tinyx[i]+"px";

}

else {

tiny[i].style.visibility="hidden";

tinyv[i]=0;

return;

}

}

else tiny[i].style.visibility="hidden";

}

document.onmousemove=mouse;

function mouse(e) {

set_scroll();

y=(e)?e.pageY:event.y+sdown;

x=(e)?e.pageX:event.x+sleft;

}

function set_scroll() {

if (typeof(self.pageYOffset)=="number") {

sdown=self.pageYOffset;

sleft=self.pageXOffset;

}

else if (document.body.scrollTop || document.body.scrollLeft) {

sdown=document.body.scrollTop;

sleft=document.body.scrollLeft;

}

else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {

sleft=document.documentElement.scrollLeft;

sdown=document.documentElement.scrollTop;

}

else {

sdown=0;

sleft=0;

}

}

window.onresize=set_width;

function set_width() {

if (typeof(self.innerWidth)=="number") {

swide=self.innerWidth;

shigh=self.innerHeight;

}

else if (document.documentElement && document.documentElement.clientWidth) {

swide=document.documentElement.clientWidth;

shigh=document.documentElement.clientHeight;

}

else if (document.body.clientWidth) {

swide=document.body.clientWidth;

shigh=document.body.clientHeight;

}

}

function createDiv(height, width) {

var div=document.createElement("div");

div.style.position="absolute";

div.style.height=height+"px";

div.style.width=width+"px";

div.style.overflow="hidden";

div.style.backgroundColor=colour;

return (div);

}

// ]]>

</script>

Akhir sekali, klik Save.

Read More

Cara pasang tab menu versi 2

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, Tekan kekunci Ctrl dan F secara serantak. Ruang Find akan muncul. Seterusnya, taip atau paste kod </head> pada ruang Find dan seterusnya tekan Enter.

Langkah 3

Salin kod berwarna biru di bawah dan paste di atas atau sebelum kod </head>

<link href=' http://sites.google.com/site/javascript10/jquery.ui.all.css' rel='stylesheet' type='text/css'/>

<script src='http://sites.google.com/site/javascript10/jquery.js' type='text/javascript'/>

<script src='http://sites.google.com/site/javascript10/jquery-ui.js' type='text/javascript'/>

<script type='text/javascript'>

$(document).ready(function(){

$(&quot;#tabs&quot;).tabs();

});

</script>

Seterusnya, klik Preview dan jika tiada mesej Error yang terpapar, klik saja Save.

Langkah 4

Salin kod berwarna merah di bawah dan edit pada notepad. Anda boleh gantikan teks masukkan teks, link atau script disini yang di bold dengan teks,link ataupun script anda. Contoh script yang boleh anda masukkan adalah seperti recent comments, top commentators, popular posts atau shout box.

<div id='tabs'>

<ul>

<li><a href='#fragment-1'><span>Title 1</span></a></li>

<li><a href='#fragment-2'><span>Title 2</span></a></li>

<li><a href='#fragment-3'><span>Title 3</span></a></li>

</ul>

<div id='fragment-1'>

Masukkan teks, link atau script anda disini 1

</div>

<div id='fragment-2'>

Masukkan teks, link atau script anda disini 2

</div>

<div id='fragment-3'>

Masukkan teks, link atau script anda disini 3

</div>

</div>

Langkah 5

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

Langkah 6

Salin kod yang telah siap di edit(rujuk langkah 4) dan paste pada ruang Content HTML/Javascript.(rujuk langkah 5)

Akhir sekali, klik Preview dan seterusnya, klik saja Save.

Read More

Cara resize text pada link

Jika anda letakkan kursor mouse pada active link, contohnya pada tajuk post ini, teks pada tajuk tersebut berubah saiznya. Efek ini sebenarnya sangat mudah untuk di buat kerana anda hanya perlu membuat sedikit ubahsuai pada script template yang sedang anda gunakan. Anda hanya berlu mengubah di bahagian CSS dengan mencari kod a:hover { dan edit pada bahagian font size.

Satu cara lagi yang paling mudah ialah dengan mengikut beberapa langkah dibawah.

Langkah 1

Log n blog => Dashboard => Layout => Edit HTML

Langkah 2

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

Langkah 3

Salin kod biru dibwah dan pastekan kod tersebut diatas atau sebelum kod ]]></b:skin>

Anda boleh edit angka 18 jika efek pada text menjadi terlebih besarnya. bold juga boleh ditukar kepada normal.

a:hover {
font-size: 18px;
font-weight: bold;
text-decoration: none;
}


Contoh:

a:hover {
font-size: 18px;
font-weight: bold;
text-decoration: none;
}
]]></b:skin>

Akhir sekali, klik Preview dan jika tiada mesej Error terpapar, klik saja Save.

Read More

Cara backup template dan posting di blogspot

Selepas memperkenalkan beberapa fetures yang baru kepada blogger yang berplatform blogspot, dalam masa yang sama,  blogger.com sedang giat mengemaskini hosting mereka dengan menghapuskan blog-blog yang dikategorikan sebagai melanggar syarat.

Perkara paling penting yang perlu anda elakkan adalah membina banyak blog dengan hanya menggunakan satu akaun.

Sebagai mengambil langkah berjaga-jaga, anda di nasihatkan supaya membuat backup pada template dan juga entri yang di post.


Untuk membuat backup pada template yang sedang kita gunakan, caranya adalah sangat mudah.

Langkah 1

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

Langkah 2

Klik pada Download Full Template (rujuk gambar diatas). Kemudian, tandakan pada Save file dan seterusnya klik Save.


Untuk membuat backup pada entri yang di post pada blog.


Langkah 1

Log in blog => Dashboard => Settings

Langkah 2

Pada bahagian Blog Tools, klik pada Export Blog(rujuk gambar diatas), seterusnya klik pula pada button DOWNLOAD BLOG.

Read More

Widget yang perlu ada pada blogspot

Pada entri kali ini, gua ingin berkongsi sedikit pandangan tentang penggunaan widget yang sesuai pada blog. Pandangan ini adalah berdasarkan pengalaman yang seterusnya membawa kearah proses penambahbaikan. Dan proses ini adalah berterusan demi kepuasan visitors.

Seperti yang kita semua maklum, widget ataupun gadget ini merupakan satu elemen tambahan yang sangat penting didalam blog. Penggunaan widget mampu menambahkan lagi seri sesebuah blog. Kata oranglah.

Biasanya, jika kita baru pertama kali membina blog, kita jadi keliru dan tidak tahu widget apa yang sepatutnya di pasang pada blog dan ada juga yang mungkin terlalu seronok hingga terlupa yang blog telah dipenuhi dengan widget di segenap ruang.

Semakin banyak widget yang di pasang, semakin lambatlah masa untuk proses loading page blog kita. Bagi pengguna blogspot, kita tidak boleh membandingkan masa untuk proses loading dengan pengguna wordpress kerana berbeza dari segi proses download dari hosting.

Dalam memilih widget yang sesuai, perkara paling penting sekali yang perlu kita faham adalah kegunaan dan apa fungsi widget tersebut, dan adakah ianya dapat membantu kita dan juga visitors yang masuk dan membaca entri yang ada didalam blog sama ada dapat menaikkan rating, page view ataupun komen.

Di sini, di senaraikan 10 jenis widget yang perlu ada di dalam blog kita. Widget-widget ini sebenarnya sangat-sangat membantu untuk menaikkan rating, page view ataupun komen pada blog kita.

1. Followers

2. Shout box (Jika perlu)

2. Recent comments

4. Blog Archive

5. Labels

6. Related posts

7. Feed

8. Blog List (Jika perlu)

9. Link list (Jika perlu)

10. Popular posts (Jika perlu)

Read More

Cara pasang photo slider pada blogspot

Untuk memasang photo slider seperti yang boleh anda lihat pada blog ini (sila klik), sila ikut beberapa langkah di bawah.

Langkah 1

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

Langkah 2

Dengan menggunakan keyboard, tekan kekunci Ctrl+F dan taip atau paste kod ]]></b:skin> pada ruang Find.seterusnya tekan kekunci Enter.

Langkah 3

Salin kod CSS di bawah dan paste diatas atau sebelum kod ]]></b:skin>

p/s: Anda boleh edit kod yang di bold mengikut kesesuaian saiz width dan height.

/*Slider*/
#coverslide{
position:relative;
width:340px;
float:center;
height:230px;
margin-left:30px;
border:2px solid #666666;
overflow: hidden;
}
#slider ul{
margin:0px 0px;
padding:0;
list-style:none;
}
#slider li{
width:340px;
height:230px;
overflow:hidden;
margin:0px 0px;
}
.slider-position {
position:relative;
}
.post-tittle {
position: absolute;
background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgl2u7E7GN-zv3r64kiropBiqw9moAPe41PD_JfIRDM6tnF8_h0kVeBMBylS8M__SjB7X3WBAVHCnEzbSUBQIMNOXCesF84zu_p96mq0IUoQJK6PQC4t1nqakOG8yuRgM3MoDyIZvmTqkue/s1600/titlebg.png) repeat 0 0;
font-family:Trebuchet MS;
font-style:bold;
width:340px;
height:36px;
margin-top:195px;
overflow: hidden;
}
.post-tittle h3 {
padding:0px 10px 0px 10px;
margin:0 0 -10px 0;
font-size: 16px;
font-weight:bold;
color: #ffffff;
}
.post-tittle-p {
font: italic 12px Trebuchet MS;
padding:0px 0px 0px 10px;
color:#cccccc;
}

Langkah 4

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

Langkah 5

Salin javascript di bawah dan paste diatas atau sebelum kod </head> . Seterusnya klik Preview dan jika tiada mesej Error terpapar, klik saja Save.

<script src='http://sites.google.com/site/javascript10/jquery-1.2.6.min.js' type='text/javascript'/>

<script src='http://sites.google.com/site/javascript10/jquery-ui-personalized-1.5.2.packed.js' type='text/javascript'/>

<script src='http://sites.google.com/site/javascript10/easyslider.js' type='text/javascript'/>

<script type='text/javascript'>

var $jx = jQuery.noConflict();

$jx (document).ready(function(){

$jx(&#39;#slider&#39;).css(&#39;visibility&#39;,&#39;visible&#39;);

$jx(&quot;#slider&quot;).easySlider({

auto: true,

continuous: true

});

});

</script>

Langkah 6

Salin kod HTML dibawah dan paste pada notepad. Edit pada URL gambar dan juga teks yang di bold pada kod.

<div id='coverslide'>

<div id='slider'>

<ul>

<!--Start Slide Code Set-->

<li>

<div class='slider-position'>

<div class='post-tittle'>

<h3>Natlie Imbruglia</h3>

<div class='post-tittle-p'>

<p>Doesn`t she look very cool?</p></div>

</div><!--end post-tittle-->

</div><!--end slider-position-->

<a href='http://maribinablog.blogspot.com'><img height="240px" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiInCnVBpMUhgcCn0GUPJDBkqQdD-sp8JnzWz67qpKhkf-J-enF4dEKxyIOuEd8NXGBW4E09mAsqmVZN6IRxrpwd4qUWTvGRtIq_MkvzJI2UVszjZhWQeF0ZCyOQg8RHAW0DbUDYCVeIZo9/s1600/Natalie-Imbruglia.jpg" width="400px" /></a>

</li>

<!--End Slide Code Set-->

<!--Start Slide Code Set-->

<li>

<div class='slider-position'>

<div class='post-tittle'>

<h3>Thousands of Years</h3>

<div class='post-tittle-p'>

<p>Earth has lived thousands of years...</p></div>

</div><!--end post-tittle-->

</div><!--end slider-position-->

<a href='http://maribinablog.blogspot.com'><img height="240px" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEkFI4NNszJ9VxHTQp-9K1hqMZVojJnx2UgSg3_NpfZIMsG01m4kM8spKAcMTTpSkVAUbKm2nU6ax27WXcMs3XrI2r0Pon65u_F9MUFEIXY_3thYVzdB3KL9P2qdrUGA7AsehHHjKlxupE/s1600/Thousand_Years.jpg" width="400px" /></a>

</li>

<!--End Slide Code Set-->

<!--Start Slide Code Set-->

<li>

<div class='slider-position'>

<div class='post-tittle'>

<h3>Fruits</h3>

<div class='post-tittle-p'>

<p>Fruits are vital for health and their nutrients...</p></div>

</div><!--end post-tittle-->

</div><!--end slider-position-->

<a href='http://maribinablog.blogspot.com'><img height="240px" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuXaM76LXdZzWBoYVSvZa8vV4Quh-OweNtFXJdkmk-qrylOW3f_xXb8kH9sysimpa1wmdLKW80ugLU8noCEJHSBtT_sQmVrKXP9XRTQz5VWFGpyP0zfTu-kpsStVAd4-fqLIQVEfxuDhXd/s1600/Fruits.jpg" width="400px" /></a>

</li>

<!--End Slide Code Set-->

<!--Start Slide Code Set-->

<li>

<div class='slider-position'>

<div class='post-tittle'>

<h3>The Lonely Road</h3>

<div class='post-tittle-p'>

<p>The Lonely Road reminds Me with You...</p></div>

</div><!--end post-tittle-->

</div><!--end slider-position-->

<a href='http://maribinablog.blogspot.com'><img height="240px" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxfiW3iP7u2wm23m2BIgYrTNQw80s4Q_HQ73R9Kc6YviKILKFDBzbNvQevELdP-H8UNEQe6ckJg1Og8rqkHyQ4jzXHYsQ7O6kvTYLCWdjQbxKp0Zb2HeCKU5aVIEhSFKj6CPMRPqgTchey/s1600/The_Lonely_Road.jpg" width="400px" /></a>

</li>

<!--End Slide Code Set-->

<!--Start Slide Code Set-->

<li>

<div class='slider-position'>

<div class='post-tittle'>

<h3>Twister</h3>

<div class='post-tittle-p'>

<p>Here are some twisting graphics for you...</p></div>

</div><!--end post-tittle-->

</div><!--end slider-position-->

<a href='http://maribinablog.blogspot.com'><img height="240px" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuFJElijolRfroYdkK54TesNvYp0rjgAklhZ-jy0-lK1XIDFy8j_dM_BvM66NKJEJXQkyu9ly1MTECTv0BWgZPJjlrgcZdWNr4XHVsgCti6KrNLVDdkSc5YUv__5Ga5e9368C1GIdqG2Dh/s1600/Twister.jpg" width="400px" /></a>

</li>

<!--End Slide Code Set-->

</ul>

</div><!--end slider-->

</div><!--end coverslide-->

Langkah 7

Klik pada Layout => Add A Gadget => HTML/Javascript. Seterusnya, salin kod yang telah siap di edit dan paste pada ruang Content HTML/Javascript.

Akhir sekali klik Save.

Read More