Widget Label Blog dan Recent Posts

Monday, September 8, 2014

Bagaimana jika recent posts dan label blog digabungkan dalam satu widget, menarik kira-kira? Widget ini merupakan penerapan dari jQuery dan CSS yang dikemas dalam kerangka HTML Widget melalui kreasi ala kadarnya. Informasi lebih lanjut tentang recent posts (artikel terbaru) bisa dipelajari seperti yang dituliskan Admin tentang penerapan recent posts dan recent comments pada menu navigasi. Ternyata penerapan hal tersebut bisa kita gabungkan dengan label blog.

Penggabungan widget label blog dan recent posts

Penerapan

Letakkan kode css dibawah ini diatas ]]></b:skin> atau </style>

.rc_label {
  background:#121212;
  overflow:auto;
  width:100%px;
  height:400px;/* Tinggi  */
  padding:10px;
  border:1px solid #aaa;
}
.rc_label a {
  color:#999;
}
.rc_label a:hover {
  color:#fff;
}
#select {
  padding-bottom:5px;
  border-bottom:1px solid #000;
}
#itp_recents p {
  border-top:1px solid #222;
  border-bottom:1px solid #000;
  padding:5px 5px 27px 3px;
  margin:0;
}
.more {
  float:right;
  padding-right:10px;
}

Untuk kode dibawah silakan masukan pada widget Javascript/HTML pada blog Anda.

<div class='rc_label'>
 <div id="select"><span id="itp_labels"></span></div>
 <div id="itp_recents"> Recent Posts </div>
<script type="text/javascript">
 var maximum_account = 10;
 var scripsi = true;
 var scripsi_account = 250;
</script>
<script type='text/javascript'>
 var num = maximum_account;
 var wsumm = scripsi;
 var summlen = scripsi_account;
 var json;
 var labels;

 function entryHasLabel(entry, label) {
  if (label == "*") {
   return true;
  } // always true if label is "*"
  var labels = getPostLabels(entry);
  return isExists(labels, label);
 }

 function getAllLabels(json) {
  var labels = [];
  var entries = json.feed.entry;
  for (var i = 0; i < entries.length; i++) {
   var entry = entries[i];
   var categories = entry.category;
   if (!categories) {
    continue;
   }
   for (var j = 0; j < categories.length; j++) {
    var category = categories[j];
    var label = category.term;
    if (!isExists(labels, label)) {
     labels.push(label);
    }
   }
  }
  labels.sort();
  return labels;
 }

 function getContent(entry) {
  if (!wsumm) {
   return "";
  }
  var content = entry.content ? entry.content.$t : entry.summary.$t;
  content = stripHTML(content);
  if (content.length <= summlen) {
   return content;
  }
  content = content.substr(0, summlen);
  if (content.charAt(content.length - 1) != " ") {
   content = content.substr(0, content.lastIndexOf(" ") + 1);
  }
  content += "...";
  return content;
 }

 function getPermalink(entry) {
  var links = entry.link;
  if (!links) {
   return null;
  }
  for (var i = 0; i < links.length; i++) {
   var link = links[i];
   if (link.rel == "alternate") {
    return link.href;
   }
  }
  return null;
 }

 function getPostLabels(entry) {
  var labels = [];
  var categories = entry.category;
  if (!categories) {
   return labels;
  }
  for (var i = 0; i < categories.length; i++) {
   labels.push(categories[i].term);
  }
  return labels;
 }

 function getRecentPosts(json, label) {
  // this widget is made by copycat91 in his blog
  var posts = [];
  var entries = json.feed.entry;
  var i = 0;
  while (posts.length < num) {
   if (i == entries.length) {
    break;
   }
   var entry = entries[i];
   if (entryHasLabel(entry, label)) {
    var title = entry.title.$t;
    var href = getPermalink(entry);
    var content = getContent(entry);
    var post = {
     "title": title,
     "href": href,
     "content": content
    };
    posts.push(post);
   }
   i++;
  }
  return posts;
 }

 function isExists(array, val) {
  for (var i = 0; i < array.length; i++) {
   if (array[i] == val) {
    return true;
   }
  }
  return false;
 }

 function onLoadFeed(json_arg) {
  json = json_arg;
  labels = getAllLabels(json);
  showLabels(labels);
  showLabeledPosts("*");
 }

 function showLabeledPosts(label) {
  // set label == "*" if you want to show all posts
  posts = getRecentPosts(json, label);
  showPosts(posts);
 }

 function showLabels(labels) {
  var s = "";
  s += "<select onchange='showLabeledPosts(this.value)'>";
  s += "<option value='*'/>Semua Labels";
  for (var i = 0; i < labels.length; i++) {
   var label = labels[i];
   s += "<option value='" + label + "'/>" + label;
  }
  s += "</select>";
  document.getElementById("itp_labels").innerHTML = s;
 }

 function showPosts(posts) {
  var s = "";
  if (!wsumm) {
   s += "<ul>";
  }
  for (var i = 0; i < posts.length; i++) {
   var post = posts[i];
   if (wsumm) {
    s += "<p>";
    s += "<b><a href='" + post.href + "'>" + post.title + "</a></b> <br/>";
    s += post.content;
    s += "<br/><span class='more'><a href='" + post.href + "'> continue →</a></span>";
    s += "</p>";
   } else {
    s += "<li><a href='" + post.href + "'>" + post.title + "</a></li>";
   }
  }
  if (!wsumm) {
   s += "</ul>";
  }
  document.getElementById("itp_recents").innerHTML = s;
 }

 function stripHTML(s) {
  var c;
  var intag = false;
  var newstr = "";
  for (var i = 0; i < s.length; i++) {
   c = s.charAt(i);
   if (c == "<") {
    intag = true;
   } else if (c == ">") {
    intag = false;
   }
   if (c == ">") {
    newstr += " ";
   } else if (!intag) {
    newstr += c;
   }
  }
  return newstr;
 }
 </script>
 <script src="https://idtutorplus.blogspot.com/feeds/posts/default?alt=json-in-script&callback=onLoadFeed"></script>
</div>

Live Demo

Pasang Iklan Anda di Sini

Pasang Iklan Anda di Sini