6 Best Recent Post Widgets Design For Blog Blogger 2017

Advertisemen

Recent Post Widget adalah sebuah widget yang berfungsi menampilkan koleksi artikel yang baru-baru saja diterbitkan, Recent post ini terletak di bagian sidebar blog Anda.

kita dapat menambahkan Widget Recent Post Untuk Blogger ini dalam beragam jenis yang berbeda, seperti Recent Post by thumbnail, galeri, dan tampilan sederhana serta banyak lagi yang lainnya.

Recent Post ini memiliki segudang manfaat untuk blog Anda, terutama dalam membantu para pengunjung setia blog anda. Mereka bisa dengan mudah menemukan artikel yang baru-baru di posting pada blog Anda.

Selain memudahkan para pengunjung dalam menemukan posting terbaru, widget ini juga akan membantu Anda dalam mengurangi bounce rate, meningkatkan page views blog Anda dan para pengunjung akan senantiasa banyak menghabiskan waktu di blog Anda. Seperti yang kita ketahui, bounce rate merupakan faktor paling penting dalam dunia SEO.

Widget Recent Post tidak tersedia secara default di blogger, Anda perlu menambahkan sedikit sentuhan coding. Tetapi saya yakin sebagian blogger ada yang tidak mengetahui bahasa programan seperti CSS, HTML, dan Java Script. kabar baiknya anda tidak perlu memikirkan bahasa programan ini untuk dapat memasang widget recent post.

Nah dalam posting ini, saya akan berikan Koleksi Widget Recent Post Terbaik menurut saya dan Anda tidak perlu repot coding.

Berikut 6 Best Recent Post Widgets Design For Blogger Blogspot untuk Anda.

1. Recent Post dengan Halaman Navigasi

Desain widget ini sangat indah dan menakjubkan, ini akan menampilkan posting terbaru lengkap dengan gambar thumbnail di sidebar blog Anda.

Saya sarankan Anda untuk segera menginstal widget ini pada blog blogger Anda karena ini memungkinkan pengunjung untuk melihat berbagai posting terbaru dibantu dengan navigasi halaman dan tentu saja widget ini responsif dan ramah seo.

Untuk menginstalnya silahkan pergi ke blogger>>tata letak>>tambah gadget>>Html/Java script>>masukan kode dibawah ini.

<script type='text/javascript'>
var numfeed = 4;
var startfeed = 0;
var urlblog = "http://www.thebloggerguide.com/";
var charac = 50;
var urlprevious, urlnext;

function cyberghost(ghost, banget) {
  var showfeed = ghost.split("<");
  for (var i = 0; i < showfeed.length; i++) {
    if (showfeed[i].indexOf(">") != -1) {
      showfeed[i] = showfeed[i].substring(showfeed[i].indexOf(">") + 1, showfeed[i].length);
    }
  }
  showfeed = showfeed.join("");
  showfeed = showfeed.substring(0, banget - 1);
  return showfeed;
}

function showterbaru(json) {
  var entry, posttitle, posturl, postimg, postcontent;
  var showblogfeed = "";
  urlprevious = "";
  urlnext = "";
  for (var k = 0; k < json.feed.link.length; k++) {
    if (json.feed.link[k].rel == 'previous') {
      urlprevious = json.feed.link[k].href;
    }
    if (json.feed.link[k].rel == 'next') {
      urlnext = json.feed.link[k].href;
    }
  }
  for (var i = 0; i < numfeed; i++) {
    if (i == json.feed.entry.length) {
      break;
    }
    entry = json.feed.entry[i];
    posttitle = entry.title.$t;
    for (var k = 0; k < entry.link.length; k++) {
      if (entry.link[k].rel == 'alternate') {
        posturl = entry.link[k].href;
        break;
      }
    }
    if ("content" in entry) {
      postcontent = entry.content.$t;
    } else if ("summary" in entry) {
      postcontent = entry.summary.$t;
    } else {
      postcontent = "";
    }
    if ("media$thumbnail" in entry) {
      postimg = entry.media$thumbnail.url;
    } else {
      postimg = "http://1.bp.blogspot.com/-eiX9aalicz8/VWEORfDN71I/AAAAAAAAHdg/vfHyEfYKBh0/s1600/no_image.gif";
    }
    showblogfeed += "<div class='cg-elemen'>";
    showblogfeed += "<a =href='" + posturl + "' target='_blank'><img src='" + postimg + "' /></a>";
    showblogfeed += "<h6><a href='" + posturl + "'>" + posttitle + "</a></h6>";
    showblogfeed += "<p>" + cyberghost(postcontent, charac) + "...</p>";
    showblogfeed += "</div>";
  }
  document.getElementById("terbaru").innerHTML = showblogfeed;
  showblogfeed = "";
  if (urlprevious) {
    showblogfeed += "<a href='javascript:navigasifeed(-1);' class='previous'>&#9668; Previous</a>";
  } else {
    showblogfeed += "<span class='noactived previous'>&#9668; Previous</span>";
  }
  if (urlnext) {
    showblogfeed += "<a href='javascript:navigasifeed(1);' class='next'>Next &#9658;</a>";
  } else {
    showblogfeed += "<span class='noactived next'>Next &#9658;</span>";
  }
  showblogfeed += "<a href='javascript:navigasifeed(0);' class='home'>Home</a>";
  document.getElementById("cg-navigasifeed").innerHTML = showblogfeed;
}

function navigasifeed(url) {
  var p, parameter;
  if (url == -1) {
    p = urlprevious.indexOf("?");
    parameter = urlprevious.substring(p);
  } else if (url == 1) {
    p = urlnext.indexOf("?");
    parameter = urlnext.substring(p);
  } else {
    parameter = "?start-index=1&max-results=" + numfeed + "&orderby=published&alt=json-in-script"
  }
  parameter += "&callback=showterbaru";
  incluirscript(parameter);
}

function incluirscript(parameter) {
  if (startfeed == 1) {
    removerscript();
  }
  document.getElementById("terbaru").innerHTML = "<div id='cg-loading'></div>";
  document.getElementById("cg-navigasifeed").innerHTML = "";
  var archievefeed = urlblog + "/feeds/posts/default" + parameter;
  var terbaru = document.createElement('script');
  terbaru.setAttribute('type', 'text/javascript');
  terbaru.setAttribute('src', archievefeed);
  terbaru.setAttribute('id', 'MASLABEL');
  document.getElementsByTagName('head')[0].appendChild(terbaru);
  startfeed = 1;
}

function removerscript() {
  var elemen = document.getElementById("MASLABEL");
  var parent = elemen.parentNode;
  parent.removeChild(elemen);
}
onload = function() {
  navigasifeed(0);
}
</script>
<style>
/*Recent Post Navigation*/
a,
a:visited {
  color: #555;
  outline: none;
  text-decoration: none;
}

a:hover,
a:focus,
a:visited:hover {
  color: #22a1c4;
  text-decoration: none;
}

.terbaru-container {
  background: #fff;
  width: 320px;
  margin: 20px auto;
  padding: 15px;
  border: 1px solid #ccc;
}

#cg-terbaru {
  border: 1px solid #585858;
  width: 100%;
  margin: 0 auto;
}

#terbaru {
  margin: 0px;
}

.cg-elemen {
  margin: 5px 0;
  padding: 5px;
  height: 79px;
  background: #FFF url("http://smruthycollege.com/images/shadow2.png") no-repeat scroll center bottom;
overflow: hidden;
  padding-bottom: 20px;
}

.cg-elemen img {
  padding: 0;
  float: left;
  height: 70px;
  margin-right: 15px;
  width: 70px;
}

.cg-elemen h6,
.cg-elemen h6 a {
  font-size: 14px!important;
  font-weight: 500;
  margin: 0;
  color: #222;
  font-family:'Oswald';
  line-height: 18px;
  text-transform: uppercase;
  text-aligaln:'center';
}

.cg-elemen p {
  font-size: 12px;
  font-family: 'Oswald';
  text-align: left;
  color: #555;
  line-height: normal;
  margin: 5px 0;
}

#cg-loading {
  color: #888;
  font-family: inherit;
  font-size: 100px;
  letter-spacing: -10px;
  text-align: center;
  text-shadow: -5px 0 1px #444;
  background: #fff url(http://4.bp.blogspot.com/-jSUS8v5kwpQ/U8Z_6Ufr-PI/AAAAAAAAEYY/o4cQPKvt8vQ/s1600/loading.gif) no-repeat 50% 50%;
  height: 470px;
}

#cg-navigasifeed {
  color: #bbb;
  font-family: Oswald;
  font-size: 12px;
  text-align: center;
  margin: 0px;
}

#cg-navigasifeed a {
  color: #141414!important;
  font-family: inherit!important;
  font-size: 12px!important;
  font-weight: 400!important;
  display: block;
  padding: 5px 10px;
}

#cg-navigasifeed span {
  padding: 5px 10px;
}

#cg-navigasifeed .next {
  float: right;
}

#cg-navigasifeed .previous {
  float: left;
}

#cg-navigasifeed .home {
  text-align: center;
}

#cg-navigasifeed a:hover,
#cg-navigasifeed span.noactived {
  color: transparant!important;
}
@media screen and (max-width:700px) {
    .terbaru-container, #terbaru, #cg-navigasifeed {
        width:auto;
    }
}


@media screen and (max-width:300px) {
    .cg-elemen img {
        display:none;
    }
}


Lanjut, Sekarang Tinggal Memasukan Javascriptnya.
Cari 

</style>
<div class="terbaru-container">
    <div id="terbaru"></div>
    <div id="cg-navigasifeed"></div>
  </div>

2. Slider Recent Post

Widget ini sangat indah dan stylish, berfungsi meningkatkan tampilan blog Anda. Widget ini akan mengumpulkan data posting terbaru dalam tampilan slide yang akan menarik perhatian para pengunjung blog Anda dan meningkatkan tampilan halaman secara drastis.

Untuk hasil yang lebih baik, saya sarankan Anda menginstal widget ini di bawah header blog. Untuk menginstalnya silahkan pergi ke blogger>>tata letak>>tambah gadget>>Html/Java script>>masukan kode dibawah ini.

<script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script>

<script type="text/javascript" src="https://arlina-design.googlecode.com/svn/slider-post.js"></script>
<div id="featuredpost"></div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
FeaturedPost({
blogURL:"http://www.thebloggerguide.com/",
MaxPost:8,
idcontaint:"#featuredpost",
ImageSize:500,
interval:10000,
autoplay:true,
tagName:false
});
});
//]]>
</script>


<style>
/* CSS Slider Recent Post */
#slides *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
#slides ul,#slides li{padding:0;margin:0;list-style:none;position:relative}
#slides ul{height:320px}
#slides li{width:50%;height:100%;position:absolute;display:none}
#slides li:nth-child(1), #slides li:nth-child(2), #slides li:nth-child(3), #slides li:nth-child(4), #slides li:nth-child(5){display:block}
#slides li:nth-child(1){left:0;top:0}
#slides li:nth-child(2){left:50%;width:25%;height:50%}
#slides li:nth-child(3){left:75%;width:25%;height:50%}
#slides li:nth-child(4){left:50%;top:50%;width:25%;height:50%}
#slides li:nth-child(5){left:75%;top:50%;width:25%;height:50%}
#slides li:nth-child(1) h4 {overflow:hidden;font-size:25px;bottom:0;color:#fafafa;width:100%;
padding:10px 10px 10px 90px;text-align:left;text-transform:uppercase;background:rgba(0,0,0,0.3);
height:90px;font-family:'Oswald';text-shadow:2px 2px 0 rgba(0,0,0,0.2);line-height:32px;left:0;}
#slides li:nth-child(1) .label_text {font-size:30px;display:block;bottom:10px;left:10px;
padding:0;font-family:'Oswald';box-shadow:5px 3px 0 rgba(0,0,0,0.2);}
#slides li:nth-child(1) span.dd {display:block;font-size:30px;padding:12px 15px;
background:#ff6553;margin:0;}
#slides li:nth-child(1) span.dm {display:block;font-size:14px;background:#333;color:#fff;
padding:5px 21px;text-transform:uppercase;margin:0;}
#slides li:nth-child(1) span.dy, #slides li:nth-child(1) span.autname{display:none;}
#slides a{display:block;width:100%;height:100%;overflow:hidden}
#slides img{display:block;width:100%;height:auto;border:0;padding:0;background-color:#333;-moz-transform:scale(1.0) rotate(0);-webkit-transform:scale(1.0) rotate(0);-ms-transform:scale(1.0) rotate(0);transform:scale(1.0) rotate(0);transition:all 0.6s linear;}
#slides li a:hover img {-moz-transform:scale(1.1) rotate(1deg);-webkit-transform:scale(1.1) rotate(1deg);-ms-transform:scale(1.1) rotate(1deg);transform:scale(1.1) rotate(1deg);transition:all 0.3s linear;}
#slides .overlayx{width:100%;height:100%;position:absolute;z-index:2;background-image:url(http://2.bp.blogspot.com/-0haO2Mfkjjk/VDgZww2tfEI/AAAAAAAAHAk/zhu3INYSkHA/s1600/fade.png);background-position:50% 40%;background-repeat:repeat-x;}
#slides h4{position:absolute;bottom:40px;margin:0;font-size:13px;font-family:'Oswald';
left:10px;padding:5px 10px;color:#f9f9f9;z-index:3;line-height:20px;font-weight:normal;
background:rgba(41,41,41,0.7);text-align:left;text-transform:uppercase;margin-right:10px;}
#slides .label_text{font-size:12px;color:#fff;bottom:10px;z-index:3;left:10px;
position:absolute;background:rgba(255,101,83,0.8);padding:3px 6px;font-family:'Oswald';
text-transform:uppercase;}
#slides li:nth-child(2) .autname,#slides li:nth-child(3) .autname,#slides li:nth-child(4) .autname,#slides li:nth-child(5) .autname{display:none;}
#slides .overlayx,#slides li{transition:all .4s ease-in-out}
#slides li:nth-child(1) .overlayx{display:none;}
#slides li:hover .overlayx{opacity:0.1}

@media only screen and (max-width:800px){
#slides li:nth-child(1) h4 {font-size:18px;line-height:24px;}}

@media only screen and (max-width:600px){
  #slides ul{height:600px}
  #slides li:nth-child(1){width:100%;height:50%}
  #slides li:nth-child(2){top:50%;height:25%;left:0;width:50%}
  #slides li:nth-child(3){left:50%;top:50%;width:50%;height:25%}
  #slides li:nth-child(4){left:0;top:75%;height:25%;width:100%}
  #slides li:nth-child(5){display:none;}}

@media only screen and (max-width:480px){
#slides li:nth-child(1) h4 {font-size:13px;line-height:16px;}}
</style>
<div id="wrapper">
<div id="featuredpost"></div>
</div>

3. Recent Post Gallery

Apakah Anda ingin membuat sebuah galeri di blog Anda? Instal widget ini dan blog Anda akan memiliki sebuah galeri postingan terbaru yang menawan dengan menarik efek CSS.

Dengan bantuan ini kamu bisa mendapatkan perhatian para pengunjung dan blog Anda akan mendapatkan banyak pageviews setiap harinya.

Untuk menginstalnya silahkan pergi ke blogger>>tata letak>>tambah gadget>>Html/Java script>>masukan kode dibawah ini.

<style>
/* CSS Recent Post Gallery */
.recent-gallery {padding:0;clear:both;}
.recent-gallery:after {content:"";display:table;clear:both;}
.recent-gallery .gallerytem{display:inline-block;position:relative;margin:6px 0;overflow:hidden;}
.recent-gallery .gallerytem a{position:relative;float:left;margin:0 6px;text-decoration:none}
.recent-gallery .gallerytem .ptitle{background:rgba(0,0,0,.7);display:block;clear:left;font-size:10px;line-height:1.3em;position:absolute;text-align:left;bottom:3px;left:3px;right:3px;top:3px;color:#fff;padding:5px;word-wrap:break-word;overflow:hidden;visibility:hidden;opacity:0;backface-visibility:hidden;transition:all .2s}
.recent-gallery .gallerytem:hover .ptitle{visibility:visible;opacity:1}
.recent-gallery a img{background:#fdfdfd;float:left;padding:2px;border:1px solid #e3e3e3;transition:all .3s}
.recent-gallery a:hover img {border-color:#bbb;}
</style>
<script type='text/javascript'>
//<![CDATA[
// Recent Post Gallery
function arlinagrid(a){for(var t=a.feed.entry||[],e=['<div class="recent-gallery">'],i=0;i<t.length;++i){for(var l=t[i],r=l.title.$t,n=l.media$thumbnail?l.media$thumbnail.url:"http://2.bp.blogspot.com/-4fCf53FqYKM/Vccsy7apoZI/AAAAAAAAK4o/XJkv3RkC0pw/s1600/default%2Bimage.png",s=n.replace("s72-c","s"+arlina_thumbs+"-c"),h=l.link||[],c=0;c<h.length&&"alternate"!=h[c].rel;++c);var d=h[c].href,m='<img src="'+s+'" width="'+arlina_thumbs+'" height="'+arlina_thumbs+'"/>',p=arlina_title?'<span class="ptitle">'+r+"</span>":"",g='<a href="'+d+'" target="_blank" title="'+r+'">'+m+p+"</a>";e.push('<div class="gallerytem">',g,"</div>")}e.push("</div>"),document.write(e.join(""))}
//]]>
</script>
<script>
var arlina_thumbs = 72; 
var arlina_title = true; 
</script>
<script src="/feeds/posts/summary?max-results=9&amp;alt=json-in-script&amp;callback=arlinagrid"></script>

4. Recent Post tanpa Thumbnail

Widget sebelumnya semua menampilkan gambar thumbnail yang akan membutuhkan waktu ketika membuka blog Anda. Jika Anda tidak ingin membuat blog kesayangan Anda terlalu berat karena widget Recent Post dengan gambar, install widget yang satu ini. Ini sebuah widget sederhana yang hanya menampilkan judul artikel terbaru saja.

Untuk menginstalnya silahkan pergi ke blogger>>tata letak>>tambah gadget>>Html/Java script>>masukan kode dibawah ini.

<style type='text/css'>
img.recent_thumb {width: 90px;height: 70px;float: left;
margin-right: 10px;}.recent_posts_with_thumbs {float: left;width: 100%;min-height: 70px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}
ul.recent_posts_with_thumbs li {padding-bottom:5px;padding-top:5px;min-height:65px;} .recent_posts_with_thumbs a {text-decoration:none;} .recent_posts_with_thumbs strong {font-size:10px;}</style><script style='text/javascript' src='https://googledrive.com/host/0BzPgmXeCwsMRSGw0WUl4blJ3NmM'></script><script style='text/javascript'>
var numposts = 5;
var showpostthumbnails = false;
var displaymore = true;
var displayseparator = false;
var showcommentnum = false;
var showpostdate = true;
var showpostsummary = true;
var numchars = 100;</script>
<script src='/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs'></script>

5. Recent Post by Label

Jika anda ingin menampilkan label tertentu dalam sidebar blog Anda, Instal saja widget ini. Untuk menginstalnya silahkan pergi ke blogger>>tata letak>>tambah gadget>>Html/Java script>>masukan kode dibawah ini.

<style>
/*Recent Post By tag*/
img.rct-thumb{float:left;margin-right:10px;height:72px;width:72px;}
.recent-by-tag{width:100%;margin:0;padding:0}
ul.recent-by-tag li{padding:10px 0;margin-bottom:0;border-bottom:1px solid #ddd}
.recent-by-tag li{font-size:13px;list-style:none;padding-left:0;margin:0;padding:0;overflow:hidden}
.recent-by-tag a{font-family:'Oswald',sans-serif;font-size:16px;font-weight:normal;margin:0;}
.recent-by-tag strong{padding-left:0}
span.showdates{font-size:16px;margin:10px 0 0}
</style>
<script type='text/javascript'>
var numposts = 5;
var showpostthumbnails = true;
var showpostdate = true;</script>
<script type='text/javascript'>
//<![CDATA[
// Recent Post By Tag
// Recent Post By Tag For Blogger by Kang Mousir
// http://gplus.to/mousir - http://kang-mousir.blogspot.com
function rcentbytag(e){document.write('<ul class="recent-by-tag">');for(var t=0;t<numposts;t++){var n=e.feed.entry[t];var r=n.title.$t;var i;if(t==e.feed.entry.length)break;for(var o=0;o<n.link.length;o++){if(n.link[o].rel=="replies"&&n.link[o].type=="text/html"){var u=n.link[o].title;var f=n.link[o].href}if(n.link[o].rel=="alternate"){i=n.link[o].href;break}}var l;try{l=n.media$thumbnail.url}catch(h){s=n.content.$t;a=s.indexOf("<img");b=s.indexOf('src="',a);c=s.indexOf('"',b+5);d=s.substr(b+5,c-b-5);if(a!=-1&&b!=-1&&c!=-1&&d!=""){l=d}else l="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgd3SeQtfsX_1lQuof1UyMdFMgJJ2kEYkO1FQ_YdkwtPnazEGn81o2Uv-fhGH-A7O14GDCnE8nYOjSXzS6ydo0bQOcXbxNz-uLPOCnsfvNJHqz9cmHPzhGcjk84ocDBd68TrGlV4YcsmYo/s70-c/KM+Icon.png"}var p=n.published.$t;var v=p.substring(0,4);var m=p.substring(5,7);var g=p.substring(8,10);var y=new Array;y[1]="Januari";y[2]="Februari";y[3]="Maret";y[4]="April";y[5]="Mei";y[6]="Juni";y[7]="Juli";y[8]="Agustus";y[9]="September";y[10]="Oktober";y[11]="November";y[12]="Desember";document.write('<li class="clear">');if(showpostthumbnails==true)document.write('<a href="'+i+'" target ="_blank" title="'+r+'"><img class="rct-thumb" alt="'+r+'" src="'+l+'"/></a>');document.write('<strong><a href="'+i+'" target ="_blank" title="'+r+'" rel="nofollow">'+r+'</a></strong>');document.write('<br>');var x="";var T=0;if(showpostdate==true){x='<span class="showdates">'+x+g+" "+y[parseInt(m,10)]+" "+v+"</span>";T=1}document.write(x);document.write("</li>");if(t!=numposts-1)document.write("")}document.write("</ul>")}
//]]>
</script>

<script>
document.write("<script src=\"http://www.thebloggerguide.com/feeds/posts/default/-/Widget?orderby=updated&alt=json-in-script&callback=rcentbytag\"><\/script>");
</script>

6. Recent Post Warna-warni

Jika Anda ingin menambahkan widget recent post warna-warni di blog Anda, instal saja yang satu ini. Widget ini sungguh elegan yang akan menunjukkan kumpulan artikel terbaru di sidebar blog Anda dengan lima warna indah berbeda membalutinya yang akan menarik perhatian pengunjung blog Anda.

Untuk menginstalnya silahkan pergi ke blogger>>tata letak>>tambah gadget>>Html/Java script>>masukan kode dibawah ini.

<style scoped="scoped">
#ptb-repost {
font:normal normal 11px/normal Arial;
color:#333;
margin:0 auto;
padding:0;
min-height:100px;
background:transparent url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4gXE7TN6e61nMoISqN_6yIF50Q_irJuJWbRvOhdHDPlDEaSSp-qiRq9Cgn_28IUeo2ot8exXZ91lCi9SgKZRHlspDmKXD5k4H-Z2vtd_DJBuvfIbscVhbFD40kNEyYE4lV_EITm_G5Ds/s1600/loading.gif') no-repeat 50% 50%;
}
#ptb-repost li {
list-style:none;
margin:0;
padding:8px;
background-color:white;
border-bottom:1px solid #ddd;
}
#ptb-repost li a img:hover {
-webkit-transform: scale(1.1, 1.1);
-moz-transform: scale(1.1, 1.1);
-ms-transform: scale(1.1, 1.1);
-o-transform: scale(1.1, 1.1);
transform: scale(1.1, 1.1);opacity: 0.5;
}
#ptb-repost li a img {
float:left;
margin:0 10px 0 0;
padding:0;
border:none;
background:none;
outline:none;
}
#ptb-repost li a.title {
font:normal normal 12px/normal Oswald;
display:block;
text-decoration:none;
color:#fdfdfd;
}
#ptb-repost li a.title:hover {
text-decoration:none;
color:#ffffff;
}
#ptb-repost li:nth-child(1) {background-color:#E11E28;margin-right:0%}
#ptb-repost li:nth-child(2) {background-color:#FD3C03;margin-right:0%}
#ptb-repost li:nth-child(3) {background-color:#FECB09;margin-right:0%}
#ptb-repost li:nth-child(4) {background-color:#6EBE27;margin-right:0%}
#ptb-repost li:nth-child(5) {background-color:#149A48;margin-right:0%}
#ptb-repost li:nth-child(6) {background-color:#5BBFF1;margin-right:0%}
#ptb-repost ul li:nth-child(7) {background-color:#61469C;margin-right:0%}
#ptb-repost ul li:nth-child(8) {background-color:#863E86;margin-right:0%}
#ptb-repost li:nth-child(9) {background-color:#863E62;margin-right:0%}
#ptb-repost li:nth-child(10) {background-color:#815540;margin-right:00%}
</style>
<ul id="ptb-repost"></ul>
<script>
//<![CDATA[
var rp_homePage = "http://www.thebloggerguide.com/",
    rp_numPosts = 5,
    rp_thumbWidth = 50,
    rp_numChars = 80,
    rp_sortByLabel = false,
    rp_noImage = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivLIlzKuIMJupiGksH0m_Q4R-FuNmAgssrc7Pxl6JCDakt7ARFmWuQcCMASGRC-AXbHLmZdTUlDkzgsb62Zcc4y8syeM09CqhTaXbDNwgIfSOauqgOUEBJZ3W9PHs77o-IR7baHeeK8fY/s1600/minismallest-img.png",
    rp_newTabLink = false,
    rp_loadTimer = "onload";
//]]>
</script>
<script src='https://mas-aldi.googlecode.com/svn/trunk/js/rp-warna-warni.js' type='text/JavaScript'></script>

Pengaturan

URL blog = Isi dengan URL blog Anda
Var numPosts = isi dengan jumlah artikel yang ingin Anda tampilkan
Var showpostthumbnail = pilih true jika Anda ingin menampilkan gambar thumbnail nya dan pilih false untuk menghilangkannya.
Var showpostdate = pilih true jika Anda ingin menampilkan tanggal dan false untuk menghilangkannya
Blogger Tips! Harap ganti label sesuai yang dikehendaki, ketik menggunakan lebih dari dua kata beri tanda % (hanya untuk widget no 5)

Nah itu dia ke-6 widget recent post terbaik menurut saya, Saya berharap semua widget di atas akan bekerja degan baik di blog Anda. Semua widget ini telah saya uji yang berartibsemuanya bekerja dengan baik di blog saya.

Baca juga:

Cara Install Widget Custom Statistik Untuk Blogger
Cara Memperbaiki Tombol Share Button Error Di Template Evo Magz dan Fastest Magz, Panduan Lengkap
Cara Daftar dan Pasang Kode Iklan Poptm di Blog - Panduan Lengkap 2017

Namun, jika Anda menghadapi masalah tentang widget recent post di atas jangan sungkan memberikan komentar Anda dibawah kotakkomentar. Semoga bermanfaat ! (RA/Sn)