Tutorial Widget Post Terbaru Dengan Efek Sliding Untuk Blogger



REAL DEMO UNTUK BLOG INI ADALAH SEPERTI DI BAWAH


Tutorial Widget Post Terbaru Dengan Efek Sliding Untuk Blogger
Jika anda ingin mencuba, berikut adalah cara-cara untuk memasang widget ini.

1. Dari Blogger Dashboard ----- Layout ---- Add a Gadget ---- HTML/Javascript

2. Salin html code berikut dan paste di ruangan HTML/Javascript.



<style type="text/css">
#rp_plus_img{height:377px;}
#rp_plus_img li {height:60px;padding:5px;list-style:none;
background-color:#ffffff;
border:solid 1px #000000;}
#rp_plus_img a{color:#00000;}
#rp_plus_img .news-title{display:block;font-weight:bold ;margin-bottom:4px;font-size:11px;
text-align:justify;
-moz-border-radius: 5px;}
#rp_plus_img img{float:left;margin-right:14px;padding:4px;border:solid 1px #00000;width:55px;height:55px;}
</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="https://sites.google.com/site/unwanted86/javascript/recentpost.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 = 0;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt"></script>
</ul><small><a href="http://hanifidrus.blogspot.com/2015/05/tutorial-widget-post-terbaru-dengan.html" target="_blank">dapatkan widget ini</a></small>

Setting yang boleh diubah mengikut kesesuaian:

  1. Ketinggian - ubah  #rp_plus_img{height:295px;mengikut kesesuaian.
  2. Jumlah artikel terkini ubah var numposts = 20
  3. Bilangan karakter (huruf) pada snippet post,  var numchars = 100
  4. Tukar warna pautan Tajuk Post: #rp_plus_img a{color:#3366ff;} Lihat Carta Warna Di Sini

Tags:

Share:

0 comments