Membuat widget recent post di samping blog. Recent post atau post terbaru biasa diterapkan di sidebar blog atau bawah jika tampilan blog menjadi mobile.
Tampilan recent post pada side blog biasanya akan tampil jika anda membuka blog di perangkat PC, komputer, dan laptop atau smartphone dengan dukungan tampilan PC.
Membuat dan memasang recent post dengan gambar float samping ini telah banyak diterapkan oleh banyak blogger sebagai style recent post mereka, jika anda tertarik anda bisa memasangnya dengan mengikuti tutorial dibawah ini.
Memasang recent post custom dengan gambar disamping judul.
Banyak macam orang-orang yang menginginkan tampilan blog mereka menjadi menarik dengan harapan mendatangkan banyak pengunjung, kepuasan pengunjung agar datang lagi, dan kepuasan diri sendiri menlihat tampilan blog yang lebih menawan.
Ada juga blogger yang menghilangkan summary pada halaman homepage blog, sampai membuat tema blog menjadi gelap agar lebih keren.
Salah satu yang dilakukan agar blog menjadi menarik adalah dengan meng-custom recent post mereka.
Berikut ini salah satu style recent post blogger yang kenny tulis.
1. Log in Blogger.com > Tema
2. Klik titik 3 untuk menampilkan opsi, lalu pilih Edit HTML
3. Cari tag </head>
4. Copy CSS dibawah ini dan pastekan tepat di atas tag </head>
<style scoped='' type='text/css'>
/* Recent post kenscripts */
#recent-post-nav-kens{border:1px solid #585858;width:100%;margin:0 auto}
#recent-post-kensc{margin:0}
.recent-post-t-kens{background:#fff;display:block;border:1px solid #ddd;margin:5px 0;padding:10px;height:79px}
.recent-post-t-kens img{background:#fff;padding:4px;float:left;height:70px;margin-right:8px;width:70px;border:1px solid #ddd}
.recent-post-t-kens h6,.recent-post-t-kens h6 a{text-decoration:none;font-size:13px!important;font-weight:700!important;margin:0;color:#111}
.recent-post-t-kens:hover{background-color:#fefefe}
.recent-post-t-kens p{font-size:12px;text-align:left;color:#555;line-height:normal;margin:5px 0}
#recent-post-load-kens{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}
#recent-feed-bloge-kens{border:1px solid #ddd;color:#bbb;font-family:Verdana;font-size:12px;text-align:center;margin:0}
#recent-feed-bloge-kens:hover{background-color:#fefefe}
#recent-feed-bloge-kens a{color:#141414!important;font-family:Tahoma!important;font-size:12px!important;font-weight:400!important;display:block;padding:5px 10px}
#recent-feed-bloge-kens span{padding:5px 10px}
#recent-feed-bloge-kens .next{float:right}
#recent-feed-bloge-kens .previous{float:left}
#recent-feed-bloge-kens .home{text-align:center}
#recent-feed-bloge-kens a:hover,#recent-feed-bloge-kens span.noactived{color:transparant!important}
</style>
5. Simpan template.
6. Kembali ke Blogger.com
7. Klik Tata letak
8. Lalu klik Tambahkan gadget/widget di sidebar blog kalian
9. Pilihlah HTML/JavaScript
10. Pastekan kode javascript dan HTML dibawah ini.
<script type='text/javascript'>
//<![CDATA[
var numfeed = 5;
var startfeed = 0;
var urlblog = "https://kenscripts.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 showrecent-post-kensc(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='recent-post-t-kens'>",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("recent-post-kensc").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("recent-feed-bloge-kens").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=showrecent-post-kensc",incluirscript(n)}function incluirscript(e){1==startfeed&&removerscript(),document.getElementById("recent-post-kensc").innerHTML="<div id='recent-post-load-kens'></div>",document.getElementById("recent-feed-bloge-kens").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="recent-post-kensc"></div>
<div id="recent-feed-bloge-kens"></div>
Lihat Juga : Memasang Recent Post Minimalis Pada Blog Blogger
11. Simpan dan done.
Kok ribet ya ken? kenapa CSSnya gak sekalian simpan di widget tata letak?
Alasan kenny tidak menyimpan CSS di widget tata letak karena kenny lebih suka seperti itu (meletakkan CSS di antara tag <head>..</head>).
Jika kalian lebih menyukai menggabungkan js, html, dan css didalam widget tata letak, kalian bisa mengcopy seluruh kode recent post seperti dibawah.
<style scoped='' type='text/css'>
/* Recent post kenscripts */
#recent-post-nav-kens{border:1px solid #585858;width:100%;margin:0 auto}
#recent-post-kensc{margin:0}
.recent-post-t-kens{background:#fff;display:block;border:1px solid #ddd;margin:5px 0;padding:10px;height:79px}
.recent-post-t-kens img{background:#fff;padding:4px;float:left;height:70px;margin-right:8px;width:70px;border:1px solid #ddd}
.recent-post-t-kens h6,.recent-post-t-kens h6 a{text-decoration:none;font-size:13px!important;font-weight:700!important;margin:0;color:#111}
.recent-post-t-kens:hover{background-color:#fefefe}
.recent-post-t-kens p{font-size:12px;text-align:left;color:#555;line-height:normal;margin:5px 0}
#recent-post-load-kens{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}
#recent-feed-bloge-kens{border:1px solid #ddd;color:#bbb;font-family:Verdana;font-size:12px;text-align:center;margin:0}
#recent-feed-bloge-kens:hover{background-color:#fefefe}
#recent-feed-bloge-kens a{color:#141414!important;font-family:Tahoma!important;font-size:12px!important;font-weight:400!important;display:block;padding:5px 10px}
#recent-feed-bloge-kens span{padding:5px 10px}
#recent-feed-bloge-kens .next{float:right}
#recent-feed-bloge-kens .previous{float:left}
#recent-feed-bloge-kens .home{text-align:center}
#recent-feed-bloge-kens a:hover,#recent-feed-bloge-kens span.noactived{color:transparant!important}
</style>
<script type='text/javascript'>
//<![CDATA[
var numfeed = 5;
var startfeed = 0;
var urlblog = "https://kenscripts.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 showrecent-post-kensc(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='recent-post-t-kens'>",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("recent-post-kensc").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("recent-feed-bloge-kens").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=showrecent-post-kensc",incluirscript(n)}function incluirscript(e){1==startfeed&&removerscript(),document.getElementById("recent-post-kensc").innerHTML="<div id='recent-post-load-kens'></div>",document.getElementById("recent-feed-bloge-kens").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="recent-post-kensc"></div>
<div id="recent-feed-bloge-kens"></div>
Catatan : Perhatikan kode Javascript.
1. var numfeed = 5; artinya jumlah artikel terbaru yang ditampilkan
2. var charac = 40; artinya jumlah huruf yang ditampilkan
Kalian boleh memilih peletakakn style CSS baik di widget tata letak ataupun antara <head>..</head>, sekian tutorial memasang recent post artikel terbaru blogger dengan gambar.
Sekian tutorial kali ini, Terima kasih telah berkunjung.