5 Widget Recent Post Keren di Blogger

Widget Recent Post di Blogspot

Widget Recent Post merupakan salah satu addon di blogspot yang perlu dipasang, karena dengan widget ini pengunjung tidak akan kebingungan pada saat menjelajah blog kita. Selain itu dengan widget ini jika kita mempelajari tentang SEO, widget recent post bisa memperkecil angka bouncing page blog kita. Dengan kata lain pengunjung tidak akan bosan dengan blog karena banyak pilihan yang bisa mereka pilih untuk menjelajahi seluruh isi blog.

Widget Recent Post merupakan widget yang sering dipakai oleh sebagian besar web. Dengan widget ini, pengunjung akan dengan mudah menemukan posting apa yang terbaru dari website kita. Terutama pada saat pengunjung masuk ke salah satu postingan di website kita dengan cara menemukannya di google search.

Memasang Widget Recent Post keren untuk blogspot

Pada postingan kali ini saya akan membagikan widget recent post dengan thumbnail atau tanpa thumbnail. Baiklah saya tidak akan panjang lebar, ini dia 5 widget recent post keren di blogspot untuk anda. :D

Untuk cara memasang widget recent post ini sangatlah mudah, seperti halnya anda memasang widget blogspot yang lainnya. Dan bagi yang belum mengetahui silakan ikuti petunjuk berikut.

Javascript

<div id="recent-post1">
      <script>
        function removeHtmlTag(t,e){if(-1!=t.indexOf("<")){for(var n=t.split("<"),i=0;i<n.length;i++)-1!=n[i].indexOf(">")&&(n[i]=n[i].substring(n[i].indexOf(">")+1,n[i].length));t=n.join("")}for(e=e<t.length-1?e:t.length-2;" "!=t.charAt(e-1)&&-1!=t.indexOf(" ",e);)e++;return(t=t.substring(0,e-1))+"..."}function createSummaryAndThumb(t){var e=document.getElementById(t),n="",i=e.getElementsByTagName("img"),t=summary_noimg;1<=i.length&&(n='<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+i[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>',t=summary_img);t=n+"<div>"+removeHtmlTag(e.innerHTML,t)+"</div>";e.innerHTML=t}function tagpostthumbs(t){document.write('<ul class="taglabel">');for(var e=0;e<numposts;e++){var n,i=t.feed.entry[e],r=i.title.$t;if(e==t.feed.entry.length)break;for(var s=0;s<i.link.length;s++)if("alternate"==i.link[s].rel){n=i.link[s].href;break}try{o=i.media$thumbnail.url}catch(t){var a=i.content.$t,m=a.indexOf("<img"),l=a.indexOf('src="',m),u=a.indexOf('"',l+5),g=a.substr(l+5,u-l-5),o=-1!=m&&-1!=l&&-1!=u&&""!=g?g:"http://2.bp.blogspot.com/-zif4lgUoNwY/VcmmKoOAbnI/AAAAAAAAK6U/whzhPe-8EDY/s1600/thumbn.png"}a=i.published.$t,m=a.substring(0,4),l=a.substring(5,7),u=a.substring(8,10),g=(g="content"in i?i.content.$t:"summary"in i?i.summary.$t:"").replace(/<\S[^>]*>/g,"");tagpostsummary&&g.length>numchars&&(g=(g=g.substring(0,numchars)).substring(0,g.lastIndexOf(" "))+"...");for(var h="No Comments",s=0;s<i.link.length;s++)"replies"==i.link[s].rel&&"text/html"==i.link[s].type&&"1 Comments"==(h=i.link[s].title)&&(h="1 Comment");document.write('<li class="clearfix">'),tagpostthumbnails&&document.write('<a href="'+n+'"><img alt="'+r+'" title="'+r+'" class="tagpost_thumb" src="'+o+'"/></a>');a='<div class="post-info">';a+='<h3><a href="'+n+'" title="'+r+'">'+r+"</a></h3>",tagpostsummary&&(a+="<p>"+g+"</p>"),a+='<div class="post-meta">'+u+"-"+["","Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"][parseInt(l,10)]+"-"+m,a+=" | "+h,a+=' | <a href="'+n+'" class="url" title="'+r+'">More »</a>',a+="</div></div>",document.write(a),document.write("</li>")}document.write("</ul>")}
</script>
<script src="https://www.onizukartz.my.id/feeds/posts/default?orderby=updated&amp;alt=json-in-script&amp;callback=tagpostthumbs"></script>
    </div>

Pada settingan feeds silakan disesuaikan dengan url Anda.

CSS

Berikut adalah 5 style widgetnya.

Style #1

Kodenya adalah sebagai berikut :

<script>
var numposts = 5; // Jumlah Post yang akan ditampilkan
var tagpostthumbnails = true; // Ganti "false" untuk tidak menampilkan
var tagpostmore = true;
var tagpostseparator = true;
var tagpostcommentnum = true; // Ganti "true" untuk menampilkan 
var tagpostdate = true; // Ganti "true" untuk menampilkan 
var tagpostsummary = false; // Ganti "false" untuk tidak menampilkan 
var numchars = 50; // Jumlah karakter deskripsi yang di tampilkan
</script>

/*Style 1*/
#recent-post1 .taglabel li:hover img{animation:rotateImage 4s linear infinite}
@keyframes rotateImage {
from{transform:rotate(0deg)}
to{transform:rotate(360deg)}
}
img.tagpost_thumb{height:50px;width:50px;padding:2px;transition:all .6s;float:right;margin:-4px -35px 0 0;border:4px solid #FCD6CB;border-radius:100%}
img.tagpost_thumb:hover{border-color:#aaa}
ul.taglabel{width:95%;padding:0;margin:0;border:2px solid #FCD6CB;counter-reset:countposts;list-style-type:none;background:#fff}
ul.taglabel li:before{content:counter(countposts, decimal);counter-increment:countposts;z-index:2;position:absolute;left:-20px;font-size:16px;color:#616662;background:#FCD6CB;padding:5px 14px;border-radius:100%;margin-top:0}
ul.taglabel li{list-style:none;position:relative;padding:10px 0 10px 25px;min-height:50px;list-style-type:none;margin:0 5px;border-top:2px solid #FCD6CB;display:flex;flex-direction:row-reverse;justify-content:space-between;align-items:center}
ul.taglabel li:first-child{border:none}
.post-info h3,#recent-post1 .post-info p{font-weight:700;margin-bottom: 5px;line-height:1.15em;text-align:left}

Style #2

Kodenya adalah sebagai berikut :

<script>
var numposts = 5; // Jumlah Post yang akan ditampilkan
var tagpostthumbnails = true; // Ganti "false" untuk tidak menampilkan
var tagpostmore = true;
var tagpostseparator = true;
var tagpostcommentnum = true; // Ganti "true" untuk menampilkan 
var tagpostdate = true; // Ganti "true" untuk menampilkan 
var tagpostsummary = true; // Ganti "false" untuk tidak menampilkan 
var numchars = 50; // Jumlah karakter deskripsi yang di tampilkan
</script>

/*Style 2*/
img.tagpost_thumb{border:3px solid #fff;border-radius:8px;outline:3px solid #69B7E2;transition:all .6s;width:60px;height:60px}
img.tagpost_thumb:hover{transition:all .6s;opacity:.7}
ul.taglabel{margin:5px 0 5px 5px;padding:0;font-size:.9em;counter-reset:countposts;list-style-type:none}
ul.taglabel li:before{content:counter(countposts, decimal);counter-increment:countposts;z-index:2;position:absolute;left:-15px;top:8px;font-size:13px;font-weight:700;color:#fff;background:#69B7E2;padding:3px 12px;border-radius:100%}
ul.taglabel li{display:flex;gap:10px;list-style:none;position:relative;padding:5px 0;min-height:65px;list-style-type:none;margin-bottom:5px;border-radius:7px}
ul.taglabel li:hover{background:#69b7e21c;transition:all .3s}
.post-info a{color:#69B7E2;font-weight:700}
.post-info h3,#recent-post2 .post-info p{margin-bottom: 5px;line-height:1.15em;text-align:left}

Style #3

Kodenya adalah sebagai berikut:

<script>
var numposts = 5; // Jumlah Post yang akan ditampilkan
var tagpostthumbnails = true; // Ganti "false" untuk tidak menampilkan
var tagpostmore = true;
var tagpostseparator = true;
var tagpostcommentnum = true; // Ganti "true" untuk menampilkan 
var tagpostdate = true; // Ganti "true" untuk menampilkan 
var tagpostsummary = true; // Ganti "false" untuk tidak menampilkan 
var numchars = 50; // Jumlah karakter deskripsi yang di tampilkan
</script>

/*Style 3*/
#recent-post3 img.tagpost_thumb{width:50px;height:50px;float:right;margin:5px -5px 0 10px;border-radius:100%;padding:3px;background:#fff}
#recent-post3 .taglabel li:hover img{animation:rotateImage 4s linear infinite}
@keyframes rotateImage {
from{transform:rotate(0deg)}
to{transform:rotate(360deg)}
}
ul.taglabel{min-height:55px;margin:5px 0;padding:0}
ul.taglabel li{padding:15px 12px;min-height:50px;list-style-type:none;margin:0 5px 0 0;color:#777}
.post-info h3 a{font-weight:700;color:#212121}
.post-info h3,#recent-post3 .post-info p{margin-bottom:5px;line-height:1.15em;text-align:left}
ul.taglabel li:nth-child(1n+0){background:#F49A9A;width:95%}
ul.taglabel li:nth-child(2n+0){background:#FCD092;width:90%}
ul.taglabel li:nth-child(3n+0){background:#FFF59E;width:85%}
ul.taglabel li:nth-child(4n+0){background:#E1EFA0;width:80%}
ul.taglabel li:nth-child(5n+0){background:#B1DAEF;width:75%}

Style #4

Kodenya adalah sebagai berikut:

<script>
var numposts = 5; // Jumlah Post yang akan ditampilkan
var tagpostthumbnails = false; // Ganti "false" untuk tidak menampilkan
var tagpostmore = true;
var tagpostseparator = true;
var tagpostcommentnum = true; // Ganti "true" untuk menampilkan 
var tagpostdate = true; // Ganti "true" untuk menampilkan 
var tagpostsummary = true; // Ganti "false" untuk tidak menampilkan 
var numchars = 50; // Jumlah karakter deskripsi yang di tampilkan
</script>

/*Style 4*/
ul.taglabel{counter-reset:countposts;list-style-type:none;width:100%;min-height:70px;margin:5px 0;padding:0}
ul.taglabel li:before{content:counter(countposts, decimal);counter-increment:countposts;z-index:2;position:absolute;left:-50px;font-size:16px;color:#4D4D4D;background:#F7F7F7;padding:9px 14px;border:1px solid #efefef}
ul.taglabel li{position:relative;padding:5px 0;min-height:65px;list-style-type:none;margin:0 10px 5px 55px}
.post-info h3{font-weight:700}
.post-info h3,#recent-post4 .post-info p{margin-bottom:5px;line-height:1.15em;text-align:left}
.post-meta{border-top:4px solid #AC707A;margin-top:5px;padding-top:5px}

Style #5

Kodenya adalah sebagai berikut:

<script>
var numposts = 5; // Jumlah Post yang akan ditampilkan
var tagpostthumbnails = false; // Ganti "false" untuk tidak menampilkan
var tagpostmore = true;
var tagpostseparator = true;
var tagpostcommentnum = true; // Ganti "true" untuk menampilkan 
var tagpostdate = true; // Ganti "true" untuk menampilkan 
var tagpostsummary = true; // Ganti "false" untuk tidak menampilkan 
var numchars = 70; // Jumlah karakter deskripsi yang di tampilkan
</script>

/*Style 5*/
ul.taglabel{counter-reset:countposts;list-style-type:none;margin:0;display:flex;flex-wrap:wrap;justify-content:space-between}
ul.taglabel li:before{content:counter(countposts, decimal);counter-increment:countposts;z-index:2;left:2px;top:-15px;position:relative;font-size:20px;font-weight:700;color:#fff;background:#69B7E2;margin:15px 5px 0 -6px;padding:3px 10px;border-radius:100%;float:left}
ul.taglabel li{padding:5px 0;list-style:none}
.post-info{margin-bottom:5px;border-left:1px solid #69B7E2;color:#777;padding:0 5px 0 25px;margin-left:11px}
.post-info h3{font-weight:700}
.post-info h3,#recent-post5 .post-info p{line-height:1.15em;margin-bottom:5px}

Demikian tutorial cara memasang widget recent pos di blogspot. Semoga bermanfaat. Terimakasih telah membaca tutorial ini. Wassalam.

Widget Recent Post di Blogspot