Cara mudah membuat recent post atau trending post with thumbnail

Hallo sobat, tak habis-habisnya saya memberikan tutorial seputar blogging dan media informasi yang mungkin berguna dan bermanfaat bagi kalian,. 

Kali ini saya akan berbagi tentang bagaimana membuat recent post atau trending post yang menampilkan thumbnail seperti gambar dibawah ini, bagaimana? apakah Anda suka? Oke! Kalau gitu lanjutkan.. 

Pertama-tama persiapkan CSS nya terlebih dahulu, saya sudah mempersiapkan CSS nya maka Anda bisa copy paste kode nya dibawah ini


<style type='text/css'>#recent-posts{list-style:none;margin:0;padding:0;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>

Jika sudah, mari lanjutkan lagi dengan copy paste JavaScript nya juga dibawah ini


<ul id="recent-posts"><script>//<![CDATA[ var homePage = "//reedniv.blogspot.com", numPosts = 10; function recentPosts(a){if(document.getElementById("recent-posts")){var e=a.feed.entry,title,link,content="",ct=document.getElementById("recent-posts");for(var i=0;i<numPosts;i++){for(var j=0;j<numPosts;j++){if(e[i].link[j].rel=="alternate"){link=e[i].link[j].href;break}}var title=e[i].title.$t;content+=' <li class="recent-posts"><a href="'+link+'" title="'+title+'" target="_blank" rel="nofollow">'+title+'</a></li>'}ct.innerHTML=content}}var rpc=document.createElement('script');rpc.src=homePage+'/feeds/posts/summary?alt=json-in-script&orderby=published&max-results='+numPosts+'&callback=recentPosts';document.getElementsByTagName('head')[0].appendChild(rpc); //]]></script></ul>

Jika sudah, Jangan lupa ganti reedniv.blogspot.com dengan url milik Anda sendiri, kemudian copy paste lagi kode html nya dibawah ini


<div id='recent-posts'><script type='text/javaScript'>var rpc_numposts=7; var rpc_snippet_length=150; var rpc_info='yes'; var rpc_comment='Comments'; var rpc_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<rpc_numposts;i++){var entry=json.feed.entry[i];var rpc_posttitle=entry.title.$t;if('content'in entry){var rpc_get_snippet=entry.content.$t}else{if('summary'in entry){var rpc_get_snippet=entry.summary.$t}else{var rpc_get_snippet="";}};rpc_get_snippet=rpc_get_snippet.replace(/<[^>]*>/g,"");if(rpc_get_snippet.length<rpc_snippet_length){var rpc_snippet=rpc_get_snippet}else{rpc_get_snippet=rpc_get_snippet.substring(0,rpc_snippet_length);var space=rpc_get_snippet.lastIndexOf(" ");rpc_snippet=rpc_get_snippet.substring(0,space)+"…";};for(var j=0;j<entry.link.length;j++){if('thr$total'in entry){var rpc_commentsNum=entry.thr$total.$t+' '+rpc_comment}else{rpc_commentsNum=rpc_disable};if(entry.link[j].rel=='alternate'){var rpc_posturl=entry.link[j].href;if(y!=-1){rpc_posturl=rpc_posturl+'?m=0'}var rpc_postdate=entry.published.$t;if('media$thumbnail'in entry){var rpc_thumb=entry.media$thumbnail.url}else{rpc_thumb="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoEeLf8OICeYU9n2k0edVWxLcA5vHU6vuyXRw42C5CRNqZgHttplioDVUta3tqhjWDY_xGkGtkVQbzue5LDPCYwsTE4aH9TIGqjPy8NxIVXi9eUmbk2KmV-TcKCOKCMtCaSCnWebGD0OXY/w1600-h900-n/empty.png"};}};dw+=' <li>';dw+='<img alt="'+rpc_posttitle+'" src="'+rpc_thumb+'"/>';dw+='<div><a href="'+rpc_posturl+'" rel="nofollow" title="'+rpc_snippet+'">'+rpc_posttitle+'</a></div>';if(rpc_info=='yes'){dw+='<span>'+rpc_postdate.substring(8,10)+'/'+rpc_postdate.substring(5,7)+'/'+rpc_postdate.substring(0,4)+' - '+rpc_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='+rpc_numposts+'&callback=recent_posts\"><\/script>'); </script></div>

Jika sudah maka coba Anda taruh kode diatas dengan menambahkan widget baru didalam blogger Anda dan berikan nama, cobalah lihat hasilnya.


Begitulah Cara mudah membuat recent post atau trending post with thumbnail semoga bermanfaat tutorial ini buat Anda