Recent Post + Thumbnail bergerak kebawah

cara membuat Recent Post + Thumbnail bergerak kebawah.
begitu menarik sekali jika kita ikuti, gambarnya seperti gambar di bawah ini.
nantinya recent post tersebut akan berjalan dari atas ke bawah. menarik bukan. kalau teman sekalian ingin mencoba silahkan di ikuti aja langkah di bawah ini.
atau contohnya pada blog saya yang bertuliskan RECENT POST.
caranya cukup mudah
  1. login blogger
  2. pilih rancangan
  3. pilih tab elemen laman
  4. tambah gadged
  5. dan copas kode di bawah ini

#rp_plus_img{height:270px;overflow:hidden;border:solid 0px #fff;padding:6px 10px 14px 5px;background-color:transparent;}
#rp_plus_img ul{list-style-type:none;margin:0;padding:0}
#rp_plus_img li{border:1px; margin:0; padding:0; list-style:none;}
#rp_plus_img li{height:60px;padding:5px;list-style:none;}
#rp_plus_img a{color:#F68629;}
#rp_plus_img .news-title{display:block;font-size:14px;font-weight:bold !important;color:#F68629;text-align:justify;}
#rp_plus_img .news-text{display:block;font-size:11px;font-weight:normal !important;color:#fff;text-align:justify;}
#rp_plus_img img{float:left;margin-right:14px;padding:4px;border:solid 1px #F68629;width:55px;height:55px;}
var speed = 1000;
var pause = 2500;
$(document).ready(function(){
rpnewsticker();
interval = setInterval(rpnewsticker, pause);
});
var numposts = 5;
var numchars = 200;
<script src="http://kricho.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt”>


#rp_plus_img{height:200px;overflow:hidden;border:solid 0px #fff;padding:6px 10px 14px 5px;background-color:transparent;}
#rp_plus_img ul{list-style-type:none;margin:0;padding:0}
#rp_plus_img li{border:1px; margin:0; padding:0; list-style:none;}
#rp_plus_img li{height:60px;padding:5px;list-style:none;}
#rp_plus_img a{color:#F68629;}
#rp_plus_img .news-title{display:block;font-size:14px;font-weight:bold !important;color:#F68629;text-align:justify;}
#rp_plus_img .news-text{display:block;font-size:11px;font-weight:normal !important;color:#fff;text-align:justify;}
#rp_plus_img img{float:left;margin-right:14px;padding:4px;border:solid 1px #F68629;width:55px;height:55px;}


<script type="text/javascript" src="http://theplick.googlecode.com/files/newsticker-plick.js“>

var speed = 1000;
var pause = 2500;
$(document).ready(function(){
rpnewsticker();
interval = setInterval(rpnewsticker, pause);
});



    var numposts = 20;
    var numchars = 280;

    <script src="http://the-plick.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt”>






    height:200px untuk mengatur ketinggian dari recent post


    sebelum anda menyimpan gadget tersebut, coba kalian amati tulisah yang bewarna hijau yaitu

    untuk mengedit http://theplick.googlecode.com/files/kricho-plick.js silahkan Lihat Postingan saya sebelumnya disini


     dengan nama blog teman teman.


    jika semua sudah di anggap beres, maka simpan gadged anda dan lihat hasilnya.
    kalaupun tidak berjalan, kemungkinan ada Jquery yang crash. untuk saat ini saya selalu sukses dalam pembuatan gadged recent post tersebut
    semoga bermanfaat.

    One thought on “Recent Post + Thumbnail bergerak kebawah

    Leave a Reply

    Fill in your details below or click an icon to log in:

    WordPress.com Logo

    You are commenting using your WordPress.com account. Log Out / Change )

    Twitter picture

    You are commenting using your Twitter account. Log Out / Change )

    Facebook photo

    You are commenting using your Facebook account. Log Out / Change )

    Google+ photo

    You are commenting using your Google+ account. Log Out / Change )

    Connecting to %s