Cara Membuat Slideshow di Blog

Untuk lebih mempercantik blog kita, kita bisa menambahkan slideshow di blog kita seperti di blog saya yang ada di sebelah kanan atas. Cantik bukan? Saya dapat sumbernya ketika saya juga ingin mempercantik blog saya, maka pada kesempatan ini juga, saya ingin membagi ilmu yang saya dapat kepada teman-teman yang membutuhkan. Sudah cukup dengan pengenalannya, langsung aja ke langkah-langkah nya.

1. Login Ke Blog Anda
2. Pilih Rancangan (untuk tampilan blogger klasik) atau Pilih Tata Letak (untuk tampilan blogger terbaru)


3. Kemudian  Klik Tambah Gadget
4. Pilih HTML/javascript
5. Kemudian Copy Kode di bawah ini, kemudian pastekan di HTML/javascript tadi. kemudian simpan/save.

<style type="text/css">
#rp_plus_img{height:385px;overflow:hidden;border:0;padding:6px 10px 14px 5px;background: transparant;}
#rp_plus_img ul{list-style-type:none;margin:0;padding:0}
#rp_plus_img li{border:solid 1px #585858; margin:0; padding:0; list-style:none;}
#rp_plus_img li{height:85px;padding:5px;list-style:none;}
#rp_plus_img a{color:#000;}
#rp_plus_img .news-title{display:block;font-weight:bold !important;margin-bottom:4px;font-size:12px;}
#rp_plus_img img{float:left;margin-right:14px;padding:4px;border:solid 1px #585858;width:65px;height:65px;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://permathicblog.googlecode.com/files/Slideshow%20Postingan.js"></script>
<script type="text/javascript">
var speed = 1500;
var pause = 3500;
$(document).ready(function(){
rpnewsticker();
interval = setInterval(rpnewsticker, pause);
});
</script>
<ul id="rp_plus_img">
<script style="text/javascript">
var numposts = 5;
var numchars = 20;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt"></script>
</ul>


Catatan

Jika kita hanya ingin membuat gambar disamping slide show nya itu ada, maka kita hanya memasang gambar di blog kita karena gambar pada slideshow itu secara otomatis menampilkan gambar jika ada gambar yang terkandung dalam blog kita.

Jika kita hanya ingin show nya menunjukan judul postingan kita aja bukan isi yg di dalam postingan seperti slide show yang ada di blog saya, maka kamu harus mengganti kode var numchars = 20; menjadi var numchars = 0;.

Dan jika ingin mengubah warna judul postingan, maka Anda edit {color:#000;}
menjadi warna yang Anda suka tetapi dalam bahasa hexadesimal, untuk mengetahui color dalam bahasa hexadesimal, bisa Anda cari di google. Pada contoh ini saya menggunakan warna hitam #000 dan putih #fff.

Cukup sekian informasi dari saya, jangan lupa di komen ya...


2 comments:

Copyright © 2013-2015 Belajar Ilmu tuh Gampang