Skip to main content

Cara Membuat Postingan Terbaru ( Recent Post ) di Blogger dengan Gambar

Masmalik.com - Cara membuat postingan terbaru | Bagaimana sih membuat postingan terbaru atau recent post yang ada di samping blog? Membuat postingan terbaru pada blog sebenarnya tidaklah sulit dan cukup mudah bahkan untuk blogger pemula sekalipun seperti saya ini. Lalu bagaimana cara membuat postingann terbaru yang menarik, yang ada gambarnya dan juga ada navigasinya sehingga pengunjung bisa untuk melihat lebih banyak postingan terbaru pada blog hanya dengan meng-klik next. Nah untuk anda yang sedang mencari cara bagaimana membuat postingan terbaru seperti itu, maka anda tepat sekali mampir dan membaca artikel ini.

Cara Membuat Postingan Terbaru ( Recent Post ) di Blogger dengan Gambar

Cara membuat postingan terbaru yang akan saya bagikan ini sudah saya tes dan coba di blog saya lainya yaitu infoikan.xyz. Dan saya pasang pada template viomagz buatan massugeng.id, untuk loading dari postingan terbaru ini juga tidak berat jadi masih tetap aman dan tidak memberatkan web atau blog. 

Memiliki blog dengan tampilan yang menarik dan enak dilihat maka akan membuat pengunjung blog kita bisa merasa betah. Untuk tutorial cara membuat recent post atau postingan terbaru dengan navigasi ini saya dapatkan dari blog mastimon.com, dan dia dapatkan juga tutuorial ini dari blognya Arlina Design. Kalau di blog Arlina Design banyak sekali disana berbagai macam cara tutorial blogger. Salah satu contohnya adalah cara membuat widget recent post dengan gambar saja, recent post hanya dengan text dan masih banyak lagi pilihan contoh widget blogger yang lainnya. Anda tinggal sesuaikan dengan selera dan untuk saran lebih baik untuk menggukan widget yang ringan dan tidak memberatkan loading situs blog. 

Untuk widget recent post dengan tampilan navigasi ini sangat menarik, dan untuk cara memasangnya juga sangat mudah tidak perlu untuk mnegedit HTML pada template blog. Anda hanya cukup untuk pergi ke tata letak dan tambahkan widget dan pastekan kode HTML lalu save maka nanti recent post atau postingan terbaru sudah tampil. 

Cara Membuat Postingan Terbaru ( Recent Post ) di Blogger dengan Gambar

Langkah pertama : Anda masuk ke Tata Letak >> Tambahkan Gadget  >> Pilih HTML/Javascript >> Pastekan kode HTML 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 urlblog = "https://www.masmalik.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:"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>

Catatan !! Ganti tulisan warna merah yang bertulisakan  https://www.masmalik.com dengan alamat blog anda dan silahkan juga untuk mengatur berapa jumlah psotingan yang mau di tampilkan dan berapa karakter huruf yang mau di tampilkan juga.

Itu dia cara buat postingan terbaru atau recent post yang ada navigasinya berserta gambarnya juga. Cukup mudah kan cara buatnya dan tidak ribet tidak perlu edit tema dan otak-atik kode HTML yang ada di dalam tema blogger. 
Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar
Tutup Komentar