Cara buat Recent Post (Widget Postingan Terbaru) di Blogger dengan gambar

Haiii bertemu lagi di situs kita akan membahas "Cara buat Recent Post (Widget Postingan Terbaru) di Blogger dengan gambar" secara jelas, mari simak sedetilnya ...

Beberapa hari terakhir ada yang bertanya melalui inbox Facebook dan Chat di Whatsapp saya. Mas bagaimana cara membuat Postingan terbelakang yang ada di samping kanan blog. Tampilannya menarik, ada gambar dan navigasinya jadi pengunjung bisa blengok lebih banyak postingan terbelakang blog tersebut hanya dengan  klik Next. Mungkin bagi awak yang menggunakan Template Kompi Flexible milik Kompi Ajaib ini kurang menyukai Recent Post dan Popular Post bawaan template tersebut.

Dengan tampilan blog yang menarik dan enak dilihat membuat pengunjung di situs kita sadar betah. Tutorial cara membuat Recent Post dengan Navigasi ini abdi dapatkan dari blog Arlina Design. Disana awak akan menemukan berbagai macam tutorial blogger. Salah satunya adalah cara membuat Recent post hanya dengan Teks, Recent Post hanya tampilan gambar saja dan ada banyak kesukaan contoh widget blogger. Sesuaikan dengan selera awak dan saran abdi cari widget yang ringan dan tidak memberatkan situs.

Mengapa abdi memilih widget Recent Post dengan tampilan gambar dan navigasi. Selain menarik ternyata cara menambahkannya cukup mudah. Anda cukup masuk ke Tata Letak dan Tambahkan Widget, Paste aba-aba HTML dan Save maka Recent Post sudah tampil. Berbeda dengan Widget lainnya yang mengharuskan kita masuk di Tema, Edit HTML lalu meletakkan aba-aba di tenggah demikian banyak aba-aba bahasa pemograman. Jika awak cacat meletakkan maka akan terjadi error dan pusing untuk memperbaikinya.

Cara buat Recent Post (Widget Postingan Terbaru) di Blogger dengan gambar

Langkah 1 : Masuk ke Tata Letak >> Tambahkan Gadget >> Pilih HTML/JavaScript >> Paste aba-aba dibawah ini.

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

/* Recent Post Navigasi */

#recentpostnavkeras #585858;width:100%;margin:0 auto}

#recentpostsaemargin:0

.recentpostelkeras #ddd;margin:5px 0;padding:10px;height:79px}

.recentpostel imgbulat #ddd}

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

.recentpostel:hoverbackground-color:#fefefe

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

#recentpostloadkeras #ddd}

#recentpostnavfeedkeras #ddd;color:#bbb;font-family:Verdana;font-size:12px;text-align:center;margin:0}

#recentpostnavfeed:hoverbackground-color:#fefefe

#recentpostnavfeed acolor:#141414!important;font-family:Tahoma!important;font-size:12px!important;font-weight:400!important;display:block;padding:5px 10px

#recentpostnavfeed spanpadding:5px 10px

#recentpostnavfeed .nextfloat:right

#recentpostnavfeed .previousfloat:left

#recentpostnavfeed .hometext-align:center

#recentpostnavfeed a:hover,#recentpostnavfeed span.noactivedcolor:transparant!important

</style>

<script type='text/javascript'>

//<![CDATA[

var numfeed = 5;

var startfeed = 0;

var urlblog = "https://www.mastimon.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;breaki="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/AVvXsEi_0OW-mAa-7lGhmjog9ze6IOnvO4sTUOFioprCNgy15huDhNc8zzkRSnm6-pioNZEHSwYDtxsz9ciKbnCCokFcYZh0XEc-GLF-GjbbxX1Kvga-fojDb6bH47mS352a7CzzTlZezw8XpUmv/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=sfunction 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=1function 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 : Ganti tulisan warna merah dengan alamat blog awak dan silahkan tentukan berapa postingan yang akan di tampilkan dan berapa karakter huruf yang akan di tampilan.

Cukup mudah bukan membuat Recent Post atau menampilkan Postingan Terbaru di blogger. Untuk tampilannya silahkan sobat blengok di samping kanan blog mastimon.com ini lamun hanya tampil jika awak blengok di versi Desktop/Komputer. Cukup menarik bukan, karna dari beberapa blogger pemula yang menanyakan tutorial ini dan ala akhirnya daripada abdi jawab satu satu selbih baik abdi buatkan tutorialnya. Silahkan dicoba semoga berhasil dan bermanfaat untuk lebih lagi meningkatkan Page View blog anda.

Begitulah pembahasan "Cara buat Recent Post (Widget Postingan Terbaru) di Blogger dengan gambar" terimakasih atas kunjungannya

artikel ini ke dalam kategori blogging tutorial videos, blogging dapat uang,

artikel ini bersumber dari berbagai artikel yang ada di google searcing.