selamat datang setelah lama gak di update karena blog satunya akhirnya saya merasa sudah saatnya kembali aktif mengurusi blog ini…
pada kesempatan kali ini tanpa basi basi lagi saya mau membagikan cara membuat recent post warna warni yang super keren dan jarang ditemukan..
widget recent post atau tulisan terbaru bermanfaat memberikan informasi kepada pengunjung, mana saja sih tulisan terbaru yang ada di blog kita, maksudnya recent post ini nantinya aka memanggil feed dari postingan terakhir suatu blog.
hal ini akan membantu posting terbaru mendapat perhatian lebih jadi sekalian memudahkan kita dalam mempromoskan tulisan.
kelebihannya recent post ini sebagai berikut:
- simple
- warna warni
- responsive
- mudah digunakan
- ada efek animasi loading
- jumlah artikel bisa disesuaikan
- ada trumbnailnya
- descripsi bisa di tentukan jumlahnya.
- cakep
- dan lain lain
contohnya tampilannya kurang lebih seperti gambar dibawh ini
kodenya
<div id=”recentpostsae”></div>
<div id=”recentpostnavfeed”></div>
<script type=’text/javascript’>
//<![CDATA[
var numfeed = 7;
var startfeed = 0;
var urlblog = “https://www.berwirausaha.net“;
var charac = 20;
var urlprevious, urlnext;
function masukakalfeed(e,t){for(var n=e.split(“<“),r=0;r<n.length;r++)-1!=n[r].indexOf(“>”)&&(n[r]=n[r].substring(n[r].indexOf(“>”)+1,n[r].length));return n=n.join(“”),n=n.substring(0,t-1)}function showrecentpostsae(e){var t,n,r,a,i,s=””;urlprevious=””,urlnext=””;for(var l=0;l<e.feed.link.length;l++)”previous”==e.feed.link[l].rel&&(urlprevious=e.feed.link[l].href),”next”==e.feed.link[l].rel&&(urlnext=e.feed.link[l].href);for(var d=0;d<numfeed&&d!=e.feed.entry.length;d++){t=e.feed.entry[d],n=t.title.$t;for(var l=0;l<t.link.length;l++)if(“alternate”==t.link[l].rel){r=t.link[l].href;break}i=”content”in t?t.content.$t:”summary”in t?t.summary.$t:””,a=”media$thumbnail”in t?t.media$thumbnail.url:”http://3.bp.blogspot.com/-BHuXHny1kOk/VXrkSyxKCjI/AAAAAAAACas/pZLJAEUDtds/s1600/no-image.png”,s+=”<div class=’recentpostel’>”,s+=”<a href='”+r+”‘ target=’_blank’><img src='”+a+”‘ /></a>”,s+=”<h6><a href='”+r+”‘>”+n+”</a></h6>”,s+=”<p>”+masukakalfeed(i,charac)+”…</p>”,s+=”</div>”}document.getElementById(“recentpostsae”).innerHTML=s,s=””,s+=urlprevious?”<a href=’javascript:navigasifeed(-1);’ class=’previous’>Previous</a>”:”<span class=’noactived previous’>Previous</span>”,s+=urlnext?”<a href=’javascript:navigasifeed(1);’ class=’next’>Next</a>”:”<span class=’noactived next’>Next</span>”,s+=”<a href=’javascript:navigasifeed(0);’ class=’home’>Home</a>”,document.getElementById(“recentpostnavfeed”).innerHTML=s}function navigasifeed(e){var t,n;-1==e?(t=urlprevious.indexOf(“?”),n=urlprevious.substring(t)):1==e?(t=urlnext.indexOf(“?”),n=urlnext.substring(t)):n=”?start-index=1&max-results=”+numfeed+”&orderby=published&alt=json-in-script”,n+=”&callback=showrecentpostsae”,incluirscript(n)}function incluirscript(e){1==startfeed&&removerscript(),document.getElementById(“recentpostsae”).innerHTML=”<div id=’recentpostload’></div>”,document.getElementById(“recentpostnavfeed”).innerHTML=””;var t=urlblog+”/feeds/posts/default”+e,n=document.createElement(“script”);n.setAttribute(“type”,”text/javascript”),n.setAttribute(“src”,t),n.setAttribute(“id”,”masukakallabel”),document.getElementsByTagName(“head”)[0].appendChild(n),startfeed=1}function removerscript(){var e=document.getElementById(“masukakallabel”),t=e.parentNode;t.removeChild(e)}onload=function(){navigasifeed(0)};
//]]>
</script>
<style>
#recentpostnav{border:1px solid #000;width:100%;margin:0 auto;}
#recentpostsae{margin:0}
.recentpostel{background:#333;display:block;border:2px solid #111;margin:5px 0;padding:10px;height:79px;}
.recentpostel img{background:#222;padding:5px;float:left;height:70px;margin-right:8px;width:70px;border-radius:5px;}
.recentpostel h6,.recentpostel h6 a{text-decoration:none;font-size:14px!important;font-weight:700!important;margin:0;color:#000;}
.recentpostel:nth-child(1n+0) {background: #F49A9A;}
.recentpostel:nth-child(2n+0) {background: #FCD092;}
.recentpostel:nth-child(3n+0) {background: #FFF59E;}
.recentpostel:nth-child(4n+0) {background: #E1EFA0;}
.recentpostel:nth-child(5n+0) {background: #B1DAEF;}
#recentpostload{color:#888;font-family:Tahoma;font-size:100px;letter-spacing:-10px;text-align:center;text-shadow:-5px 0 1px #444;background:url(https://2.bp.blogspot.com/-60aISBQLRY0/VFBMqzLfzGI/AAAAAAAABgM/GInmVTvEzkc/s1600/loader.gif) 50% 50% no-repeat #F49A9A;height:470px;border:1px solid #111}
#recentpostnavfeed{border:2px solid #000;color:#111;background:#F49A9A;font-family:Verdana;font-size:12px;text-align:center;margin:0}
#recentpostnavfeed:hover{background-color:#FCD092;}
#recentpostnavfeed a{color:#111!important;font-family:Tahoma!important;font-size:12px!important;font-weight:400!important;display:block;padding:5px 10px}
#recentpostnavfeed span{padding:5px 10px}
#recentpostnavfeed .next{float:right}
#recentpostnavfeed .previous{float:left}
#recentpostnavfeed .home{text-align:center}
#recentpostnavfeed a:hover,#recentpostnavfeed span.noactived{color:transparant!important}
</style>
