Cara Membuat Recent Post Bergerak

Cara Membuat Recent Post Bergerak

Cara Membuat Recent Post Bergerak Terbaru - Kali ini saya akan membagikan tutorial tentang Cara Membuat Recent Post Bergerak . Recent Post dalam bahasa Indonesia berarti postingan terbaru/postingan terkini. Tujuan memasang widget Recent Post adalah agar mempermudah pengunjung blog yang ingin melihat postingan terbaru/postingan terkini.

Recent Post biasanya menampilkan sejumlah judul artikel yang belum lama posting yang bergerak kebawah. Contohnya sobat bisa melihat recent post saya yang berada di sidebar kanan.

Berikut ini adalah Cara Membuat Recent Post Bergerak . Tolong perhatikan Tutorial ini baik-baik agar anda dapat langsung mengerti.:

1. Log In di blogger sobat
2. klik tata letak/layout lalu klik tambahkan gadget/add gadget, cari HTML/JavaScript lalu klik.
3. Selanjutnya copy paste kode HTML dibawah ini.
kode 1

<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>

Opsi script ke 2

<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>

4. Terakhir Simpan

Sekian tutorial Cara Membuat Recent Post Bergerak Terbaru . Semoga sobat berhasil dalam melakukan tutorial ini.

Share ke:
Facebook Google+ Twitter

Posted in: trik dan tips it