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
- login blogger
- pilih rancangan
- pilih tab elemen laman
- tambah gadged
- 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;}
<script src="http://theplick.googlecode.com/files/kricho-plick.js“>
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
http://theplick.googlecode.com/files/kricho-plick.js
untuk mengedit http://theplick.googlecode.com/files/kricho-plick.js silahkan Lihat Postingan saya sebelumnya disini
http://the-plick.blogspot.com
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.
