Memasang Slide Show Artikel di Blog
Assalamualaikum wr wbGhanishare - daftar artikel seperti arsip blog memang berguna bagi pengunjung blog, tapi bagaimana ketika kita mulai bosan melihat tampilannnya yang gitu-gitu aja, dan ingin membuat tampilan yang baru.
Banyak cara agar tampilan daftar artikel menjadi menarik, salah satunya seperti kita tambahkan tampilan slide show, jadi dalam kesempatan kali ini saya akan share bagaimana cara Memasang Slide Show Artikel di Blog dengan mudah, berikut langkah-langkahnya :
1. Masuk ke Blogger.
2. Lalu masuk ke Tata Letak lalu pilih Tambahkan Gatget, dan tambahkan HTML/JavaScript.
3. Salin dan Tempel kode berikut ke dalamnya,
<style type="text/css">
#rp_plus_img{height:385px;overflow:hidden;padding:2px 3px 3px 2px;background:transparant}
#rp_plus_img ul{list-style-type:none;margin:0;padding:0}
#rp_plus_img li{border:solid 1px #ccc; margin:0;height:82px;padding:5px; list-style:none;border-radius: 10px;background:#ffffff}
#rp_plus_img li:hover{background-color: #EFFBEF;}
#rp_plus_img a{color:#d90000;font-weight:bold}
#rp_plus_img .news-title{display:block;font-weight:400 !important;margin-bottom:3px;font-size:11px;}
#rp_plus_img img{float:left;margin-right:10px;padding:4px;border:solid 1px #ccc;width:65px; height:65px;border-radius: 10px}
</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://tugasku4u.googlecode.com/files/Slideshow-artikel-terbaru-New-2013.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 = 999;
var numchars = 70;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt"></script>
</ul>
#rp_plus_img{height:385px;overflow:hidden;padding:2px 3px 3px 2px;background:transparant}
#rp_plus_img ul{list-style-type:none;margin:0;padding:0}
#rp_plus_img li{border:solid 1px #ccc; margin:0;height:82px;padding:5px; list-style:none;border-radius: 10px;background:#ffffff}
#rp_plus_img li:hover{background-color: #EFFBEF;}
#rp_plus_img a{color:#d90000;font-weight:bold}
#rp_plus_img .news-title{display:block;font-weight:400 !important;margin-bottom:3px;font-size:11px;}
#rp_plus_img img{float:left;margin-right:10px;padding:4px;border:solid 1px #ccc;width:65px; height:65px;border-radius: 10px}
</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://tugasku4u.googlecode.com/files/Slideshow-artikel-terbaru-New-2013.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 = 999;
var numchars = 70;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt"></script>
</ul>
Numpost adalah jumlah artikel yang ingin di tampilkan, dan yang Numchars jumlah karakter/char/huruf yang ingin di tampilkan.
4. jika sudah klik Simpan, dan coba lihat blog anda, pasti akan beda.
Sekian dari saya tentang Memasang Slide Show Artikel di Blog, terimakasih sudah mengunjungi Ghanishare, dan semoga bermanfaat.