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(http://3.bp.blogspot.com/_k_DnmK4oz2Q/S1GU271E-kI/AAAAAAAAAcw/vakNjI31E00/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="http://1.bp.blogspot.com/_k_DnmK4oz2Q/S1GTgTwc0aI/AAAAAAAAAaQ/wY2fwTSflNA/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="http://4.bp.blogspot.com/_k_DnmK4oz2Q/S1GTghuWEAI/AAAAAAAAAaU/n1TmuunonOA/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="http://2.bp.blogspot.com/_k_DnmK4oz2Q/S1GTgvgkvkI/AAAAAAAAAaY/mNJtHvbgJpY/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="http://4.bp.blogspot.com/_k_DnmK4oz2Q/S1GTg6FhmSI/AAAAAAAAAac/9rkv7NheLco/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="http://2.bp.blogspot.com/_k_DnmK4oz2Q/S1GThDM6vhI/AAAAAAAAAag/KJ-YKJz5YiQ/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.


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

Liyanaa. Liyanaa. 9:07 PM
datang memancing sambil main slide slide HAHA :P
wakmizie wakmizie 4:22 PM
mcm mana nak bagi supaya slider ade kat tengah2 column yer???
wakmizie wakmizie 5:02 PM
lagi satu wak punyer slider x begerak pun.. asyik gambar sama jer..
Iza Iza 10:58 PM
Cantik la tapi mcm berat je nampak
Nescafe ais Nescafe ais 8:59 AM
@wak mizie

Rasanya mungkin ada silap.

@Iza

Kalau tak ada keperluan, rasanya tak payah kut pasang slider ni
shuko shuko 11:57 AM
bro..kalau slide untuk entri kite yg lepas2 ade x?
Ahmad Syazwan B. Ahmad Tarmizi Ahmad Syazwan B. Ahmad Tarmizi 5:42 PM
thanks tuan rumah
nak tanya 1 akaun gmail boleh create berapa buah blog?
Nescafe ais Nescafe ais 7:30 PM
@Ahmad Syazwan

Banyak juga. Tapi kalau boleh, jangan buat blog banyak-banyak guna satu akaun. Takut nanti blogger.com suspend akaun tu.
rehan rehan 11:23 AM
TUMPANG TANYER...
camner nak buat bagi posting kita semua kat page depan sahaja.... scroll saje sampai habis...

harap dapat bantu
rehan rehan 2:33 PM
Waduhh..mana en.nescafe ni, tak dpt aku nak cun kan blog aku tanpa bantuan mu...uwaaa.....
kancingjingga kancingjingga 4:05 PM
thanks sangat membantu
sofi sofi 4:52 PM
thanx, kak sofi dah buat di blog dan berjaya.
kak sofi suka sangat hehe.
wanart shd wanart shd 8:07 PM
berjaya
klau x caya tngok ni...
http://www.download-warezbb.blogspot.com

Terima Kasih
ictsmkppasir ictsmkppasir 8:55 AM
KALU NAK LETAK KOLEKSI PHOTO SEK MCM MANA..BAHAGIAN SRC..TU...BAHAGIAN SOURCE TU..NAK BUAT MCMMANA
ictsmkppasir ictsmkppasir 8:56 AM
BAHAGIAN SRC TU MCM MANA??
yangyuyu yangyuyu 2:34 PM
slider ni boleh buat di bahagian header tak?
Nescafe aisNescafe ais 2:36 PM
@yangyuyu

Cuba check kat sini.

http://maribinablog.blogspot.com/2010/06/cara-pasang-jquery-slideshow-header.html
soleheen_D soleheen_D 5:37 PM
boleh x kalo kite nk letak gmbr sndri?...mcm blog sy die da tersedia ngn gmbr die..nk tuka tp x reti...please help me
Bro Azqar Bro Azqar 7:42 PM
uit.... nak tumpang tanyewr.. macam manew ek nak bg slide tu memanjang ala2 HDD widescreen tuu.. hehe =)
linjar linjar 11:02 AM
trimakasih banyak atas ilmunya,smoga dberkahi Allah SWT.amin
AnonymousAnonymous 8:49 PM
sy wat knape slide x gerak ye?
klikmassa klikmassa 5:26 PM
@Ahmad Syazwan B. Ahmad Tarmizi

Pengalaman saya-satu akaun gmail boleh 10 buah blog dengan sepuluh nama pula..
hakimhakim 5:35 PM
boleh fix x, klu sy guna subdomain blogspot ok, tp bila set domain berbayar terus x ok.