Cara Membuat Recent Post ( Postingan Terbaru ) Seperti Mastimon

Cara membuat recent post  - Pada kesempatan hari ini saya akan memberikan 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 contoh nya sendiri anda bisa 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 jika anda melihat nya melalui handphone recent post tidak akan muncul supaya mempercepat loading saat 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 kode html lalu save  sangat mudah sekali tidak seperti 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 lalu 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/AVvXsEhY8-jt-qcCqyePY4dDloOIoGsDp6_-OQHTX7V8lF-QBR7_y-tv7KKCbDy0qLe3Xwj2RQiWq-LgRhDaeT9AKo9c4VZJH_YLvH1omfC9POJLQW1MCmTjUrPBR-PC0yzdpZd1Xff8giBeuqAt/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://tibalagi.blogspot.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/AVvXsEhcUqfnKXd30BKXOU_1DDkYV5r1-d2el3W94JBy3ifPwXSkmbQl6qrnseIKmX7ee2XFv1Kkaxsvi8FtTb64x1tXtavBASFpW8xAp2zF-MoFQYq7mRk5FzpczjzJX-jfdLs1gBc36jFhthhC/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://tibalagi.blogspot.comdengan url blog anda dan jika anda ingin menampilkan jumlah post di recent post lebih banyak anda bisa mengubah var numfeed = 5; menjadi var numfeed = 10; atau sesuka anda, jika anda ingin mengubah beberapa kata yang di munculkan anda bisa mengubah nya di var charac = 40; menjadi var charac = 60; atau sesuka anda.

Cukup mudah 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.