Membuat recent post accordion

Alhamdulillah masih bisa update post disela-sela kesibukan sekolah yang padat. Kali ini saya akan mengulas recent posts atau artikel terbaru dengan Jquery atau recent post accordion.

Recent Posts AccordionKlik disini untuk melihat demo Recent Posts Accordion

</h3> Membuat recent post accordion </h3>
Masukan semua script dibawah ini ke sebuah gadget HTML/Java Script.

Kode/Script 1

<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/AVvXsEiaVvaTafPE271cqP9fx8XMxeOi84pY6x1LAJlpZ9t-09hCSdFIJF0CxXGZwbA_syVbEmHF8bPLjKwKzNW9KtX1pydRelYeoaBctm6ga_zrgXhUXW1zwm9wSMSzGabwmeKpBrxReDxROvw/d/bg5.gif) repeat-y scroll left center #E7F7FB;
 padding:2px 0;
 border:1px solid #339DC6;
}
.acrecpost-label{a
 background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnSAxWoXAwIuWIlT-bMldBWolk123rC_klCrK8cmG1nCs9zySQS1DxhkPflhnSJpZqVvvzfclBWfjP9IU7UbmXAFV6pzpE1gSERhT3n8-fyLdFuwynHEXr6LxiozVJabnNID_r5aIiy8o/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/AVvXsEhI_NeGo4RI3uhRV0g5aTmAkYakHcWOl84lx1FAx4eVWeH2rtmtE24FVPOwtacrN9n_wLTj1bJ783fOY3KTSrD8Zle7ggCZH9vD67GcKuuQhM0qOS9qhBHkK5bLEaNY9ssHDLjgsP6geJY/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>

Script 2
Kemudian tambahkan kode dibawah ini tepat dibawah kode diatas.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

jika anda sudah pernah
memasang script diatas pada template anda, maka Kode/Script 2 diatas diabaikan saja.

Script 3
Tambahkan kode/script dibawah ini setelah script diatas.

<script type="text/javascript" src="http://daftarisi-girant.googlecode.com/files/accrecpost-pack1.js"></script>
<script style="text/javascript">
var numposts = 10;
var numchars = 200;
</script>

Perhatikan angka 10 dan 200 diatas.
• angka 10 pada var numposts adalah untuk menentukan jumlah artikel yang akan ditampilkan.
• angka 200 pada var numchar adalah untuk menentukan jumlah karakter yang akan ditampilkan.

Script 4
Tambahkan juga script dibawah ini setelah kode/script 3 diatas.

<script src="http://blogger-utilities.blogspot.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=accrecentpost"></script>

Rubahlah script yg berwarna merah dengan URL blog anda.
Sava gadget dan lihat hasilnya.

</h3>Nb. </h3>
Jika anda ingin menampilkan artikel tertentu berdasarkan category/label di blog anda,
anda cukup mengganti script pada script 4 dengan script dibawah ini :

<script src=" http://blogger-utilities.blogspot.com/feeds/posts/default/-/ Jquery?orderby=published&amp;alt=json-in-script&amp;callback=accrecentpost"></script> 

Script yg berwarna biru adalah script tambahan, gantikan Jquery dengan label yg ada di blog anda.

Terakhir
Preview blog anda.