Cara membuat recent post widget dengan dan tanpa thumbnail di blog
Kali ini omevan akan berbagi cara membuat widget yaitu widget recent post yang mungkin sudah tidak asing lagi bagi sahabat blogger semua. Recent post yang saya akan kasih merupakan sebuah feeds post yang menampilkan artikel postingan terbaru tanpa image thumbnail post dengan tampilan yang sederhana sehingga loading sangat ringan sehingga tidak membebani kecepatan loading halaman blog sobat dan halaman post pun sangat ringan.
Cara pemasangan widget recent post di blogspot:
Di dashbor blogger lalu tata letak, klik add widget bisa anda posisikan di sidebar atau footer lalu klik add widget dan pastekan kode berikut di bawah ini :
<style scoped='' type='text/css' >
ul#recent-posts {list-style: none; margin: 0; padding: 0}
li.recent-posts{display: block; clear: both; overflow: hidden; list-style: none; border-bottom: 1px solid #e3e3e3; word-break:break-word; padding: 10px 0; margin: 0;}
li.recent-posts: last-child {border-bottom: 0;}
li.recent-posts a{color: #444;}
li.recent-posts a:hover{color:444; text-decoration: underline}
</style>
<ul id="recent-posts">
<script>
//<![CDATA[
var homePage = "https://www.blog_url_anda.com", numPosts =6; function recentPost(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 h=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 clasz="recent-posts" > <a href='"link+'" title='"+title+'" target="_blank" rel="nofollow">' +title+'</a></li>'} ct.innerHTML=content}} var rcp=document.createEment('script'); rcp.rsc=homePage+'/feed/posts/summary?alt=json-in-script&orderby=published&max-results=' +numPosts+'callback=recentPosts' ; documentsByTagName('href')[0].appendChild(rcp);
//]]>
</script>
Note : Ganti yang berwarna merah dengan site url blog sobat.
Lalu save widget recent post dan lihat hasilnya untuk recent post tanpa thumbnail.
Cara membuat recent post widget dengan image thumbnail :
Recent post berikut adalah recenr post artikel terbaru dengan image thumbnail, Sama seperti diatas di dasboard blogger tepatnya ditata letak lalu add gadjet bisa anda letakkan di sidebar atau sticky sidebar maupun di footer blogspot dan tempel lalu paste kode berikut :
<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:60; border-radius:4px}
#recent-posts ul{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-deciration:none; font-size:14px; margin: 0 0 10px 0; line-height:normal}
</style>
<div='recent-posts'>
<script type='text/javascript' >
vad rcp_numposts=7;
var rcp_snippet_lenghth=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_numpost;i++) {var.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="" ;}} ;rcp_get snippet.replace(/<[^] *>/g, "") ;if(rcp_get_snippet.length<rcp_snippet_length) {var rcp_snippet_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.$t+' +rcp_comment} elss{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('mexia$thumbnail' in entry) {var rcp_thumb=entry.media$thumbnail.url}else{rcp_thumb="https://1.bp. blogspot.com/-kcwk1J_qB54/w_jZo5xEqI/AAAAAAAAE-c/n4k2fvJt-KY5T3xxSDquf8CpcVz4ZZwgCPcBGAYYCw/s1600/no-thumbnil.png"} ;}} ;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-post').innerHT=dw;} document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?altjson-in-script&max-results=' +rcp-numpost+'&callback=recent-post\" ><\/script>') ;
Save template dan lihat hasilny.
<style scoped='' type='text/css' >
ul#recent-posts {list-style: none; margin: 0; padding: 0}
li.recent-posts{display: block; clear: both; overflow: hidden; list-style: none; border-bottom: 1px solid #e3e3e3; word-break:break-word; padding: 10px 0; margin: 0;}
li.recent-posts: last-child {border-bottom: 0;}
li.recent-posts a{color: #444;}
li.recent-posts a:hover{color:444; text-decoration: underline}
</style>
<ul id="recent-posts">
<script>
//<![CDATA[
var homePage = "https://www.blog_url_anda.com", numPosts =6; function recentPost(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 h=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 clasz="recent-posts" > <a href='"link+'" title='"+title+'" target="_blank" rel="nofollow">' +title+'</a></li>'} ct.innerHTML=content}} var rcp=document.createEment('script'); rcp.rsc=homePage+'/feed/posts/summary?alt=json-in-script&orderby=published&max-results=' +numPosts+'callback=recentPosts' ; documentsByTagName('href')[0].appendChild(rcp);
//]]>
</script>
Note : Ganti yang berwarna merah dengan site url blog sobat.
Lalu save widget recent post dan lihat hasilnya untuk recent post tanpa thumbnail.
Cara membuat recent post widget dengan image thumbnail :
<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:60; border-radius:4px}
#recent-posts ul{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-deciration:none; font-size:14px; margin: 0 0 10px 0; line-height:normal}
</style>
<div='recent-posts'>
<script type='text/javascript' >
vad rcp_numposts=7;
var rcp_snippet_lenghth=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_numpost;i++) {var.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="" ;}} ;rcp_get snippet.replace(/<[^] *>/g, "") ;if(rcp_get_snippet.length<rcp_snippet_length) {var rcp_snippet_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.$t+' +rcp_comment} elss{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('mexia$thumbnail' in entry) {var rcp_thumb=entry.media$thumbnail.url}else{rcp_thumb="https://1.bp. blogspot.com/-kcwk1J_qB54/w_jZo5xEqI/AAAAAAAAE-c/n4k2fvJt-KY5T3xxSDquf8CpcVz4ZZwgCPcBGAYYCw/s1600/no-thumbnil.png"} ;}} ;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-post').innerHT=dw;} document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?altjson-in-script&max-results=' +rcp-numpost+'&callback=recent-post\" ><\/script>') ;
Save template dan lihat hasilny.
