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.
Cara pasang photo slider pada blogspot

datang memancing sambil main slide slide HAHA :P

mcm mana nak bagi supaya slider ade kat tengah2 column yer???

lagi satu wak punyer slider x begerak pun.. asyik gambar sama jer..

Cantik la tapi mcm berat je nampak

@wak mizie

Rasanya mungkin ada silap.

@Iza

Kalau tak ada keperluan, rasanya tak payah kut pasang slider ni

bro..kalau slide untuk entri kite yg lepas2 ade x?

thanks tuan rumah
nak tanya 1 akaun gmail boleh create berapa buah blog?

@Ahmad Syazwan

Banyak juga. Tapi kalau boleh, jangan buat blog banyak-banyak guna satu akaun. Takut nanti blogger.com suspend akaun tu.

TUMPANG TANYER...
camner nak buat bagi posting kita semua kat page depan sahaja.... scroll saje sampai habis...

harap dapat bantu

Waduhh..mana en.nescafe ni, tak dpt aku nak cun kan blog aku tanpa bantuan mu...uwaaa.....

thanks sangat membantu

thanx, kak sofi dah buat di blog dan berjaya.
kak sofi suka sangat hehe.

berjaya
klau x caya tngok ni...
http://www.download-warezbb.blogspot.com

Terima Kasih

KALU NAK LETAK KOLEKSI PHOTO SEK MCM MANA..BAHAGIAN SRC..TU...BAHAGIAN SOURCE TU..NAK BUAT MCMMANA

BAHAGIAN SRC TU MCM MANA??

slider ni boleh buat di bahagian header tak?

Nescafe ais
delete

@yangyuyu

Cuba check kat sini.

http://maribinablog.blogspot.com/2010/06/cara-pasang-jquery-slideshow-header.html

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

uit.... nak tumpang tanyewr.. macam manew ek nak bg slide tu memanjang ala2 HDD widescreen tuu.. hehe =)

trimakasih banyak atas ilmunya,smoga dberkahi Allah SWT.amin

Anonymous
delete

sy wat knape slide x gerak ye?

@Ahmad Syazwan B. Ahmad Tarmizi

Pengalaman saya-satu akaun gmail boleh 10 buah blog dengan sepuluh nama pula..

boleh fix x, klu sy guna subdomain blogspot ok, tp bila set domain berbayar terus x ok.