Cara Membuat Recent Post Blogger Terbaru

Cara membuat recent post  - Pada kesempatan hari ini saya akan mengatakan tutorial cara membuat recent post / postingan terbaru  untuk blogger  tentu nya blogger.com sendiri tidak menyediakan widget recent post / postingan terbaru tetapi blogger.com hanya menyediakan widget popular post / postingan terpopuler, script ini recent post ini saya dapatkan dari blog mastimon  untuk referensi nya sendiri anda mampu mengunjungi blog mastimon.com.

• Cara Membuat Popular Post Keren
• Cara Membuat Recent Post Dengan Thumbnail
• Cara Membuat Recent Post Keren
• Cara Membuat Recent Post Ringan
• Cara Membuat Recent Post Tanpa Edit HTML

Keunggulan dari script recent post dari mastimon  hanya muncul di mode desktop / komputer jikalau anda melihat nya melalui handphone recent post tidak akan muncul biar mempercepat loading dikala di visitor yang  berkunjung  menggunakan handphone dan yang lebih hebat nya script ini di sisipkan tombol previous home next, yang tentu nya mempercantik tampilan blog anda.

Untuk script ini anda tidak perlu susah susah edit html terlebih dahulu untuk memasukan code css dan lain-lain  anda hanya perlu login melalui blogger .com dan menuju tata letak / layout selanjut nya tambahkan widget dan anda pilih  HTML/JavaScript dan paste arahan html kemudian save  sangat simpel sekali tidak mirip script yang di luaran sana yang perlu edit html terlebih dahulu.

Cara membuat recent post dengan gambar tanpa perlu edit html.

1 . Masuk ke blogger.com terlebih dahulu.
2. Masuk ke tata letak / layout .
3. Tambahkan gadget.
4. Pilih HTML/JavaScript.
5. Copy kemudian paste script di bawah ini.

<style scoped='' type='text/css'>

/* Recent Post Navigasi */

#recentpostnav{border:1px solid #585858;width:100%;margin:0 auto}

#recentpostsae{margin:0}

.recentpostel{background:#fff;display:block;border:1px solid #ddd;margin:5px 0;padding:10px;height:79px}

.recentpostel img{background:#fff;padding:4px;float:left;height:70px;margin-right:8px;width:70px;border:1px solid #ddd}

.recentpostel h6,.recentpostel h6 a{text-decoration:none;font-size:13px!important;font-weight:700!important;margin:0;color:#111}

.recentpostel:hover{background-color:#fefefe}

.recentpostel p{font-size:12px;text-align:left;color:#555;line-height:normal;margin:5px 0}

#recentpostload{color:#888;font-family:Tahoma;font-size:100px;letter-spacing:-10px;text-align:center;text-shadow:-5px 0 1px #444;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilfTMx8LrRIaqSRjSPBntOo9GaJE0RG4yPjMYHFatW7Dtlh4lM56qGSoxcxmTgAENkR5lAYyOdc4X3uQQTr6D25ivPW9ZQiNg0WV56lXmI21UBenrZeU2CX0j0UXeFrGkh1cn5JuQ_fKfh/s1600/loader.gif) 50% 50% no-repeat #fff;height:470px;border:1px solid #ddd}

#recentpostnavfeed{border:1px solid #ddd;color:#bbb;font-family:Verdana;font-size:12px;text-align:center;margin:0}

#recentpostnavfeed:hover{background-color:#fefefe}

#recentpostnavfeed a{color:#141414!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>

<script type='text/javascript'>

//<![CDATA[

var numfeed = 5;

var startfeed = 0;

var urlblog = "https://www.nasehatistri.com.com";

var charac = 40;

var urlprevious, urlnext;

function arlinafeed(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:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrFgXL-KDp_QJ0Na9eR-sC_lxk2JcunEThptoX_KccnKpabdIPmAzhnZ9O1v5Ns86MxadkWlxsVURiB9asRXRJaPXG_aE-JyNG5jEhVllPfukxA_3ZPfvUXIqBsOUNJMh7PnX8yCGrhHxI/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>"+arlinafeed(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","arlinalabel"),document.getElementsByTagName("head")[0].appendChild(n),startfeed=1}function removerscript(){var e=document.getElementById("arlinalabel"),t=e.parentNode;t.removeChild(e)}onload=function(){navigasifeed(0)};

//]]>

</script>

<div id="recentpostsae"></div>

<div id="recentpostnavfeed"></div>

6. Setelah itu anda klik save.
7. Buka blog anda apa recent post sudah muncul atau tidak.

Keterangan :  Jangan lupa untuk mengganti url https://www.nasehatistri.com dengan url blog anda dan jikalau anda ingin menampilkan jumlah post di recent post lebih banyak anda mampu mengubah var numfeed = 5; menjadi var numfeed = 10; atau sesuka anda, jikalau anda ingin mengubah beberapa kata yang di munculkan anda mampu mengubah nya di var charac = 40; menjadi var charac = 60; atau sesuka anda.

Cukup simpel sekali bukan  Cara Membuat Recent Post ( Postingan Terbaru )  script ini hanya muncul di mode desktop / komputer saja. Semoga artikel cara membuat recent post ini bermanfaat dan tentu nya menaikan page view pada blog anda terimakasih.

Share this post