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.
Thank's gan ...
ReplyDeleteberguna banget nih lumayan ... hehe
sama sama gan :)
Deletemakasih gan, udah terpasang di blog ane www.tipskreatif.net
ReplyDeletemakasih kka sangat bermanfaat,,,,?
ReplyDeleteini lihat hasilnya langsung ke blog saya
http://susukumanasusumu.blogspot.com/
thanks beratt gan
ReplyDeletesipp http://mapala-marabunta.blogspot.com/
ReplyDelete> Ok mantap dech, kunjungi juga > http://1001seputaragamaislam.blogspot.com/
ReplyDeleteMantap Ka'. Makasih Banyal Looh
ReplyDeletemantap BRO :)
ReplyDeletesangat bermanfaat
mohon kunjungan balik @ info7tujuh.blogspot.com
terimakasih
mantap, visit admireindonesia.tk
ReplyDeletekeren sob,thx....
ReplyDeleteblog saya jadi keliatan keren....
http://komunitasbelajarkomputer.blogspot.com
makasih gan, akhirnya masalah saya teratasi :) sukses trus
ReplyDeletekalo biar baris nya nambah bisa nggk gan ?
ReplyDelete