Untuk memasang photo slider seperti yang boleh anda taruh di widget sobat, silahkan 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/AVvXsEjiYmKai5IyBxjQWwA8qCWZ1lKEG76C9aq0nIMGySEwEFOKbt1z6PH-rpvY_D4rDlNK5oAT5lLHXgmOHO01WSgLsUlpn94StE8G62rlYfxVq8pwG2Mi5_bhxtjiau-yJs6M8Im9PLxLns3Y/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('#slider').css('visibility','visible');
$jx("#slider").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://bakalan-tlogorejo-city.blogspot.com'><img height="240px" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmCnb_MZTXSuEppWi4gTzW0NC-gI9cURVcvU_byQPxKzz7y-xfcN4V0KzQ7Ikqjg58dk8_j2jm1tAI0t_DdwiWWvqdY6-8iRlqouCTale9wTwK2mRHZ-UF76su_JgT0boRKrX4dHK4nes9/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://bakalan-tlogorejo-city.blogspot.com'><img height="240px" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimUC4Yjzo2G4_GatNgpifBlQJRojW19JFtXWWxF7ac0PvtyhL234ceXXqPKEErG4CPqYCP-Nt6lty4wtBAIF3BuSprd-W-WR8BVfhl85rM7P_X86o-aMubLKdRfv2snlDhUcPq-RiinX-N/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://bakalan-tlogorejo-city.blogspot.com'><img height="240px" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtDdjxald3Bg52OH8yip26_gkVafXAz1-0T79ueerzMu5T689DENWNu8BzZESwtmbps4MPof3RCU43vUFhKHmvfeAnxJ9xNfQh3ZU6GDGVCU1l8UzqQXmum_tT21tjOwi5aUTzgIQk-OzW/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://bakalan-tlogorejo-city.blogspot.com'><img height="240px" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiM3IgOjdgOJozcmcUuyIFuHRnFaC223e6i42GpSrkI_KtFqRK1ZMrWgArZ_AEiu5rPhA9fX-MMJZAR1BIaDSVdxmE9Iil9n1_ivbxkJGdqECOqEadKrVPfS9cCJxmgsAyh-K8eJJdd7hFX/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://bakalan-tlogorejo-city.blogspot.com'><img height="240px" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdn-80oy10CoseNbfV3dC1sDo8Qi9eOvfjI5uGOXbUF0Nyr4Dhi2vOnFRQvE8puBAMCZv8reXzIPy0JAppFEIw6l-dl4kng9uy6HDpRHvn6S-HShgMkcB6DwcmWZg1MaXSA8zFTMtbjEtr/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.
Selamat mencoba,,,,Semoga Artikel ini bermanfaat......???
Sobat Blogger sedang berada di halaman Cara Mudah Pasang Photo Slid Show Di Blog dan Sedang membaca artikel Cara Mudah Pasang Photo Slid Show Di Blog ini dengan url http://arafcreativity.blogspot.com/2012/10/cara-mudah-pasang-photo-slid-show-di.html. Dan Sobat Blogger juga boleh COPAS artikel Cara Mudah Pasang Photo Slid Show Di Blog ini jika bermanfaat dan jangan lupa untuk meletakkan link Cara Mudah Pasang Photo Slid Show Di Blog sebagai sumbernya.
0 komentar:
Posting Komentar