Selamat datang di Blog Nora'Creativity™; .Com

Cara Mudah Pasang Photo Slid Show Di Blog

Senin, 15 Oktober 20120 komentar

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/AVvXsEiqZAbf6tzAIPk4Bb-GJbnQo5mfLfKzHchUXrn5jqM2a6Yv8N9WJDO78YkbgVGo81fI6e0KB7GC45Pf12u0J6XZdr6YZzA38GegYtttRyuf4udEW0Y1-H5ANTC9lsV5DTabRkunOi-MI43c/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/AVvXsEgSdAXR24oQfG3S7-uYMZQCLDAN2wu9AVBcuEtCilcb2Ixo5JqPlO6LSEHO78CXjdKKXyezpVq4MIPJiIxaWx3RR4ROoJ9TARhIZ8-d0BMbj7dSNElkBLSfFopeHEgHQ-V5KZfJZsJ25llF/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/AVvXsEgDYEoncdUxL4Ov-STZr0RbOedoUYYTb9AgXuGrkLZkcSsTVzae1_PejJI38sxHsWyPfVBPuc7bJsTeclOE7AGiGVO8Fv97QpSFvBE67-trCe_4cN3Ac5QV0Ysxz_bTG2IYHLIU_4QUdPOq/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/AVvXsEiXid2BTck6_fb3DebwWHO3uYYs-oc5fBrRiusEYv29zryQkXxkHRv0YScCEaTI5USbLtWEknEhX87CklZ_uAG1I3T0jtiJt5TZ5eDYC6RudmMKzpVwp2YBfkr-pB97c0E2wmMqXyRVaQwO/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/AVvXsEichyphenhyphen-r4cywH6H2loIQd6IlZ9qhKunugdjweIzGTEWp-kBgOorUdVfq4mS-NpAzLmoFTh34RK6BxN1bto0PihnT1kC3mDr8cnd-cvzak-i5YDRqeodtnL2NNKENu1rqWBQT4O7OxUrhXxm4/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/AVvXsEiLg1-R06TUl5kcE-T9mOS95P7tROo2O10iFxeKyrnz9dfn_XXfzuo-eBpYEfB_0DirOXHXmXF338j1eIvVZCLbhtN2ND6kBLxWpy_eJL4DwnLvR4Dwdt7jmMz9jxMgU1KpLcqNyT18bebn/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......???
Share this article :

Posting Komentar

 
Support : JokoRowoTlogoRejo | Creating Website | Johny Template | Mas Templatea | Pusat Promosi
Copyright © 2011. Nora'Creativity™ - All Rights Reserved
Template Created by Creating Website Modify by ! Bakalan-Tlogorejo-City
Proudly powered by Blogger