Recent Post Slide 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 Pertama dan yang paling utama

1. Masuk akun blogger lalu pilih menu Rancangan > Edit Html
2. Jangann lupa klik ‘Expand Widget Templates’
3. 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://sidimpuanberbagi.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts"></script>

*Catatan

Gani tulisan  http://sidimpuanberbagi.blogspot.com
 sesuai alamat URL anda

Semoga berhasil... 

Artikel Terkait:

Posted in: Tutorial Blog