Cara Membuat Widget Artikel Terbaru Dengan Gambar

Cara Membuat Widget Artikel Terbaru Dengan Gambar - Widget artikel terbaru atau recent post adalah sebuah navigasi menu yang menampilkan kumpulan artikel-artikel terbaru dari sebuah Website atau blog. Widget ini sebagai navigasi alternatrif bagi para pengunjung blog agar lebih mudah mengetahui dan mengakses artikel terbaru dari blog Anda.

Selain menggunakan sarana yang telah tersedia secara default di Blogger, Anda juga dapat membuat widget artikel terbaru dengan sedikit perubahan yaitu dengan penambahan thumbnail gambar. Berikut ini cara membuat widget artikel terbaru dengan thumbnail gambar :

1. Login ke blog Anda.

2. Pada menu navigasi, pilih "Tata Letak".

3. Klik "Tambahkan Gadget".

4. Pada jendela tambahkan gadget, klik "HTML/JavaScript".

5. Selanjutnya copy Script dibawah ini, paste ke kolom konten widget.

<style scoped='' type='text/css'>
#recent-posts{color:#999;font-size:12px} #recent-posts img{background:#fafafa;float:left;height:60px;margin-right:8px;width:60px;border-radius:4px} #recent-posts ul{margin:0;padding:0} #recent-posts ul li{margin:0 0 10px 0;padding:0 0 10px 0;border-bottom:1px solid rgba(0,0,0,0.1)} #recent-posts ul li:last-child{border-bottom:0} #recent-posts ul li a{display:block;color:#222;font-weight:700;text-decoration:none;font-size:14px;margin:0 0 10px 0;line-height:normal} </style> <div id='recent-posts'> <script type='text/javaScript'>
var rcp_numposts=5;
var rcp_snippet_length=150;
var rcp_info='yes';
var rcp_comment='Comments';
var rcp_disable='T?t Nh?n xét';
function recent_posts(json){var dw='';a=location.href;y=a.indexOf('?m=0');dw+='<ul>';for(var i=0;i<rcp_numposts;i++){var entry=json.feed.entry[i];var rcp_posttitle=entry.title.$t;if('content'in entry){var rcp_get_snippet=entry.content.$t}else{if('summary'in entry){var rcp_get_snippet=entry.summary.$t}else{var rcp_get_snippet="";}};rcp_get_snippet=rcp_get_snippet.replace(/<[^>]*>/g,"");if(rcp_get_snippet.length<rcp_snippet_length){var rcp_snippet=rcp_get_snippet}else{rcp_get_snippet=rcp_get_snippet.substring(0,rcp_snippet_length);var space=rcp_get_snippet.lastIndexOf(" ");rcp_snippet=rcp_get_snippet.substring(0,space)+"&#133;";};for(var j=0;j<entry.link.length;j++){if('thr$total'in entry){var rcp_commentsNum=entry.thr$total.$t+' '+rcp_comment}else{rcp_commentsNum=rcp_disable};if(entry.link[j].rel=='alternate'){var rcp_posturl=entry.link[j].href;if(y!=-1){rcp_posturl=rcp_posturl+'?m=0'}var rcp_postdate=entry.published.$t;if('media$thumbnail'in entry){var rcp_thumb=entry.media$thumbnail.url}else{rcp_thumb="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifv8_JoKKqG4uBHBTQaY3l49FKCDwg3tL42-foG8Hx8vF4cGuMh6lW8ypm1ISBMNvsCrWT1Ta1CHK67Rh9JxjyPpgWcL9H3ln7Ze-DwQfh7YEzcFd5N01Y3sJVQiO_zK9Uxrh5kBl2ZWHH/"};}};dw+='<li>';dw+='<img alt="'+rcp_posttitle+'" src="'+rcp_thumb+'"/>';dw+='<div><a href="'+rcp_posturl+'" rel="nofollow" title="'+rcp_snippet+'">'+rcp_posttitle+'</a></div>';if(rcp_info=='yes'){dw+='<span>'+rcp_postdate.substring(8,10)+'/'+rcp_postdate.substring(5,7)+'/'+rcp_postdate.substring(0,4)+' - '+rcp_commentsNum+'</span>';};dw+='<div style="clear:both"></div></li>';};dw+='</ul>';document.getElementById('recent-posts').innerHTML=dw;};document.write('<script type="text/javascript" src="/feeds/posts/default?alt=json-in-script&max-results='+rcp_numposts+'&callback=recent_posts"></script>'); </script> </div>

- Ubah nilai "var rcp_numposts=5;" sesuai keinginan Anda.

6. Setelah selesai, klik tombol "Simpan", dan lihat hasilnya.

Baca juga artikel : Cara Membuat Widget Artikel Terbaru Di Blogger

Itulah Cara Membuat Widget Artikel Terbaru Dengan Gambar yang dapat Anda lakukan. Semoga bermanfaat.

Share artikel... !