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.