It's all about sharing information online | Site learning: Membuat slide show

Membuat Slide show Blogger.

Slide show dengan Jquery ini, tampilan nya ringan, jadi tidak akan memperberat tampilan blog sahabat.
Ok.. Begini cara membuat nya, Cekidot :

1.	Buka Akun BLog
2.	Klik tab Design / Pengaturan
3.	Klik tab Edit HTML
4.	Cari Kode Berikut </head>
5.	Letakkan kode dibawah ini sebelum </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){var currentPosition=0;var slideWidth=560;var slides=$('.slide');var numberOfSlides=slides.length;$('#slidesContainer').css('overflow','hidden');slides.wrapAll('<div id="slideInner"></div>').css({'float':'left','width':slideWidth});$('#slideInner').css('width',slideWidth*numberOfSlides);$('#slideshow').prepend('<span class="control" id="leftControl">Clicking moves left</span>').append('<span class="control" id="rightControl">Clicking moves right</span>');manageControls(currentPosition);$('.control').bind('click',function(){currentPosition=($(this).attr('id')=='rightControl')?currentPosition+1:currentPosition-1;manageControls(currentPosition);$('#slideInner').animate({'marginLeft':slideWidth*(-currentPosition)})});function manageControls(position){if(position==0){$('#leftControl').hide()}else{$('#leftControl').show()}if(position==numberOfSlides-1){$('#rightControl').hide()}else{$('#rightControl').show()}}
});
//]]>

</script>

6.	Jika Sudah, Kalian cari lagi kode ini ]]></b:skin>
7.	Dan letakan kode dibawah sebelum kode ]]></b:skin>

/*
Slideshow style rules.
*/
#contentSlide {
border: 1px solid #000;
background:#212421;
height:263px;
padding:10px 0;
}
#slideshow {
margin:0 auto;
width:640px;
height:263px;
background:transparent url(http://lh6.ggpht.com/_dfnTVAxeWMI/SlTPJpS_axI/AAAAAAAABYA/JS60KVWJ9GQ/bg_slideshow.jpg) no-repeat 0 0;
position:relative;
}
#slideshow #slidesContainer {
margin:0 auto;
width:560px;
height:263px;
overflow:auto; /* allow scrollbar */
position:relative;
}
#slideshow #slidesContainer .slide {
margin:0 auto;
width:540px; /* reduce by 20 pixels of #slidesContainer to avoid horizontal scroll */
height:263px;
}
.control {
display:block;
width:39px;
height:263px;
text-indent:-10000px;
position:absolute;
cursor: pointer;
}
#leftControl {
top:0;
left:0;
background:transparent url(http://lh6.ggpht.com/_dfnTVAxeWMI/SlT8KH99FgI/AAAAAAAABZM/e9gXvHjzltU/control_left.jpg) no-repeat 0 0;
}
#rightControl {
top:0;
right:0;
background:transparent url(http://lh6.ggpht.com/_dfnTVAxeWMI/SlT8KMpFpxI/AAAAAAAABZQ/a207Rx0XuiU/control_right.jpg) no-repeat 0 0;
}

.slide h2, .slide p {
margin:15px;
}
.slide h2 {
font:italic 24px Georgia, "Times New Roman", Times, serif;
color:#212421;
letter-spacing:-1px;
}
.slide img {
float:right;
margin:0 15px;
padding: 1px;
background-color: #212421;
border: 1px solid #999;
}

8.	Save.
9.	Selanjutnya klik tab Design / Rancangan. klik Elemen laman (page element)
10	Tambah Gadget, pilih Html Java/script
11	Copy kode di bawah ini

<!-- Slideshow HTML by www.sitelearning.net -->
<div id="contentSlide"><div id="slideshow">
<div id="slidesContainer">

<div class="slide">
<a href="http://www.sitelearning.net"><h2>Sitelearning.net</h2></a><p><a href="http://www.sitelearning.net"><img alt="Thor (2011)" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYpExw-LbfZ5BHM1vzcDM8JkBJGLggYWybprRu74kH8kUj8YSjafA9NIeT_krgj7-ZanhpXQ3cnFrXDN6mS2GY_Ye4lFeRwydBLLNQ19TZSDPwFitnBcj6EZQAOFZ4nMHdgIa50DJo9n4/h80/PR1.jpg" width="215" height="145" /></a>The powerful but arrogant warrior Thor is cast out of the fantastic realm of Asgard and sent to live amongst humans on Earth, where he soon becomes one of their finest defenders. </p>
</div>

<div class="slide">
<a href="http://www.sitelearning.net"><h2>Belajar blog</h2></a>
<p><a href="http://www.sitelearning.net"><img alt="Sucker Punch" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjTqszME3xOZLAAhIZA3bSaKJ3VBXL7ZxLVHhE0QfxFCH6dtM7kmGqlWsJSLc6BaLvAnBxzN_ED7U-HYH5j7I_6AWvCdUC5GdlSaf5zezZkAVs56T87z0h7mjyxLrhvXaBduVaaF_LxxM/h80/seo99.jpg" width="215" height="145" /></a>Sucker Punch is a 2011 action-fantasy thriller musical film about the fantasies of a young woman who is committed to a mental institution. It was written by Steve Shibuya and Zack Snyder and directed by Snyder</p></div>



<div class="slide">
<a href="http://www.sitelearning.net"><h2>Tips dan triks</h2></a><p><a href="http://www.sitelearning.net"><img alt="crysis2" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2ic6_yB_53SG_gubMURanCKUhAs6qrBQBA_J42xxBB_gTEFlNwvdwdVqvVKb59eroUoVXOwFa-5xizS2_mr07i4UqkjhdjtetS01rrjdoIxs4fJCrVAvNGBWruV6sGYYxJa7H5h5UpEo/h80/seo111.jpg" width="215" height="145" /></a>Crysis 2 is a first-person shooter video game developed by Crytek, published by Electronic Arts and released in North America, Australia, and Europe in March 2011 for Microsoft Windows, PlayStation 3, and Xbox 360. Officially announced on June 1, 2009, the game is the second main installment of the Crysis series, and is the sequel to the 2007 video game Crysis and Crysis Warhead.[3</p></div>

<div class="slide">
<a href="http://www.sitelearning.net"><h2>Mengoptimalkan Blog</h2></a><p><a href="http://http://www.sitelearning.net"><img alt="Pirates of the Caribbean 4" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgNUBzzlWCB8M5DsM8FCA8v3l4gTOKi_Ppcv6bM9lSQm1EFbUMGf4qkPtClVOio95YQMZezPLVyaJrqkmEyuT_QtybdXOvQ1bGAcxHVHv_Qs1vljXhkgYUTxqeQI901ADLLxfMv-8G5wU/h80/seo44.jpg" width="215" height="145" /></a>aptain Jack Sparrow (Depp) crosses paths with a woman from his past (Cruz), and he's not sure if it's love -- or if she's a ruthless con artist who's using him to find the fabled Fountain of Youth. When she forces him aboard the Queen Anne's Revenge, the ship of the formidable pirate Blackbeard (McShane)</p></div>
</div>
</div></div>

<!-- Slideshow HTML -->

12	Save gadget
13	Ganti alamat URL Gambar dengan yang kalian miliki.

Semoga bermanfaat.

Tag : Membuat Slide Show | Photo Slide | Blogger Slide Show

---