Cara Membuat Recent Post Berjalan di Blog

Blogspot tidak hanya menyediakan popular post sebagai widget bawaannya  tetapi juga recent post.  Namun sepertinya, widget bawaan blogspot tidak bisa dimodifikasi supaya kelihatan lebih menarik.

Sebenarnya kita telah mempelajari caramembuat recent post pada posting sebelumya. Pada posting tersebut tidak hanya menampilkan judul saja tetapi juga thumbnail (gambar) dan sinepet (ringkasan) isi post terbaru blog.

Untuk itu, kali ini kita akan belajar cara membuat recent post bergerak atau bergerak. Widget ini akan menampilkan posting-posting terbaru dari blog Anda dengan jumlah tampilan yang bisa di sesuaikan  sesuka hati. Selain itu widget ini bergerak secara dropdown ke bawah dan posting yang ditampilkan paling bawah akan kembali lagi ke paling atas. Begitu juga seterusnya.

Cara membuat recent post bergerak di blog.

1. Login ke akun blogger
2. Masuk kebagian tata letak
3. Klik tambahkan gadget, dalam pilih HTML/Javascript
4. Masukkan kode berikut 

<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 = 1000;
    var pause = 3500;
    $(document).ready(function(){
    rpnewsticker();
    interval = setInterval(rpnewsticker, pause);
    });

</script>
<ul id="rp_plus_img"><script>
    var numposts = 10;
    var numchars = 0;

</script>     <script src="http://umstrieduatiga.blogspot.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=rpthumbnt">
</script></ul>
<small><a href=" http://umstrieduatiga.blogspot.com/2014/02/recent-post-thumbnail-dan-ringkasan.html" target="_blank">Ingin widget ini?</a></small>

Perhatikan tulisan yang bewarna !. Kode tersebut bisa Anda ganti sesuai keinginan Anda.

* 377 = Tinggi ukuran widget
* 1000 & 1500 = Kecepatan dropdown widget
* 10 = Jumlah post yang ditampilkan
* URL Blog =  Ganti dengan URL blog sobat

5. Klik simpan jika telah selesai.

SHARE SHARE SHARE

Milan Tomic

Hi. I’m Designer of Blog Magic. I’m CEO/Founder of ThemeXpose. I’m Creative Art Director, Web Designer, UI/UX Designer, Interaction Designer, Industrial Designer, Web Developer, Business Enthusiast, StartUp Enthusiast, Speaker, Writer and Photographer. Inspired to make things looks better.

• 
• 
• 
• 
•