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(http://lh3.ggpht.com/_xcD4JK_dIjU/S-KAWJugl3I/AAAAAAAAEBg/bY_3UzrECSg/d/bg5.gif) repeat-y scroll left center #E7F7FB; padding:2px 0; border:1px solid #339DC6; } .acrecpost-label{a background:url(http://lh6.ggpht.com/_xcD4JK_dIjU/S-KAVk09KSI/AAAAAAAAEBc/Tqfaca2nwmo/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(http://lh3.ggpht.com/_xcD4JK_dIjU/S-KAVlLiuVI/AAAAAAAAEBU/Hd-n_8N7qak/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&alt=json-in-script&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&alt=json-in-script&callback=accrecentpost"></script>Script yg berwarna biru adalah script tambahan, gantikan Jquery dengan label yg ada di blog anda.
Terakhir
Preview blog anda.
Selengkapnya→