Recent Post Dengan Thumbnail - Hallo sobat, berjumpa lagi dengan saya dalam rangka pembahasan tutorial blog tentang cara membuat recent post dengan gambar. Mungkin kalian juga sudah menyadari akibat ditutup nya hosting dari google sehingga membuat script-script yang sudah di upload menjadi mati. Sehingga, banyak tutorial-tutorial blog menjadi tidak berfungsi salah satunya yaitu tutorial cara membuat recent post di blog.
Pada kesempatan ini Poin-ID akan share kepada anda cara membuat recent post bergambar yang simple dan keren. Mengenai tampilan dari recent post ini bisa anda lihat dibawah ini :
Saya pikir tampilan diatas juga cukup keren dan responsif. Namun, bila anda mahir dalam #CSS, anda bisa mengubah tampilan diatas sesuai dengan selera anda yang penting anda suka.
Baca Juga : Cara Membuat Recent Post Tanpa Gambar di Blog
Nah, anda tertarik membuatnya?
Yuk langsung saja simak caranya dibawah ini :
Cara Membuat Recent Post Dengan Gambar
1. Masuk ke akun blogger anda.
2. Masuk ke bagian Tata Letak
3. Pilih lokasi yang diinginkan
4. Tambahkan Gadget => HTML/JavaScript
5. Pastekan kode script dibawah ini :
<style type='text/css'>
.recent-posts-poinid ul,.recent-posts-poinid li,.recent-posts-poinid li img,.recent-posts-poinid li a,.recent-posts-poinid li a img {margin:0;padding:0;list-style:none;border:none;background:none;outline:none;}
.recent-posts-poinid ul {margin:.5em 0;list-style:none;color:#7b8996;counter-reset:num;}
.recent-posts-poinid ul li img {display:block;margin:0 .5em 0 0;width:50px;height:50px;
float:left;}
.recent-posts-poinid ul li {background-color:#fff;border:1px solid #ddd;margin:0 0 .4em 0!important;padding:.5em 1.5em .5em .5em!important;position:relative;transition:all .6s ease-out;}
.recent-posts-poinid ul li:hover {border-color:#4fafe9;}
.recent-posts-poinid ul li .item-title a, .recent-posts-poinid ul li a {font-weight:400;color:#333;text-decoration:none;transition:all .6s ease-out;}
.recent-posts-poinid ul li .item-title a:hover, .recent-posts-poinid ul li a:hover {color:#4fafe9!important;}
.recent-posts-poinid .item-thumbnail {margin:0;}
.recent-posts-poinid .item-snippet {font-size:11px;}
.profile-img{display:inline;opacity:1;margin:0 6px 3px 0;}
</style>
<div class='recent-posts-poinid'>
<script style="text/javascript">
function recentpostpoinid(t){document.write('<ul class="recent_posts_arlina">');for(var e=0;e<numposts;e++){var r,n=t.feed.entry[e],i=n.title.$t;if(e==t.feed.entry.length)break;for(var o=0;o<n.link.length;o++){if("replies"==n.link[o].rel&&"text/html"==n.link[o].type)var m=n.link[o].title,u=n.link[o].href;if("alternate"==n.link[o].rel){r=n.link[o].href;break}}var l;try{l=n.media$thumbnail.url}catch(h){s=n.content.$t,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),l=-1!=a&&-1!=b&&-1!=c&&""!=d?d:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEjoTajliL_lJN68ypL8eksG6mSKZtpZWa4Ot1B1SSz8fIqGQAKBZUlcixnKCmNhBHH_iokov3__AGNiByxl2vFzQ_0b9Hil_0tzTaPTyM25lOBCxUYGuqew5Q9jQI85XDeDI6WL0-/s1600/InfoArlina.png"}var w=n.published.$t,f=w.substring(0,4),p=w.substring(5,7),g=w.substring(8,10),v=new Array;if(v[1]="Jan",v[2]="Feb",v[3]="Mar",v[4]="Apr",v[5]="May",v[6]="Jun",v[7]="Jul",v[8]="Aug",v[9]="Sep",v[10]="Oct",v[11]="Nov",v[12]="Dec",document.write('<li class="clearfix">'),1==showpostthumbnails&&document.write('<span class="wrapinfo"><img class="recent_thumb" src="'+l+'" width="60" height="60"/></span>'),document.write('<b><a href="'+r+'" target ="_top">'+i+"</a></b><br>"),"content"in n)var y=n.content.$t;else if("summary"in n)var y=n.summary.$t;else var y="";var k=/<\S[^>]*>/g;if(y=y.replace(k,""),1==showpostsummary)if(y.length<numchars)document.write("<i>"),document.write(y),document.write("</i>");else{document.write("<i>"),y=y.substring(0,numchars);var _=y.lastIndexOf(" ");y=y.substring(0,_),document.write(y+"..."),document.write("</i>")}var x="",$=0;document.write("<br>"),1==showpostdate&&(x=x+v[parseInt(p,10)]+"-"+g+" - "+f,$=1),1==showcommentnum&&(1==$&&(x+=" | "),"1 Comments"==m&&(m="1 Comment"),"0 Comments"==m&&(m="No Comments"),m='<a href="'+u+'" target ="_top">'+m+"</a>",x+=m,$=1),1==displaymore&&(1==$&&(x+=" | "),x=x+'<a href="'+r+'" class="url" target ="_top">More -></a>',$=1),document.write(x),document.write("</li>"),1==displayseparator&&e!=numposts-1&&document.write("<hr size=0.5>")}document.write("</ul>")}
</script>
<script style="text/javascript">
var numposts=5,showpostthumbnails=!0,displaymore=!1,displayseparator=!1,showcommentnum=!1,showpostdate=!1,showpostsummary=!1,numchars=62;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=recentpostpoinid"></script></div>
Keterangan :
Ganti kode yang berwarna biru dengan jumlah postingan yang anda inginkan.
6. Simpan dan lihat hasilnya.
Bila ada keluhan atau kode tidak work silakan komentar dibawah. Kode diatas sudah kami test dan hasilnya work. Mungkin itu dulu share kali ini, jangan lupa selalu pantau kami untuk mengetahui tutorial blog lainnya.
