Add Recent Post Widget

Assalamualaikum and hi everyone. I will make a tutorial on how to add recent post widget for your blog. If you are wondering how the widget look like, take a look at the screenshot above.
This widget will show your blog newest to the oldest post.Okay, let's get started.

1. Firstly, Log in your blogger account.
2. Go to Dashboard > Layout > Add  a Gadget > HTML/JavaScript

Copy below code and paste it on the HTML/Javascipt content.
If you wish to customize it first, paste it here first.Next, paste the edited code to the HTML/Javascript

<script type='text/javascript'>
var numfeed = 4;
var startfeed = 0;
var urlblog = "https://kawaiilady.blogspot.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*/

.terbaru-container {
  background: #EAE1BB;
  width: 220px;
  padding: 5px;
}

#cg-terbaru {
  border: 1px solid #DDDDDD;
  width: 200px;
  margin: 0 auto;
}

#terbaru {
  margin: 0px;
}

.cg-elemen {
  margin-bottom: 5px;
  padding: 6px;
  height: 75px;
  background: #FFF5C6;
  border:2px solid #E5D89E;
  overflow: hidden;
  padding-bottom: 5px;
}

.cg-elemen img {
  padding: 0;
  float: left;
  height: 50px;
  margin-right: 10px;
  width: 50px;
  border:1px solid #888888;
}

.cg-elemen h6,
.cg-elemen h6 a {
  font-size: 11px!important;
  font-weight: bold;
  margin: 0;
  text-decoration:none;
  text-shadow:0px 0px #fff;
  color: #A77676;
  font-family:century gothic;
  letter-spacing:1px;
  text-transform: uppercase;
  text-align:left;
}
.cg-elemen h6 a:hover {
color:#666666;
}
.cg-elemen p {
  font-size: 12px;
  font-family: candara;
  text-align: left;
  color: #999999;
  line-height: normal;
  margin: 5px 0;
}

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

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

#cg-navigasifeed a {
  color: #888888!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>
<center><div class="terbaru-container">
    <div id="terbaru"></div>
    <div id="cg-navigasifeed"></div>
  </div></center>

After you paste the code, save it.

The Note :
color code here

Red Text : Your blog url ( with HTTPS )
Orange Text : Number of character for post
Blue Text : Number of post to be shown per page
Fuchsia Text : Background and border color
Green Text : Color of text
Purple Text : Width of widget

All done now, see the result on your blog
Do comment dear for any inquiries or request ^^,