Cara Membuat Widget Artikel Terbaru di Sidebar Blog

ﺍﻟﺴَّﻼَﻡُ ﻋَﻠَﻴْﻜُﻢْ ﻭَﺭَﺣْﻤَﺔُ ﺍﻟﻠﻪِ ﻭَﺑَﺮَﻛَﺎﺗُﻪ

ﺑِﺴْــــــــــــــــــﻢِ ﺍﷲِﺍﻟﺮَّﺣْﻤَﻦِ ﺍﺍﺭَّﺣِﻴﻢ

Cara Membuat Widget Artikel Terbaru di Sidebar Blog

Hai sobat Blogger di manapun kalian berada pasti banyak di kalangan sobat yang mencari artikel yang berjudul Cara Membuat Widget Artikel Terbaru di Sidebar Blog dan cara itu pun rata rata tidak work (bekerja) nah disini saya InsyaAllah akan mencoba share artikel tersebut Insyaallah work 100% amin :D

Mengapa kita harus membuat widget keren artikel terbaru di sidebar ? Karena hal tersebut dapat
memancing para pembaca untuk melihat widget Artikel Terbaru dari postingan kita tersebut dan hal ini
pun bisa meningkatkan viewer ramai di blog kita ( bounce rate )

Oke langsung saja simak cara nya sebagai berikut :

Login akun Blogger > Dashboard (Beranda) > Tata Letak > Tambah Gadget . Lalu Copy Paste saja HTML yang sudah di sediakan di bawah ini

Artikel Terbaru Thumbnail :

<script type="text/javascript"> window.recentposts=(function(){var a=function(p){var d=p||{},i=d.url_blog||"",n=d.numberofposts||5,h=d.id_contain||"#rcposts",e=d.imagesize||40,b=d.snippetsize||100,c=d.loadingClass||"rcloading",m=d.commentstext||"Comments",l=d.firstcmtext||"Comment",f=d.NoCmtext||"No Comments",g=d.MonthNames||["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],k=d.pBlank||"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBKqROU9LRCgyGsHS_iWOjrED8oQwjFnz4VEo_4BysxCdp01ho6Pyp9akdcXGlZNM24JsYi83W-gJRizNr0z7cZFMZQBbtgQVIwKmEca_Izm6YF3eS_IsdS4d9V0tjbG3Sx2IcAhq28LE/s1600/no.png";$(h).addClass(c);var j=i;if(i===""){j=window.location.protocol+"//"+window.location.host}$.ajax({url:j+"/feeds/posts/default?alt=json-in-script&orderby=published&max-results="+n+"",type:"get",dataType:"jsonp",success:function(v){var y,o,w,q,A,D,z,F,x,C,E,s="",B=v.feed.entry;if(B!==undefined){s="<ul class='rcpost'>";for(var u=0;u<B.length;u++){for(var t=0;t<B[u].link.length;t++){if(B[u].link[t].rel=="alternate"){y=B[u].link[t].href;break}}for(var r=0;r<B[u].link.length;r++){if(B[u].link[r].rel=="replies"&&B[u].link[r].type=="text/html"){w=B[u].link[r].title.split(" ")[0];break}}if("content" in B[u]){A=B[u].content.$t}else{if("summary" in B[u]){A=B[u].summary.$t}else{A=""}}if("media$thumbnail" in B[u]){D=B[u].media$thumbnail.url.replace(/\/s[0-9]+\-c/g,"/s"+e+"-c")}else{D=k}if(w===0){q=' <span class="rccomments">'+f+"</span>"}else{if(w===1){q=' <span class="rccomments">'+w+" "+l+"</span>"}else{q=' <span class="rccomments">'+w+" "+m+"</span>"}}A=A.replace(/<\S[^>]*>/g,"");if(A.length>b){A=A.substring(0,b)+"..."}o=B[u].title.$t;z=B[u].published.$t.substring(0,10),F=z.substring(0,4),x=z.substring(5,7),C=z.substring(8,10),E=g[parseInt(x,10)-1],s+='<li><a class="rcthumbs" href="'+y+'" target="_blank"><img style="width:'+e+"px;height:"+e+'px;display:block" alt="'+o+'"src="'+D+'"/></a><strong><a href="'+y+'" target="_blank">'+o+'</a></strong><span class="date"><span class="dd">'+C+'</span> <span class="dm">'+E+'</span> <span class="dy">'+F+"</span></span>"+q+"<p>"+A+"</p></li>"}s+="</ul>";$(h).html(s).removeClass(c)}else{$(h).html("<span>No result!</span>").removeClass(c)}},error:function(){$(h).html("<strong>Error Loading Feed!</strong>").removeClass(c)}})};return function(b){a(b)}})(); </script> <style type="text/css"> ul.rcpost {line-height: 1.2;} ul.rcpost li{list-style:none;margin:0;overflow:hidden;padding: 0.7em 0px;} ul.rcpost .rcthumbs{float:left;margin:0 7px 10px 0} ul.rcpost strong{display:block;line-height:normal;margin-top:-3px} ul.rcpost p{margin:5px 0 11px;line-height:normal;font-size:11px} ul.rcpost .date,ul.rcpost .rccomments{font-size:11px;display:none} ul.rcpost .rccomments{padding-left:5px;border-left:1px solid #969191;display:none} </style> <div id="recentposts"></div> <script type='text/javascript'> //<![CDATA[ $(document).ready(function () { recentposts({ numberofposts:5, id_contain:"#recentposts", commentstext:"Comments", imagesize:72, snippetsize:90 }); }); //]]> </script>

Artikel Terbaru non Thumbnail :

<script type="text/javascript">function showrecentposts(json){for(var i=0;i<numposts;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break}}posttitle=posttitle.link(posturl);if(standardstyling)document.write('<li>');document.write(posttitle)}if(standardstyling)document.write('</li>')}</script><ul><script type="text/javascript">var numposts = 10;var standardstyling = true;</script><script type="text/javascript" src="https://aldiandreansyah.blogspot.co.id/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts"></script></ul></div>

Catatan :

Ubah teks warna merah dengan URL blog kalian.

Lalu klik Simpan/Save

Silahkan lihat di blog sobat work atau tidak , jika tidak work sobat dapat cantumkan komentar di bawah , Terimakasih.

ﻭَ ﺍﻟﺴَّﻼَﻡُ ﻋَﻠَﻴْﻜُﻢْ ﻭَﺭَﺣْﻤَﺔُ ﺍﻟﻠﻪِ

Share this post