Menampilkan Recent Post with Thumbnail Dengan JQuery

jQuery Accordion Recent Post with Thumbnail atau kurang lebih berarti fasilitas yang digunakan untuk menampilkan artikel terbaru dengan gambar mini yang menggunakan efek accordion. Ini hanya sebuah alternatif pilihan untuk menampilkan artikel terbaru selain menggunakan jQuery News Ticker Recent Post Plus Thumbnails, selain itu bisa juga digunakan untuk menampilkan daftar artikel terbaru dari blog lain pada blog kita. Script yang digunakan masih berbasisJSON feed,framework jQuerydan efek Simple Accordion buatanMarco van Hylckama Vlieg. Mau mencoba?

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Rancangan - Elemen Laman"
Langkah 3
Tambahkan sebuah gadget baru dengan tipe "HTML/JavaScript"
Langkah 4
Masukan (copy paste) kode dibawah ini pada bagian konten:

<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/AVvXsEhE2OK_500COo0Amv9eTT7BnrBKIVmiljCdjGxzjukgabFqQH5GYUywwBQU8z9E9mMgytYWluno2xAWqI-NkJJ4k1kyFBDtGLGnRQGEG9_Khy7Xgso_m6PTvw8cZ44jU9IahjcV1dLOPlg/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/AVvXsEhsiVorA2GFHNSg1SrwxikPZswKX4MZS9_0geF9qyIuEOTKj_92qob2gCtbMgqyw5PbS87XnXuCrC3wuvzTq6_NPf6PUyW6WhKAMMRMkICLOM7AOM640_-XAi6MHwM6wCu9Fgf7nCBAKKk/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/AVvXsEjP2ujXAg_bj0EngEdiMIjMRAWDFn9VQK3ai8NabPYGCDOuiUh-jbWMz_bC1XCThg6cPHgX4tnEg18stOKlb4yorZCGD1e1pi4ZHDheUYqluE3hu4ezSi2Icfq5Ar8HuJc7oA8kI48alno/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 type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://hensblog.googlecode.com/files/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>

Langkah 5

Simpan gagdet tanpa judul dan preview blog anda...

Keterangan:

• Untuk kode CSS silahkan berekspresi sendiri, bagi yang belum paham dengan kode CSS (Cascading Style Sheet) Insya Allah dalam waktu dekat artikel bisa diterbitkan.
• Hati-hati denganscript loader framework jQuery, jika kita sudah pernah memasangnya pada template maka kode dibawah ini tidak perlu disertakan (Langkah 4):

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

• Ubah nilai 10 pada kode var numposts = 10; untuk mengatur jumlah artikel yang akan ditampilkan
• Ubah nilai 200 pada kode var numchars = 200; untuk mengatur jumlah karakter yang akan ditampilkan pada penggalan artikel
• Ubah URL blog sesuai dengan blog yang anda kehendaki (lihat yang diblok) dan jika kita ingin menampilkan artikel dari blog kita maka URL tersebut bisa saja dibuang, sehingga kode menjadi seperti dibawah ini:

<script src="/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=accrecentpost"></script>

• Jika kita ingin menampilkan artikel terbaru hanya dalam kategori/label tertentu tambahkan kode dibawah ini:

/-/label

• sehingga kode menjadi seperti dibawah ini:

<script src="/feeds/posts/default/-/label?orderby=published&amp;alt=json-in-script&amp;callback=accrecentpost"></script>

Alhamdulillah... Selamat mencoba dan semoga berhasil... Happy blogging :)

Menampilkan Recent Post with Thumbnail Dengan JQuery 9 out of 10 based on 10 ratings. 9 user reviews.