jQuery Accordion Recent Post with Thumbnail

Bismillah... Teman blogger masih ingat dengan artikel "jQuery News Ticker Recent Post Plus Thumbnails" atau "Daftar Isi Efek jQuery Accordion"? Keduanya kemudian di ramu lagi menjadi 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 berbasis JSON feed, framework jQuery dan efek Simple Accordion buatan Marco van Hylckama Vlieg. Mau mencoba?

jQuery Accordion Recent Post

Memasang jQuery Accordion Recent Post with Thumbnail

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/AVvXsEggl7Dfa_rMQbHvw5CivRY6O4SPdHEW7UjtdY8sY-cgoy_TOngQw_EZoge85y9n6TM-F5ZnlgpCMUTCUlVPach-mFr61o7GYviko3qdcIhdrr8MbBmXuZP2QeD6OF69TPktNoBdJCCLqSE/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/AVvXsEgiFSekNzzCdnuXbaykU6KU5dzZYOKhpszqjcHuWN7HB_SaiocDjQ5RwR6Ak7oDmRuBycDm5ixSbv_eVblaH7MtThyphenhyphenYR2TAKXcNLqoT0sl7_nSwZQY5uD1ptANgtsQA2tWBUA4nGwjrXd0/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/AVvXsEiq2MzHv9qundsHW6DMs2kVB2k0cLH3kVrMbLi9SFjLE2TP_S-zngrFHDNuNEaTYRBU0CfGzmp5R8G8uXiMYNlq60XFGOZrgB9N4uF1zJCOoSGhBGiiO5X1V_bmIqocBIjLUqljICfJ7Sg/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...

jQuery Accordion Recent Post

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 dengan script 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 :)