Sunday, March 31, 2013

Cara Menambahkan Slide Show Postingan di Blog


Urusan mempercantik blog seringkali menjadi perhatian para blogger. Mereka ingin blog yang mereka buat tampil semanarik mungkin sehingga para pengunjung tidak dibuat bosan karenanya. 

Ada banyak cara untuk membuat sebuah blog menjadi menarik. Cara-cara tersebut misalnya dengan menampilkan marquee (animasi), menambahkan foto-foto, menambahkan video, kalender, dan sebagainya.

Pada kesempatan ini kami ingin berbagi tentang bagaimana menampilkan slide show dari postingan yang anda buat di blog. Dengan slide show postingan ini diharapkan blog akan tampil lebih menarik dan ada sesuatu untuk dilihat para pengunjung.

Well, resep ini sebenarnya kami dapatkan dari blog lain yang tidak ada salahnya kami bagi lagi dengan Anda dengan harapan mudah-mudahan ada guna dan manfaatnya.

Untuk menampilkan slide postingan di blog, ikutilah langkah berikut ini:

1. Setelah Anda login di blog, klik Layout atau Tata Letak

cara menambahkan slide show postingan di blog

2. Klik Tambahkan Gadget atau Add a Gadget

cara menambahkan slide show postingan di blog
3. Kemudian klik HTML/Java Script

cara menambahkan slide show postingan di blog
4. Copy dan paste kode berikut:

<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>

5. Klik Simpan atau Save.
6. Silakan lihat hasilnya.

Nah mudah bukan? Agar slide ini terlihat menarik, usahakan agar anda selalu menyertakan gambar atau foto pada setiap postingan yang Anda buat. Jika tidak, maka slide shownya hanya akan berupa teks tanpa menampilakan gambar/foto.

Sekali lagi, kami bukan ahli HTML. Kami hanya berbagi apa yang pernah kami dapatkan. Tidak ada salahnya, kan?!

No comments:

Post a Comment