Colour Bloggie

HIATUS




Add Recent Post Widget



  1. Pergi ke Dashboard > Layout > Add  a Gadget > HTML/JavaScript
  2. Copy kode ini dan paste di HTML/Javascipt content. untuk mengedit kode tersebut, paste disini dulu. kenudian, paste kode yang sudah diedit tadi 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;
        }
    }



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



  • setelah di-paste, save!
  • Catatan :
    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 
    credit: Kak Ezah 

    Label:


    Posting Komentar

    Copyright © 2016 Najiyah Bloggie | Template by Najiyah | The Owner is Najiyah | Powered by Blogger