Header Ads

Alma Property
Breaking News
recent

Tutorial Membuat Widget Recent Post Berjalan Di Blogspot

Recent post atau dalam bahasa indonesianya posting terakhir atau artikel terkini adalah widget yang bisa kita pasang di blog dengan tujuan memberikan informasi tentang postingan atau artikel terkini.
Recent post biasanya menampilkan sejumlah judul artikel yang belum lama kita posting dalam deretan ke bawah dan tak jarang juga ada yang bergerak ( animasi ) ke bawah. Contohnya kita bisa lihat di sidebar blog ini.

Kali ini saya akan kasih tutorial bagaimana cara memasang recent post di blog. Yang berminat silahkan ikuti tutorial berikut.

1. Log in ke akun blogger.
2. Klik rancangan --> Elemen laman --> Tambah gadget --> HTML/Javascript
3. Masukkan kode berikut ke dalam konten.


<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 src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript">
</script>
<script src="https://sites.google.com/site/unwanted86/javascript/recentpost.js" type="text/javascript">
</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>
    var numposts = 5;
    var numchars = 0;
   
</script>     <script src="/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=rpthumbnt">
</script>     </ul>
<small><a href="http://indonesiaku-17.blogspot.com/2014/04/tutorial-membuat-widget-recent-post.html" target="_blank">get this widget here</a></small>

4. Klik save dan lihat hasilnya

Keterangan :
Huruf yang bewarna merah bisa kalian rubah, contoh angka 5 merah pada numpost merupakan jumlah posting yang akan ditampilka.

Tidak ada komentar:

Diberdayakan oleh Blogger.