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.
Recent post thumbnail dan tanpa thumbnail
Cara pemasangan widget recent post di blogspot:
Cara memasang recent post tanpa thumbnail
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 :
Cara membuat recent post widget with 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) +"&#133;" ;} ;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.

Belum ada Komentar untuk "Cara membuat recent post widget dengan dan tanpa thumbnail di blog "

Posting Komentar

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel