Cara Membuat Recent Posts First Thumbnail Disertai Numpost - Kurazone Blog | Panduan Belajar Blogger Pemula

Cara Membuat Recent Posts First Thumbnail Disertai Numpost

Pilihan Editor :

Cara Membuat Recent Posts First Thumbnail Disertai Numpost
Penulis Bagus Surochman
0
Modus malam




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
  • Klik disini untuk melihat DEMO nya
  • Sisanya, silahkan kalian kembangkan sendiri

INFO :
Bagi sahabat Kurazer yang tertarik ingin mendapatkan penghasilan dari Blognya, kalian bisa mencoba menjadi Publisher di Zoteromedia. Cara daftar dan pasang iklannya bisa mengikuti petunjuk pada tautan artikel dibawah ini:
>> Cara Daftar dan Memasang Iklan di Zoteromedia Terbaru 2018

    Itulah informasi mengenai "Cara Membuat Recent Posts First Thumbnail Disertai Numpost", selamat mencoba dan semoga bermanfaat. Goodluck !!

    sumber : arlina.dzgn
    nanio
    Cara Membuat Recent Posts First Thumbnail Disertai Numpost
    Cara Membuat Recent Posts First Thumbnail Disertai Numpost Cara Membuat Recent Posts First Thumbnail Disertai Numpost Reviewed by Bagus Surochman on 6/21/2018

    Tidak ada komentar:

    1. Berkomentarlah dengan tata bahasa yang baik agar orang lain tahu sebijak apa karakter anda melalui kata kata.
    2. Silahkan tulis komentar anda untuk hal apapun yang masih berhubungan dengan post pada halaman ini.
    3. Mohon untuk tidak menyertakan Link Aktif pada kolom komentar.
    4. Mohon maaf apabila tidak sempat membalas komentar 1 per 1.
    5. Komentar selalu di moderasi.