√ Cara Buat Dan Memasang Recent Post Dengan Thumbnail/Bergambar Responsif (Widget Postingan Terbaru)

bagaimana cara menciptakan recent post yang responsif ?
Recent post bagi blogger pemula mungkin terdengar sangat asing, kecuali disebutkan dengan kata "Postingan Terbaru" barulah mereka akan memahami dengan Recent post tersebut.

Apa pentinganya menciptakan recent post atau postingan Terbaru itu?
Jelas sangat penting jikalau anda menginginkan postingan yang terbaru di publikasikan terlihat di bawah hidangan widget yang sudah anda pasangkan.
Silakan lihat gambar berikut ini.

Inilah penampakan sekilas ihwal Widget Recent post yang akan aku bahas di postingan ini. Mengingat dengan membuatnya recent post di Blog atau Website sangatlah penting, tentunya untuk menaikan Page Views dari blog milik anda sendiri.

Cara menciptakan Recent Post Responsif
Cara menciptakan widget postingan terbaru sangatlah gampang sekali. Silakan anda ikuti langkah-langkahnya berikut ini:

1. Login ke blogg/website anda
2. Plih >> layOut atau Tata Letak
3. Tambahkan Gadget dimana saja yang anda inginkan
4. Kemudian Pilih >> Html/JavaScript.
5. Silakan Copy Semua isyarat dibawah ini dan  Paste -kan ke kolom Html/JAVASCRIPT yang anda buat tadi.

<style scoped='' type='text/css'>
/* Recent Post .blogspot.com */
#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/AVvXsEgMXxRmpK0JHseSADWmZCS1LCv3SPlIibDyhlVdrFmnfHaax_7Q0brhgF-QQAbNFVAnIFIHpE5ZhGTAtDM6eTe0w4oezwWDmURqQt02PqjWt0NvIrDNZ5QJ_aG0FSBwjZ3BXbwow0lgqPQr/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.syilent.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/AVvXsEgaEz1JynLyG_mmUttlqwR-t2qQuZFbQZNa8Fdp1I6cndoTFWPmqjIA-uXjhq1lbbYXUdGa1niv-ITTpeltZQqgozEC2_RUY6yKeQHleWrAJdVVl3P48z8NKusYykQ1WrSG3Y9d8To-nmZT/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>

Keterangan :
Silakan anda ubah text biru dengan blog/website anda, lalu ubah juga jumlah postingan dan huruf teks tersebut sesuai cita-cita anda.

Demikianlah cara yang sangat gampang sekali untuk memasang dan menciptakan widget postingan terbaru atau Recent post responsif.


Sumber https://syilent.blogspot.com/

Berbagi :