Membuat "Glider Content" Pada Blog

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 ]]> (gunakan "ctrl+f" untuk mempermudah pencarian)
4. Copy paste code dibawah tepat diatas/sebelum ]]>

/*
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
6. Copy paste kode dibawah ini diatas/sebelum

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.

NAMA JUDUL

DESKRIPSI KONTEN

NAMA JUDUL 2

DESKRIPSI KONTEN 2

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