Membuat "Glider Content" Pada Blog

Ingin menambahkan widget seperti gambar disamping?? Saya menggunakan jQuery slide pada elemen blog. Ikuti langkah-langkah berikut :



1. Login ke blogger dashboard--> layout- -> Edit HTML
2. JANGAN centang "Expand Widget Templates"
3. Cari kode ]]></b:skin> (gunakan "ctrl+f" untuk mempermudah pencarian)
4. Copy paste code dibawah tepat diatas/sebelum ]]></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;
}

5. Kemudian cari kode </head>
6. Copy paste kode dibawah ini diatas/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>

7. Kemudian "Save Templates"

8. Arahkan ke Layout-->page elements dan klik 'Add a Gadget'.

9. Pilih 'HTML/Javascript' dan add kode dibawah lalu klik save.

<!-- Slideshow HTML -->
<div id="contentSlide"><div id="slideshow">

<div id="slidesContainer">

<div class="slide">
<h2>NAMA JUDUL</h2>
<p><a href="URL-ANDA"><img alt="NAMA JUDUL" width="215" src="URL-GAMBAR" height="145"/></a>DESKRIPSI KONTEN</p>
</div>

<div class="slide">
<h2>NAMA JUDUL 2</h2>
<p><a href="URL-ANDA"><img alt="NAMA JUDUL 2" width="215" src="URL-GAMBAR" height="145"/></a>DESKRIPSI KONTEN 2</p>
</div>

</div>
</div></div>
<!-- Slideshow HTML -->

Catatan : Ganti kode warna biru dengan konten anda. Sebagai contoh bisa dilihat disini

Semoga bermanfaat. Jika ada masalah dan butuh bantuan silakan beri komentar dibawah.

sumber : youcanhack.blogspot.com