Cara Menampilkan Widget Artikel Terbaru Keren di Sidebar Blog
Recent Post adalah salah satu widget pada blog untuk menampilkan artikel terbaru yang biasanya terpasang pada sidebar blog. Dengan menampilkan Recent Post, maka pengunjung blog kamu akan melihat artikel menarik terbaru lainnya, dengan tujuan agar dengan mudah dibaca oleh pengunjung blog.
Langsung saja, tidak perlu berlama-lama lagi ya sobat.
Cara Menampilkan Widget Artikel Terbaru Keren di Blog
Membuat Widget Recent Post Tanpa Thumbnail/Gambar
Widget Recent Post pertama ini tidak menggunakan gambar, artinya hanya tulisan/Judul Blog saja yang ditampilkan.
- Login dengan Blogger sobat.
- Silahkan Pilih Tata Letak, lalu pilih Tambahkan Gadget kemudian pilih HTML/Java Script.
- Copy dan Pastekan dibawah ini pada kolom yang telah disediakan.
<div id="Tutorial-lengkap07">
<script type="text/javascript">
function showrecentposts(t){for(var e=0;e<numposts;e++){var n,r=t.feed.entry[e],i=r.title.$t;if(e==t.feed.entry.length)
break;
for(var d=0;d<r.link.length;d++)
if("alternate"==r.link[d].rel){n=r.link[d].href;break}i=i.link(n);var s=r.published.$t,a=s.substring(0,4),o=s.substring(5,7),l=s.substring(8,10),u=new Array;u[1]="Jan",u[2]="Feb",u[3]="Mar",u[4]="Apr",u[5]="May",u[6]="Jun",u[7]="Jul",u[8]="Aug",u[9]="Sep",u[10]="Oct",u[11]="Nov",u[12]="Dec",standardstyling||document.write(""),document.write('<div class="rctitles2">'),standardstyling&&document.write(""),document.write(i),standardstyling&&document.write(""),1==showpostdate&&document.write(" - "+l+" "+u[parseInt(o,10)]+" "+a),standardstyling||document.write("</div>"),document.write("</div>"),standardstyling&&document.write("")}standardstyling||document.write('<div class="bbwidgetfooter">'),standardstyling&&document.write(""),document.write(""),standardstyling||document.write("/div")}
</script>
<script type="text/javascript">
var numposts = 5;var showpostdate = false;var standardstyling = true;
</script>
<script src="http://tutorial-lengkap07.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts">
</script>
</div>
<noscript>Oops! Make sure JavaScript is enabled in your browser.</noscript>
<style type=text/css>
#hlrpsb a {color: #000000;font-size:13px;text-transform:capitalize;}.rctitles2 {padding-bottom:10px;margin-bottom:10px;border-bottom: 1px dotted #cccccc;}
</style>
Terakhir klik Save/Simpan.Keterangan:
numposts = 5 : Jumlah Recent Post yang akan ditampilkan.
http://tutorial-lengkap07.blogspot.com : Ganti dengan alamat URL blog sobat.
Membuat Widget Artikel Terbaru dengan Thumbnail/Gambar
Nah! untuk cara kedua ini sobat akan membuat Recent Post lengkap dengan Gambar yang tentu akan lebih menarik perhatian pengunjung blog sobat.
- Login menggukan akun Blogger sobat.
- Pilih Tata Letak, Lalu pilih Tambahkan Gadget, kemudian pilih HTML/Java Script.
- Masukkan kode dibawah kedalam kolom yang telah tersedia.
<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=7;
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)+"…";};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/AVvXsEjFK2dhgixpdRuC5MKiq3Qx4gfzlkWkxjT5l16ZT0_vCnWK812cP6OfeRbEWNohM3az4fyWE89K0j7gyFNX93l25TcwcdUFSJuNvpRaIlPdc6YqQGY52kZYcUyYPJQkJxjcEzVCEG802FK7/"};}};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>Demikian Cara Menampilkan Widget Artikel Terbaru Keren di Sidebar Blog tanpa gambar maupun dengan gambar. Semoga berhasil dan Semoga bermanfaat.