Cara Mudah Pasang Photo Slid Show Di Blog

Hallo Sahabat ! Bakalan-Tlogorejo-City --->> Apa Kabar...? Kali Ini Saya Akan Berbagi Dengan Sahabat Blogger Dan Pembaca Setia....Mengenai Cara Mudah Pasang Photo Slid Show Di Blog>>Cara Mudah Pasang Photo Slid Show Di Blog

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/AVvXsEitrsctH_tPBA8qeeO8M-E0-t0bz_3Nu8dHAoxaPhYVO3iNn4376r2Kf61xgdCiJlwKmm22yYnkZd_2v_A__Qezy8Z7H9tvKUsNPmJyK_rahNxtSPPWCktTDPeBPjPoxTqX2X4GG2SgAb8V/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://bakalan-tlogorejo-city.blogspot.com'><img height="240px" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjI3rUkqKgaGV_NF-USw11CncjQDuQObcWcpHrdI5g6MDGhhTHTJyUZ4d6xLQ54XaoJ0e2SD74zVo6_-gMDNCmidEb8hosN7zXJPQFK_zZ2-2gT-Sq3bKpRwNnl4DZSLKItMMKxBOADWIc0/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/AVvXsEhLuustx_7DdbFX-TpgUwkblBPOrfsnmyYSOi2etyfIus2U61DNCVN8O6AkKFNz5_hlWqsWCb5pbk3GJHcL5dJ-kKZvWQ1ADhQ_BBs5nYH2CnWKO0gkrZt10OR3G0H_ooNRgZo3nR2kO6P_/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/AVvXsEhxeWAbE0Ugk1Vwjh1L4Bu4dM7IyWtrk9fWb-Ed6RhrWGA2Zl6S8p8WtH3__zflqOcPReRDu-cZcJ-rQVhg7_YnU91w90raGEpSVP7-aIaeZ4bd5cuBPvuBLQSU8NnfMmqtQCdMR2Q7rCxU/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/AVvXsEjtXV7fq_xZI14NQ2V3F9oI_haJQvIhrEoa7nnBCqrnnBwYnMv75lEQBb2xJgAxvRNgmAIP7Qq9y2XOPFTSXmxTKmmzK6ceFPRqicOVevLM2pOcsSspIUbAWFs16_4hxu31iDt8Iv6-4DqJ/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/AVvXsEi4CUA_iaB91JZ6dRib-GgEDgZ_2aVSvyish1l2n3d0RwMbb6mq-qkGRGN9KIYfi1WmKRqfuzCUHNE0df9wg0O-6-vPqjpFrjEFeVQv5CdxuURVwr58nhPOTJj3pix2VJxCfuTAnY4vflzW/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......???