Halo sobat blogger, kali ini saya ingin berbagi tutorial blog lagi yaitu : Cara Membuat Related Post Bergerak di Blog. Related post sebenarnya sudah diberikan langsung di blogger. Tapi mungkin bagi sobat sedikit membosankan dikarenakan kurang menarik. Nah, kali ini saya membuat related post yang lebih menarik karena menyerupai animasi dikarenakan artikelnya bergerak. Bagi sobat yang sudah membuatnya silakan keluar dari bog ini, bagi yang belum dan mau membuatnya bisa mengikuti langkah-langkah dibawah :
1. Login ke Blogger.
2. Pilih tata letak ( bagi yang menggunakan blogger desain lama pilih rancangan ).
3. Klik tambahkan widget dibawah postingan.
4. Pilih HTML/Javascript ( ketik judul HTML : Related Post ).
5. Masukkan kode dibawah :
<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 = 20;
var numchars = 40;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt"></script>
</ul>
6.Klik simpan dan lihat hasilnya. (Catatan : Jika menemui kegagalan itu dikarenakan lebar yang tidak cukup, disarankan memasukkan kode/widget diatas tepat dibawah postingan)
Bagaimana ? lebih menarik bukan ? hal ini cukup berguna agar pengunjung tertarik mengunjungi artikel lain dari blog sobat sehingga pemirsa bertambah. Saya sarankan agar semua artikel sobat bergambar agar lebih menarik. Sekian artikel kali ini, jika sobat ingin mengetahui artikel-artikel lain seputar tutorial blog kunjungi artikel lain di ezrarealblog.blogger.com, terimakasih telah mengunjungi artikel ini.
1. Login ke Blogger.
2. Pilih tata letak ( bagi yang menggunakan blogger desain lama pilih rancangan ).
3. Klik tambahkan widget dibawah postingan.
4. Pilih HTML/Javascript ( ketik judul HTML : Related Post ).
5. Masukkan kode dibawah :
<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 = 20;
var numchars = 40;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt"></script>
</ul>
6.Klik simpan dan lihat hasilnya. (Catatan : Jika menemui kegagalan itu dikarenakan lebar yang tidak cukup, disarankan memasukkan kode/widget diatas tepat dibawah postingan)
Bagaimana ? lebih menarik bukan ? hal ini cukup berguna agar pengunjung tertarik mengunjungi artikel lain dari blog sobat sehingga pemirsa bertambah. Saya sarankan agar semua artikel sobat bergambar agar lebih menarik. Sekian artikel kali ini, jika sobat ingin mengetahui artikel-artikel lain seputar tutorial blog kunjungi artikel lain di ezrarealblog.blogger.com, terimakasih telah mengunjungi artikel ini.