Cara Membuat Recent Post Bergerak Di Blog (SlidesShow)

Share on Facebook

Share on Twitter

Share on Google+

Share on LinkedIn

 

Bismillahirrohmanirrohiim

Kalau anda Perhatikan di blog saya sebelah kanan, anda akan menemui Widget yang berbentuk bingkai dan berisi Judul artikel, namun Menariknya judul artikel tersebut bisa bergerak (Animasi) ke bawah. biasanya hal ini di sebut (SlidesShow).

Pada posting ini saya akan berbagi tentang Cara membuat Recent Post Bergerak di Blog (SlideShow).

perlu anda ketahui bahwa artikel yang ada di slideshow tersebut secara otomatis menampilkan  judul postingan Terbaru/Recent Post.

Oke silahkan di simak tutorial di bawah ini :

1. Masuk ke account Blogger anda.
2. Pilih Tata Letak.
3. Silahkan Pilih Add Gadget/Tambahkan Gadget.
4. Pilih HTML/JavaScript.
5. Copy Paste Kode Di bawah ini :

<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://arpusa.blogspot.sg/2015/07/cara-membuat-recent-post-bergerak-di.html" target="_blank">get this widget here</a></small>

Artikel Terkait