Alhamdulillah masih diberi nikmat semangat..
Semoga nikmat ini memotifasi diri ini untuk selalu bersyukur Kepada-Nya..
Amin..

Mengulas recent posts atau artikel terbaru dan berbagai macam bentuk dan kreasinya,
kali ini ane akan berbagi model recent posts generasi ke (mungkin) 206.. karena sangking banyaknya..
yaitu recent post accordion..

Bingung ?? langsung saja lihat demonya..


Selain dapat menampilkan artikel terbaru dari semua artikel blog kita, juga dapat menampilkan
artikel berdasarkan category yang kita inginkan.
Selain itu dapat juga menampilkan artikel-artikel blog teman kita di blog kita..

Cara memasang nya cukup mudah..
Hanya dengan memasukan semua kode/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/AVvXsEgA3x6DPhiOZv2J3ex5kgqEwatQsef_4leGuOE-kCBsUoIscg8P9IPg6EG_swVTybxIrDEgDC79Xa9NxOivfMnEi8C7qgpT5_DULiEr803rYhzco8OD9wzIR2ZT7PWik3LQ2OM99-M_FNc/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/AVvXsEjuEidj-Qd0uwZG7WtcMqmfu2qTsWhgY3y7e7myR0dpMRQ6uR1RMznWgq2DpNgO04PNLR-qoGAaI7C3h_0FzqjObPljEU3HFd9yG0_6ME4q6nBMkfZ5_x8bsrejCFNW-2pLkF8qRyuXvro/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/AVvXsEjElUcJja4gQt-VEHqQvZ6jXLq4sHI-VU1lQC2QzEy3bClmxJlSMdpfZr646uwrFTf5cV7tEKAAutIuZiJybAmocdRLZFwLi010WKf09GdLfw2P6T63HwrR0aBpL7F0jgMwwgFZf9Roh9c/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>

Terus.. tambahkan kode dibawah ini tepat dibawah kode diatas..

Kode/Script 2

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

Script diatas adalah merupakan script loader framework jQuery, jika sobat sudah pernah
memasangnya pada template sobat, maka Kode/Script 2 diatas tidak perlu disertakan..

Kode/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.

Rubahlah angka-angka diatas sesuai keinginan sobat..

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

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

Rubahlah kode/script yg berwarna merah dengan URL blog sobat.
Sava gadget dan lihat hasilnya..

Nb.

---

Jika sobat ingin menampilkan artikel berdasarkan category/label di blog sobat,
sobat cukup mengganti script pada kode/script 4 dengan script dibawah ini :

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

Script yg berwarna kuning adalah script tambahan,
gantikan label dengan label yg ada di blog sobat..

contoh yang ane gunakan pada demo diatas adalah hanya menampilkan artikel dari label Tips n Trick
Maka script yg digunakan pada kode/script 4 nya adalah seperti ini :

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

Selamat mencoba..
dan Semoga bermanfaat..