1News Online:
Home » » Tutorial Blog - Cara pasang photo slider pada blogspot

Tutorial Blog - Cara pasang photo slider pada blogspot

Wednesday, October 31, 2012 | 3:15 AM


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.

Kongsi artikel ini : :

Post a Comment

 
Copyright © 2012. 1News Online - All Rights Reserved
Proudly powered by Blogger