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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiH0946FFkfErTXrlbXahm399czjjiduiCqyG5P_jACRQuNagrRxAmIfguVVWy3mmVZIw-ZT_95-OuQqxpAEJD3U0DQS8eARNehFfKiJxM1G2vy4chPXN0jbJHBblCnJkkLW8VKjrWVT1k/d/bg5.gif) repeat-y scroll left center #E7F7FB;
 padding:2px 0;
 border:1px solid #339DC6;
}
.acrecpost-label{
 background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLzFH4mc2bZa85CKLxlTugS2qRTwQlmq7H5W9mjqdYWukxLyJMCtAZxSLs_9IcIdhOJfBLaSw2jZMCGS8fRcX-TwRi8meAODUqRRoyOU00nwhVW1UjuI0msPb4dkrCnBD8jl9eULmGHMg/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiy-fb76ICM91DzVHRuTbSbETfPnkLoaRljYwhRIiVhla2UVbLDrHAQwvxhe8S9Qyasp7vhzHC07DzOuAPId3PJxaXZbVx-oV51TWVaXQpryN-IDuqK8KTm8PVP4oeBhD1gn8w-5xBIzU/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 :)