Add featured posts slider widget on blogger

Featured Posts Slider Widget is a cool html widget which allows you to show a number of posts which keep changing automatically and show the short link of posts also. It helps user to read more relevant blog post from your blogger.

In this tutorial I will show you how to add featured posts slider widget on your blogger as we know that a good blog allows you to communicate users to your contents in a more informative and understanding way. That doesn’t mean, however, that your blog should lack the details, designs and contents that characterizes the blog post presence. Therefore Blogger makes it easy to customize your layout easily and add special features to blog for better result and to help in grow traffic on your blog by genuine audience. For example, you can add a Featured Post gadget, which highlights important posts from your blog on your front page and allows you to keep the most filtered relevant post on top of your blog even as you add new contents.

For adding  featured posts slider widget on blogger

Follow below steps

◘ Login into Gmail

◘ Open blogger

◘ Goto Layout

◘ Tap on add a gadget

◘ Choose html/javascript

◘ Paste below code in html/javascript area

◘ Replace blog url with your own

Why we use this ?
For better customization
For ease of navigation
For the for presentation of some new posts
For the traffic increasement


Another Code

<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: 223px;
  margin: -10px auto;
  padding: 9px;
/*  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: auto;
overflow: hidden;
  padding-bottom: 20px;
}
.cg-elemen img {
  padding: 0;
  float: left;
  height: 70px;
  margin-right: 11px;
  width: 70px;
border-radius:50%;
}
.cg-elemen h6,
.cg-elemen h6 a {
  font-size: 13px!important;
  font-weight: normal !important;
  margin: 0;
  color: #222;
}
.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>
<script type=’text/javascript’>
var numfeed = 5;
var startfeed = 0;
var urlblog = “https://theashubstore.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>


◘ Have Fun !

Leave a Comment