Cara Membuat Recent Posts First Thumbnail Disertai Numpost

byKurazone Net -

KURAZONE ~ Ada banyak sekali beragam tampilan recent posts yang bisa kita pasang pada Blog, salah satunya adalah widget recent posts dengan style First Thumbnail disertai Numpost, penampakannya seperti pada gambar dibawah ini :
Berikut adalah Cara Membuat Recent Post First Thumbnail With Numpost Responsive Keren
<script style='text/javascript'>
function recentpostinfoarlina(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.replace(/\/s[0-9]+\-c/g,"/s260")}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://2.bp.blogspot.com/-Q6S8qhkE33I/V0VwhvhULoI/AAAAAAAAHfQ/VZkkOgl_wX4X59EP31Jpl1swFsj6-n0TQCLcB/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('<div class="wrapinfo"><img class="recent_thumb" src="'+l+'"/></div>'),document.write('<div class="item-titlex"><a href="'+r+'" target ="_top">'+i+"</a></div>"),"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=!0,numchars=130;
</script>
<script src='/feeds/posts/default?orderby=published&alt=json-in-script&callback=recentpostinfoarlina'></script>
<style>ul.recent_posts_arlina{padding:0;background:#111;counter-reset:popcount}
ul.recent_posts_arlina li{color:#fff;margin:0;padding:15px 10px 15px 45px;position:relative;overflow:hidden;border-bottom:1px solid rgba(255,255,255,.3);transition:all .3s}
ul.recent_posts_arlina li:hover{background:rgba(0,0,0,0.06)}
ul.recent_posts_arlina li i{display:none;font-style:normal}
ul.recent_posts_arlina li:last-child{border-bottom:none}
ul.recent_posts_arlina li .item-titlex{display:inline-block;color:#fff;padding:0 10px 0 0;font-weight:700}
ul.recent_posts_arlina li .item-titlex a{color:#fff;padding:0 10px 0 0;font-size:14px;}
ul.recent_posts_arlina li img{display:none;width:100px;height:auto;}
ul.recent_posts_arlina li:first-child{border-bottom:none;padding:0}
ul.recent_posts_arlina li:first-child img{margin:0;width:300px;height:180px;overflow:
hidden; display: block ;}
ul.recent_posts_arlina li:first-child .wrapinfo{margin:0;width:100%;height:180px;overflow:hidden;display:inline-block}
ul.recent_posts_arlina li:first-child .item-titlex{position:absolute;left:0;right:0;bottom:0;top:0;text-align:left;padding:15px 20px 15px 45px;background:rgba(44,62,80,.6);z-index:1;transform:translate(0,105px);transition:all .3s}
ul.recent_posts_arlina li:hover:first-child .item-titlex{background:rgba(44,62,80,1);transform:translate(0,0)}
ul.recent_posts_arlina li:first-child .item-titlex a{font-size:15px;color:#fff}
ul.recent_posts_arlina li .item-titlex:before{list-style-type:none;padding:0;counter-increment:popcount;content:counter(popcount);position:absolute;left:5%;top:61%;margin-top:-19px;color:rgba(255,255,255,.65);font-size:24px;line-height:1;z-index:2;text-align:center;font-weight:700;transition:all .3s}
ul.recent_posts_arlina li:first-child i{display:block;position:absolute;bottom:0;left:0;right:0;top:0;padding:15px 20px 15px 45px;color:#fff;opacity:0;visibility:hidden;transform:translate(0,180px);font-size:13px;overflow:hidden;text-overflow:ellipsis;height:7.5em;transition:all .3s}
ul.recent_posts_arlina li:first-child i:after{content:&#39;&#39;;text-align:right;position:absolute;bottom:0;right:0;width:70%;height:1.2em;background:linear-gradient(to right,rgba(44,62,80,0),rgba(44,62,80,1) 50%)}
ul.recent_posts_arlina li:hover:first-child i{opacity:1;visibility:visible;transform:translate(0,55px);z-index:2;}
ul.recent_posts_arlina li:first-child .item-titlex:before{top:25%}
ul.recent_posts_arlina li:first-child .item-titlex:before{color:#fff}
ul.recent_posts_arlina li:last-child .item-titlex:before{left:3%}
ul.recent_posts_arlina li:hover .item-titlex:before{color:rgba(255,255,255,1)}</style>
Keterangan :
  • Kode recent post ini bisa kalian pasang pada bagian sidebar blog kalian.
  • Kode diatas bisa dijadikan 1 dalam 1 widget
  • Ubah angka pada var numposts=5 untuk mengganti jumlah postingan yang ingin ditampilkan
  • Sisanya, silahkan kalian kembangkan sendiri
Itulah informasi mengenai "Cara Membuat Recent Posts First Thumbnail Disertai Numpost", selamat mencoba dan semoga bermanfaat. Goodluck !!

sumber : arlina.dzgn
Tags





أحدث أقدم