.
Home » » Membuat recent post slide show kesamping

Membuat recent post slide show kesamping

Written By Admin on Rabu, 21 Desember 2011 | 1:23 AM

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://rizkyguna1blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts"></script>
 
 
*Catatan
Gani tulisan  http://rizkyguna1blogspot.com sesuai alamat URL anda
Semoga berhasil... 
Share this article :

11 komentar:

Huzna Souvenir mengatakan... Reply Comment

terima kasih banyak infonya kawan, udah seminggu saya googling kesana kemari mencari trik seperti ini, thanks......

Hanan Muhardiansyah mengatakan... Reply Comment

Di aku ko gak bisa y?
apa ada setting khusus di pengaturan feed?

Muhammad Irvan Avib Azizi mengatakan... Reply Comment

saya sagant berterimakasih sekali gan, akhirnya sayembara saya berbuah hasil, cari sana-sini yg pas utk blog saya, dan yg ini "klop" timkasih gan

Sumedang Post Online mengatakan... Reply Comment

nggak jalan scriptnya

Agunk_arly mengatakan... Reply Comment

MANTAP SOOOB.. KUNJUNGAN NYA BALIK ( DITUNGGU)

Estu Jati Utama mengatakan... Reply Comment

mantapppppp, kunjungan baliknya gan http://estu-djati.blogspot.com

unikgaul.com mengatakan... Reply Comment

ok thx sob triknya. :)

Aditia Novit mengatakan... Reply Comment

mantap mas

vinojaja mengatakan... Reply Comment

jelek banget, norak widget nya

Sarang Semut Obat Kanker mengatakan... Reply Comment

patut dicoba

blogger tips mengatakan... Reply Comment

ga work gan :/

Posting Komentar

Terimakasih telah membaca artikel ini, komentar Anda sangat membantu blog ini :)

Komentar Blogger Sejati

Saya adalah

Foto saya
Bekasi, Jawa Barat, Indonesia
Rizky Gunawan, Seorang yang lagi belajar menulis dan berbisnis online (Inernet Marketing) lahir di Rawa Panjang, Bekasi.
 
Support : Rizkygunawan1@gmail.com | Facebook | Twitter
Copyright © 2011. Rizgun(dot)com - All Rights Reserved
Template Modify by Rizgun Blog
Proudly powered by Blogger