PURBALINGGA BROW er

Monday 24 June 2013

Cara membuat Resent Post dengan Gambar bergerak di blog


SEPUTAR BLOGGER, Sobat blogger, untuk menampilkan postingan-postingan terbaru kita perlu widget khusus yang dengan mudah pengunjung blog melihatnya, widget ini dikenal dengan istilah resent post, kali ini pengunjung tak sulit lagi membedakan mana posting lama dan terbaru karena postingan terbaru akan ditampilkan sesuai dengan urutan nya,

Saya sedikit berbagi dengan teman-teman bagaimana memasang widget resent post pada blog, sebagai berikut :

  1. Sign in ke blog 
  2. Klik Template/rancangan, pilih Layout/tataletak, lalu Klik Tambah Gadget, kemudian cari HTML/Javascript, klik dan masukkan kode berikut : 
  3. <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://christiantatelu.blogspot.com/2012/03/cara-membuat-recent-post-berjalan-di.html" target="_blank">get this widget here</a></small>
  4. Simpan, lalu cek hasilnya.

No comments:

Post a Comment