Hallo sobat, ingin punya blog terlihat lebih menarik seperti tampilan postingan bisa bergerak. Nah kali ini saya akan memberikan tutorialnya dan bisa kalian terapin di blog pribadi kalian. Ini berifat random ya guys. Pertama tama kalian masuk saja login ke blog pribadi yang kalian miliki, dan copy kode script yang ada di kolom bawah ini ;
<style type="text/css">
/*widget*/
#rp_plus_img{overflow:hidden;border:solid 1px #ddd;padding:10px; background-color:none;line-height:1.7em;}
#rp_plus_img ul{list-style-type:none;margin:0;padding:0;}
#rp_plus_img li{border:0; margin:0; padding:0; list-style:none;}
#rp_plus_img li{height:70px;padding:1px;list-style:none;}
#rp_plus_img a{color:#3366ff;}
#rp_plus_img .news-title{display:block;font-weight:normal !important;margin-bottom:5px;font-size:14px;}
#rp_plus_img .news-text{display:block;font-size:12px;font-weight:normal !important;color:#282828;text-align:justify;}
#rp_plus_img img{float:left;margin-right:10px;padding:1px;border:solid 1px #cccccc;width:60px;height:60px;border-radius:4px;}
</style>
<!-- start -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/Brando07/share/master/random-post-bergerak-seocips.js"></script>
<script type="text/javascript">
var speed = 400;
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 = 0;
</script>
<script src="https://www.moel.my.id/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt"></script>
</ul>
<!-- /end -->
/*widget*/
#rp_plus_img{overflow:hidden;border:solid 1px #ddd;padding:10px; background-color:none;line-height:1.7em;}
#rp_plus_img ul{list-style-type:none;margin:0;padding:0;}
#rp_plus_img li{border:0; margin:0; padding:0; list-style:none;}
#rp_plus_img li{height:70px;padding:1px;list-style:none;}
#rp_plus_img a{color:#3366ff;}
#rp_plus_img .news-title{display:block;font-weight:normal !important;margin-bottom:5px;font-size:14px;}
#rp_plus_img .news-text{display:block;font-size:12px;font-weight:normal !important;color:#282828;text-align:justify;}
#rp_plus_img img{float:left;margin-right:10px;padding:1px;border:solid 1px #cccccc;width:60px;height:60px;border-radius:4px;}
</style>
<!-- start -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/Brando07/share/master/random-post-bergerak-seocips.js"></script>
<script type="text/javascript">
var speed = 400;
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 = 0;
</script>
<script src="https://www.moel.my.id/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt"></script>
</ul>
<!-- /end -->
Keterangan :
- Script kode yang berwarna merah adalah kecepatan berpindahnya postingan.
- Script kode yang berwarna hijau adalah waktu berhenti setiap postingan.
- Script kode yang berwarna biru adalah jumlah postingan yang ditampilkan. Ini bisa kalian rubah angkanya sesuai keinginan.
- Script kode yang berwarna hitam adalah alamat blog atau website kalian. Itu ganti dengan blog pribadi kalian.
Nah kalau sudah di copy dari blog saya, masuk ke tata letak blog kalian atau HTML kode Scriptnya.
Tata Letak
HTML
Paste Script di Konten
Sudah di paste, lalu kalian edit sesuai keinginan sesuai keterangan yang ada di atas. Lalu save. Coba kalian reload blog nya, berhasil apa tidak ?
Mudah bukan, itulahlah tutorial cara membuat widget postingan populer bergerak. Semoga bermanfaat.
Tag :
Tutorial
0 Comments for "Cara Membuat Widget Postingan Populer Bergerak"