Cara buat Widget Postingan Terbaru/Recent Post di Blogger dengan gambar

Muncul pertanyaan "mas bagaimana cara membuat Postingan terbaru yang ada di samping kanan blog. Tampilannya menarik, ada gambar dan navigasinya jadi pengunjung bisa lihat lebih banyak postingan terbaru blog tersebut hanya dengan klik Next tanpa memuat blog lagi". Mungkin bagi anda yang menggunakan Template Viomagz milik Sugeng Riyadi tidak memiliki tombol next pada recent postnya.

Dengan tampilan blog yang menarik dan enak dilihat membuat pengunjung di situs kita merasa nyaman. Tutorial cara membuat widget postingan terbaru dengan Navigasi dan Gambar ini saya dapatkan dari blog Arlina Design. Disana anda 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 pilihan contoh widget blogger. Sesuaikan dengan selera anda dan saran saya cari widget yang ringan dan tidak memberatkan situs.

Mengapa saya 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 kode HTML dan Save maka Recent Post sudah tampil. Berbeda dengan Widget lainnya yang mengharuskan kita masuk di Tema, Edit HTML lalu meletakkan kode di tenggah sekian banyak kode bahasa pemograman. Jika anda salah meletakkan maka akan terjadi error dan pusing untuk memperbaikinya.

Sebenarnya tampilan Recent Post atau postingan ini saya ambil dari template liputan9.sponblog.com yang telah mereka edit hampir sama dengan berita terbaru Liputan 6, ditambah lagi dengan latar tulisan recent post yang telah menggunakan asian games jakarta dan palembang 2018 sehingga tampilannya tambah menarik.

Langkah Cara buat Widget Postingan Terbaru/Recent Post di Blogger dengan gambar

  • Masuk ke Tata Letak
  • Tambahkan Gadget
  • Pilih HTML/JavaScript
  • Paste kode dibawah ini.

<style scoped='' type='text/css'>
/* Recent Post Navigasi */
.recentpostel{background:#fafbff none repeat scroll 0 0;border:1px solid #e5e8f5;display:block;height:60px;margin:-1px 0 0;padding:10px}.recentpostel img{float:left;height:60px;margin:0 10px 0 0!important;object-fit:cover;width:60px!important}.recentpostel h6,.recentpostel h6 a{color:#223267;display:block;font-size:14px;font-weight:400;height:60px;line-height:1.5;margin:0;overflow:hidden;text-align:left;text-decoration:none}.recentpostel h6:hover,.recentpostel h6 a:hover{color:#842d98}.recentpostel p{display:none}#recentpostload{background:#fff url(https://2.bp.blogspot.com/-vmc5Vaom1Qk/W2qtByHgJxI/AAAAAAAABgE/PCfz8DCAmHkSvvCpbSdNRIEIcdJnLGoqQCLcBGAs/s1600/loadingbox.gif) no-repeat scroll 50% 50%;height:403px;text-align:center}#recentpostsae::before{background:#223267 url(https://3.bp.blogspot.com/-eI0cKDJ8Vs4/W2bfabqNVII/AAAAAAAABfs/dHTZpFg3UH47kEHFn9mDxn6Z_f_Yg9LIwCLcBGAs/s1600/weback.png) repeat scroll 0 0 / 100% 46px;color:#fff;content:"Recent Post";display:block;font-size:17px;font-weight:700;letter-spacing:1px;padding:10px 15px;text-align:left;text-transform:uppercase}#recentpostnavfeed{background:#fafbff none repeat scroll 0 0!important;border:1px solid #e5e8f5;color:#9aa1b9;display:block;font-size:11px;margin:-1px 0 0;overflow:hidden;text-align:center;text-transform:uppercase}#recentpostnavfeed a{background:#fafbff none repeat scroll 0 0;color:#9aa1b9;display:block;padding:5px 10px}#recentpostnavfeed span{padding:5px 10px}#recentpostnavfeed .next{display:block!important;float:right}#recentpostnavfeed .previous{background:#fafbff none repeat scroll 0 0;display:block!important;float:left}#recentpostnavfeed .home{display:none;text-align:center}#recentpostnavfeed span.noactived{background:#fafbff none repeat scroll 0 0}#recentpostnavfeed a:hover{color:#223267}
</style>

<script type='text/javascript'>
//<![CDATA[
var numfeed = 5; var startfeed = 0;
var charac = 0; 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+"'><img src='"+a+"' alt='"+n+"' title='"+n+"' /></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'>« Kembali</a>":"<span class='noactived previous'>« Kembali</span>",s+=urlnext?"<a href='javascript:navigasifeed(1);' class='next'>Lanjut »</a>":"<span class='noactived next'>Lanjut »</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="/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)};
function OpenSideNav(){document.getElementById("SponblogSideNav").style.display="block"}function closeSideNav(){document.getElementById("SponblogSideNav").style.display="none"}function showresponddiv(e){var n=e.replace("submenu-","opensubmenu-"),t=document.getElementById(n);current&&current!=t&&(current.style.display="none"),"none"==t.style.display?(t.style.display="block",current=t):t.style.display="none"}var current=null;
//]]>
</script>
<div id="recentpostsae"></div><div id="recentpostnavfeed"></div>
Terakhir kik simpan.

Cukup mudah bukan membuat Recent Post atau menampilkan Postingan Terbaru di blogger. Untuk tampilannya silahkan sobat lihat di samping kanan blog govieattack.com ini. Cukup menarik bukan, . Silahkan dicoba semoga berhasil dan bermanfaat untuk lebih lagi meningkatkan Page View blog anda.

0 Response to "Cara buat Widget Postingan Terbaru/Recent Post di Blogger dengan gambar"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel