Cara Membuat Recent Post Accordion

Assalamualaikum sahabat blogger :) Dengan mengucapkan Bismilah mari kita mulai postingan ini....
Sebenarnya saya sudah pernah memposting tentang hal ini di "jQuery Accordion Recent Post with Thumbnail". Original posting ini juga sebenarnya milik Blogger Tune-Up. Tapi jika anda baca posting terbarunya bahwa Account Google Code Blogger Tune-Up Di Non Aktifkan, ternyata itu berpengaruh terhadap script miliknya. Nah pada posting saya sekarang ini saya hanya akan sedikit memperbaikinya tanpa menghilangkan kode aslinya :)
Langsung saja Step.By.Step
Recent Post Accordion
1. Log in ke blog anda
2. Klik Design > Add a Gadget/Tambah Gadget > HTML/JavaScript
3. Pada kotak judul isikan apa saja terserah anda. Lalu pada kotak konten masukan kode berikut
<style type="text/css">
#acrec-post{
 font-family:"Trebuchet MS", Tahoma, Verdana, Arial, Helvetica, sans-serif;
 font-size:12px;
 color:#333;
 background:url(http://lh3.ggpht.com/_xcD4JK_dIjU/S-KAWJugl3I/AAAAAAAAEBg/bY_3UzrECSg/d/bg5.gif) repeat-y scroll left center #E7F7FB;
 padding:2px 0;
 border:1px solid #339DC6;
}
.acrecpost-label{
 background:url(http://lh6.ggpht.com/_xcD4JK_dIjU/S-KAVk09KSI/AAAAAAAAEBc/Tqfaca2nwmo/d/bg4.gif) repeat-x scroll 0 0 #E1F4FB;
 font-weight:bold;
 line-height:1.4em !important;
 overflow:hidden;
 vertical-align: baseline;
 margin: 1px 3px;
 outline: none;
 cursor: pointer;
 text-decoration: none;
 padding: 2px 10px;
 color: #FFF;
 text-shadow: 0 1px 1px rgba(0,0,0,.3);
 border:1px solid #2F94BA;
}
.acrecpost-label:hover{
 background:url(http://lh3.ggpht.com/_xcD4JK_dIjU/S-KAVlLiuVI/AAAAAAAAEBU/Hd-n_8N7qak/d/bg2.gif) repeat-x scroll 0 0 #E1F4FB;
 color:#003366;
}
#acrecpost{
 overflow:hidden;
 line-height:1.3em;
 margin:1px 3px !important;
 padding:2px !important;
 border:1px solid #339DC6;
 background-color:#FFF;
}
#acrecpost li{
 height:65px;
 padding:5px;
 list-style:none;
}
#acrecpost .news-title{
 display:block;
 font-weight:bold;
 margin-bottom:4px;
 font-size:11px;
}
#acrecpost .news-text{
 display:block;
 text-align:justify;
 padding:0 5px 0 70px;
}
#acrecpost a{
 text-decoration:none !important;
 color:#FF0000;
}
#acrecpost img{
 float:left !important;
 margin-right:5px !important;
 padding:4px !important;
 border:solid 1px #339DC6;
 width:55px !important;
 height:55px !important;
}
</style>
Keterangan : Jika anda mengerti CSS anda bisa modifikasi kode itu

5. Masukan lagi kode berikut di bawah kode di atas tadi
<script type="text/javascript" src="http://galoga.fileave.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://galoga.fileave.com/accrecpost-pack.js"></script>
<script style="text/javascript">
var numposts = 10;
var numchars = 200;
</script>
<script src="http://modification-blog.blogspot.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=accrecentpost"></script>
Keterangan : Jika anda pernah memasangnya kode JQuery hapus kode yang di blok
Lalu ganti kode yang berwarna merah dengan alamat Blog anda

6. Silahkan tinggalkan komentar dan like+Share ya...... terima kasih :)

7 komentar:

Nyom" Anak Kerissena, 16 October 2010 at 06:31 | [Reply]

wkwkw...
sep2...
^_^

secangkir teh dan sekerat roti, 17 October 2010 at 05:55 | [Reply]

mantap nih tampilannya sangar!

Dimas Abi Galoga, 17 October 2010 at 06:06 | [Reply]

@secangkir teh dan sekerat roti thanks gan !

piacerre sinyorin ☺, 19 October 2010 at 23:02 | [Reply]

susah yang beginian huhuhu >,<

Dimas Abi Galoga, 20 October 2010 at 05:43 | [Reply]

@piacerre sinyorin ☺ gampang ko gan, gampang bgt klo agan mau nyoba

Junior Blogger, 27 October 2010 at 11:26 | [Reply]

Mantap Neh Recent Postnya Cantik..

Unknown, 5 December 2010 at 19:05 | [Reply]

mangstab gan

kunjungi ane gan
X-MEN ORIGINS: WOLVERINE (2009)
X-MEN 3: THE LAST STAND (2006)
X-Men (2000)
X-MEN 2: UNITED (2003)
WATCHMEN (2009)

Post a comment

Kotak Komentar Klasik Klik Di sini

« Prev Next » Home