Cara membuat recent post slide pada blog

Contoh seperti gambar di atas,

Ringkasan recent post dengan efek slide.

Caranya berikut ini:

1.  Login blog

2.  Rancangan

3. Add gadget"html/javascript"

<style type="text/css">

#rp_plus_img{height:350px;overflow:hidden;border:solid 1px #585858;padding:6px 10px 14px 5px;background-color:#2f2f2f;}

#rp_plus_img ul{list-style-type:none;margin:0;padding:0}

#rp_plus_img li{border:0; margin:0; padding:0; list-style:none;}

#rp_plus_img li{height:60px;padding:5px;list-style:none;}

#rp_plus_img a{color:#FFF;}

#rp_plus_img .news-title{display:block;font-weight:bold !important;margin-bottom:4px;font-size:11px;}

#rp_plus_img .news-text{display:block;font-size:11px;font-weight:normal !important;color:#DEDEDE;text-align:justify;}

#rp_plus_img img{float:left;margin-right:14px;padding:4px;border:solid 1px #585858;width:55px;height:55px;}

</style>

<script type="text/javascript" src="http://softwarebali.googlecode.com/files/RECENTPOSTJQUERI.JS"></script>

<script type="text/javascript" src="http://softwarebali.googlecode.com/files/slidepost.js"></script>

<script type="text/javascript">

var speed = 400;

var pause = 2500;

$(document).ready(function(){

rpnewsticker();

interval = setInterval(rpnewsticker, pause);

});

</script>

<ul id="rp_plus_img">

<script style="text/javascript">

var numposts = 15;

var numchars = 70;

</script>

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

</ul>

Gantidengan url sobat 

4. Simpan

Mudah bukan cara membuat recent post dengan efek slide?

Semoga tutorialnya bermanfaat.

Cara membuat recent post dengan gambar pada blog

Recent post adalah  postingan terakhir atau terupdate.

Banyak sobat blogger menampilkannya dengan efek slide.

Kali ini kita akan membuat postingna terakhir dengan gambar.

Letakkan kode  script d html/javascript  rancangan sobat.

<div id="bp_recent"></div><div class="bp_footer"></div>

<script style='text/javascript' src='http://pelajarandashblogdotblogspotdotcom.googlecode.com/files/recentpostspelajaranblog.js'></script>

<script style='text/javascript'>

var numberOfPosts = 5;

var showPostDate = true;

var showSummary = true;

var summaryLength = 200;

var titleLength = 100;

var showCommentCount = true;

var showThumbs = true;

var showNoImage = false;

var imgDim = 100;

var imgFloat = 'left';

var myMargin = 5;

var mediaThumbsOnly = true;

var showReadMore = true;

var readMore = 'Read More';

</script>

<script src='http://www.cybermig.com/feeds/posts/summary?max-results=4&orderby=published&alt=json-in-script&callback=bprecentpostswiththumbnails'></script>

Seperti biasa, langkah terakhir adalah simpan.