Membuat Recent Post Slide Show Horizontal

Recent post sangat berfungsi agar pengunjung dapat mengetahui, postingan-postingan terbaru atau artikel yang terakhir kita posting, Biasanya recentpost akan muncul secara vertikal, nah kali ini kita akan membahas cara membuat recent post yang unik yaitu Recent post slide show kesamping (horizontal).

Ikuti aja cara-cara berikut, artikel ini saya dapat dari abu-farhan.com.

Langkah ke 1
Masuk akun blogger lalu pilih menu Rancangan > Edit Html
Jangann lupa klik ‘Expand Widget Templates’
Cari kode ]]></b:skin>
Letakkan kode dibawah ini diatas kode ]]></b:skin

/* START
--------------------------------------------------------------------
Roundabout Content Slider using jQuery for blogger
By http://www.abu-farhan.com
--------------------------------------------------------------------
Roundabout
*/
#featured {margin:10px 0 30px 0;}
#folio_scroller_container {margin-top:35px; margin-bottom:40px; height:auto;}
#folio_scroller_container .roundabout-holder {list-style:none; height:400px; margin:0px auto 20px auto;}
.roundabout-holder {list-style:none; width:400px; height:250px; margin:0px auto;}
.roundabout-moveable-item {font-size:12px!important;
/* Resize Image*/
height:180px;
width:350px;
/*-------------*/
cursor:pointer; padding:5px; border:1px solid #aaaaaa; -webkit-border-radius:5px;
-moz-border-radius:5px; background:#f9f9f9;}
.roundabout-moveable-item img {height:100%; width:100%; background-color:#FFFFFF; margin:0;}
.roundabout-in-focus {cursor:auto;}
.roundabout-in-focus:hover {-webkit-box-shadow:0px 0px 20px #787878; -moz-box-shadow:0px 0px 20px #787878;background:#f9f9f9;}
.roundabout-holder span {display:none; font-size:12px;}
.roundabout-in-focus:hover span {display:inline; position:absolute; bottom:5px;
right:5px; padding:8px 20px; background:#f9f9f9; color:#000000;
 z-index:999; -webkit-border-top-left-radius:
5px; -moz-border-radius-topLeft: 5px; font-size :
12px;border-left:1px solid #aaaaaa; border-top:1px solid #aaaaaa; }
.roundabout a:active,
.roundabout a:focus,
.roundabout a:visited {outline:none; text-decoration:none;}
.roundabou li {margin:0}
a img {border:none; outline:0;}
/* END
--------------------------------------------------------------------
     Roundabout Content Slider using jQuery
     By http://www.abu-farhan.com
--------------------------------------------------------------------
Roundabout
*/

Langkah ke 2
1. Cari kode  </body>
2. Letakkan kode dibawah ini diatas kode </body>

<!-- jQuery -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js' type='text/javascript'/>
<script src="http://catur-at-abu-farhan.googlecode.com/svn/trunk/jquery.roundabout-1.1.min.js"
type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {var interval;$('#featured ul').roundabout({duration: 600 })
.hover(function() {// oh no, it's the cops!clearInterval(interval);},
 function() {// false alarm: PARTY!interval = startAutoPlay();});// let's get this party started interval = startAutoPlay();});
function startAutoPlay() {return setInterval(function() {jQuery('#featured ul').roundabout_animateToNextChild(); }, 5000);
 } </script>

Langkah ke 3
Masuk menu Rancangan -> Elemen laman-> “Add a Gadget” -> HTML/JavaScript .
Kemudian masukkan kode dibawah ini :

<script style="text/javascript" src="http://catur-at-abu-farhan.googlecode.com/svn/trunk/galleryposts-roundabout.js"></script>
<script style="text/javascript">
var numposts_gal = 6;
var random_posts = false;
</script>
<script src="http://4softcomputer.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts"></script>

Catatan
Gani tulisan http://4softcomputer.blogspot.com sesuai alamat URL anda