Cara Buat Recent Post (Widget Postingan Terbaru) Di Blogger Dengan Gambar
Sabtu, 24 Februari 2018
Beberapa hari terakhir ada yang bertanya melalui inbox Facebook dan Chat di Whatsapp saya. Mas bagaimana cara menciptakan Postingan terbaru yang ada di samping kanan blog. Tampilannya menarik, ada gambar dan navigasinya jadi pengunjung sanggup lihat lebih banyak postingan terbaru blog tersebut hanya dengan klik Next. Mungkin bagi anda yang memakai Template Kompi Flexible milik Kompi Ajaib ini kurang menyukai Recent Post dan Popular Post bawaan template tersebut.
Dengan tampilan blog yang menarik dan lezat dilihat menciptakan pengunjung di situs kita merasa betah. Tutorial cara menciptakan Recent Post dengan Navigasi ini aku dapatkan dari blog Arlina Design. Disana anda akan menemukan banyak sekali macam tutorial blogger. Salah satunya ialah cara menciptakan Recent post hanya dengan Teks, Recent Post hanya tampilan gambar saja dan ada banyak pilihan referensi widget blogger. Sesuaikan dengan selera anda dan saran aku cari widget yang ringan dan tidak memberatkan situs.
Mengapa aku menentukan 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 arahan HTML dan Save maka Recent Post sudah tampil. Berbeda dengan Widget lainnya yang mengharuskan kita masuk di Tema, Edit HTML kemudian meletakkan arahan di tenggah sekian banyak arahan bahasa pemograman. Jika anda salah 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 arahan dibawah 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggGQoSr8UvwUtnACjhhqo6Zqmizxy4lr20UWcMugzLttWl6fU8MuxAsfcXlDFuc6Cf1-3mH7y6bjVJZObnk0iNEG8kGMnJee0_TLze4-h7E_M0SOnCoRhbyGod67OwWu4246wtZ4aEtgMF/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.";
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/AVvXsEh5QAx19SAYg-RDIzpovqJBUBYCZIk5JInqy1m5iTbRcjLxxDlE808n7WvG-PsNJV8_4V_koFAVIL-zm_Oxh8rH6qUTWF9MnaVISHBsRQgeFp8lfZE92ZVgg7gm6o2tSaRDCk1nVSplXLYq/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 : Ganti goresan pena warna merah dengan alamat blog anda dan silahkan tentukan berapa postingan yang akan di tampilkan dan berapa karakter karakter yang akan di tampilan.
Cukup gampang bukan menciptakan Recent Post atau menampilkan Postingan Terbaru di blogger. Untuk tampilannya silahkan teman lihat di samping kanan blog ini tetapi hanya tampil kalau anda lihat di versi Desktop/Komputer. Cukup menarik bukan, karna dari beberapa blogger pemula yang menanyakan tutorial ini dan pada kesannya daripada aku jawab satu satu selbih baik aku buatkan tutorialnya. Silahkan dicoba agar berhasil dan bermanfaat untuk lebih lagi meningkatkan Page View blog anda.
Mengapa aku menentukan 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 arahan HTML dan Save maka Recent Post sudah tampil. Berbeda dengan Widget lainnya yang mengharuskan kita masuk di Tema, Edit HTML kemudian meletakkan arahan di tenggah sekian banyak arahan bahasa pemograman. Jika anda salah 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 arahan dibawah 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggGQoSr8UvwUtnACjhhqo6Zqmizxy4lr20UWcMugzLttWl6fU8MuxAsfcXlDFuc6Cf1-3mH7y6bjVJZObnk0iNEG8kGMnJee0_TLze4-h7E_M0SOnCoRhbyGod67OwWu4246wtZ4aEtgMF/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.";
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/AVvXsEh5QAx19SAYg-RDIzpovqJBUBYCZIk5JInqy1m5iTbRcjLxxDlE808n7WvG-PsNJV8_4V_koFAVIL-zm_Oxh8rH6qUTWF9MnaVISHBsRQgeFp8lfZE92ZVgg7gm6o2tSaRDCk1nVSplXLYq/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 : Ganti goresan pena warna merah dengan alamat blog anda dan silahkan tentukan berapa postingan yang akan di tampilkan dan berapa karakter karakter yang akan di tampilan.
Cukup gampang bukan menciptakan Recent Post atau menampilkan Postingan Terbaru di blogger. Untuk tampilannya silahkan teman lihat di samping kanan blog ini tetapi hanya tampil kalau anda lihat di versi Desktop/Komputer. Cukup menarik bukan, karna dari beberapa blogger pemula yang menanyakan tutorial ini dan pada kesannya daripada aku jawab satu satu selbih baik aku buatkan tutorialnya. Silahkan dicoba agar berhasil dan bermanfaat untuk lebih lagi meningkatkan Page View blog anda.