Memasang Recent Post Widget Blogger

Membuat widget recent post di samping blog. Recent post atau post terbaru biasa diterapkan di sidebar blog atau bawah jika tampilan mobile.
Membuat recent post artikel blog

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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWIAJNee77JpyP1qfjCMm4KrH_yTE6K2PE622rK_C7_ufruEWwNEuJTtEe_zwQqf7kpi3Pw21u1DYljPjFS6O4N5kgZiFR8o6CvEIjyuYnmmDHGeMks9zVT0af3y_kqdcuw4uoX6yQRr5P/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:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1AADiZ6JBl6BV-4XhxQSsZRzeJGUD5cACJ-i8maWUFn7xb_FOn7Ck66YVaemL2LCYy8738dRUaQYv808DBCM_4bUrZ27QOHBZtb3DL_H3wWhvaUdkkCMMJPmjlXZfUtM7v9qTJiFEhK6v/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWIAJNee77JpyP1qfjCMm4KrH_yTE6K2PE622rK_C7_ufruEWwNEuJTtEe_zwQqf7kpi3Pw21u1DYljPjFS6O4N5kgZiFR8o6CvEIjyuYnmmDHGeMks9zVT0af3y_kqdcuw4uoX6yQRr5P/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:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1AADiZ6JBl6BV-4XhxQSsZRzeJGUD5cACJ-i8maWUFn7xb_FOn7Ck66YVaemL2LCYy8738dRUaQYv808DBCM_4bUrZ27QOHBZtb3DL_H3wWhvaUdkkCMMJPmjlXZfUtM7v9qTJiFEhK6v/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.

Kenny is my name, someone who is quite calm with a charming smile. Don't bother me if you don't want to see the devil. Don't act like you're innocent.

1 komentar

  1. nice post
1. Dilarang komentar spam
2. Dilarang berkomentar dengan link aktif
3. Dilarang menghina agama, antar manusia, suku, bangsa, dan budaya
4. Dilarang komentar diluar pembahasan blog
5. Berkomentarlah dengan bijak
© Kenscripts. All rights reserved. Developed by Jago Desain