Search

Home » , » Cara Menciptakan Recent Post ( Postingan Terbaru ) Menyerupai Mastimon

Cara Menciptakan Recent Post ( Postingan Terbaru ) Menyerupai Mastimon

Cara menciptakan recent post  - Pada kesempatan hari ini aku akan menunjukkan tutorial cara menciptakan 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 aku dapatkan dari blog mastimon  untuk teladan nya sendiri anda sanggup mengunjungi blog mastimon.com.

Keunggulan dari script recent post dari mastimon  hanya muncul di mode desktop / komputer kalau anda melihat nya melalui handphone recent post tidak akan muncul semoga mempercepat loading ketika di visitor yang  berkunjung  menggunakan handphone dan yang lebih jago 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 instruksi html kemudian save  sangat gampang sekali tidak menyerupai script yang di luaran sana yang perlu edit html terlebih dahulu.

Cara menciptakan 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(http://2.bp.blogspot.com/-60aISBQLRY0/VFBMqzLfzGI/AAAAAAAABgM/GInmVTvEzkc/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 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:"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>"+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.com dengan url blog anda dan kalau anda ingin menampilkan jumlah post di recent post lebih banyak anda sanggup mengubah var numfeed = 5; menjadi var numfeed = 10; atau sesuka anda, kalau anda ingin mengubah beberapa kata yang di munculkan anda sanggup mengubah nya di var charac = 40; menjadi var charac = 60; atau sesuka anda.

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

0 comments:

Post a Comment

Powered by Blogger.