Membuat Recent Post With Navigation

Sunday, January 6, 2013

Mungkin tulisan ini kali pertama ditahun 2013, ternyata sudah lama gak update blog disebabkan dengan numpuknya kerjaan, ini aja Admin sempatkan walau terkesan buru-buru. Langsung saja pada pembahasan tutorial selanjutnya yakni pembahasan cara membuat recent post pada blog yang dilengkapi dengan navigasi halaman.

Tips ini bisa Anda terapkan dalam blog baik pada gadget/widget ataupun langsung diterapkan pada template blog, tergantung dari Anda sendiri mau diletakkan dimana. Yang pasti hasil yang didapatkan akan mengoptimasi blog Anda pada pagerank.

Live Demo

Pemasangannya dan penerapnnya :

CSS

Biasanya kode ini dipasang di atas ]]></b:skin> atau </style> pada template Anda.

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

#recentss {
  margin:0;
}

.itp-elemen {
  border:1px solid #ccc;
  margin:5px 0;
  padding:5px;
  height:79px;
}

.itp-elemen img {
  background:#999;
  padding:4px;
  float:left;
  height:70px;
  margin-right:8px;
  width:70px;
}

.itp-elemen h6,
.itp-elemen h6 a {
  font-size:12px!important;
  font-weight:700!important;
  margin:0;
  color:#111;
}

.itp-elemen:hover {
  background-color:#c3c3c3;
}

.itp-elemen p {
  font:14px Tahoma;
  text-align:justify;
  color:#555;
  line-height:14px;
  margin:5px 0;
}

#itp-loading {
  color:#888;
  font-family:Tahoma;
  font-size:100px;
  letter-spacing:-10px;
  text-align:center;
  text-shadow:-5px 0 1px #444;
  background:#141414 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4fUYWKETHs9ls6I1fGYuFZ14jTQIhh04DVkJNnO2RO4UeNPsPcbc6t7eph0Y5dPO2Af1_PoF5NjQKl9_N7CYIfqSWoqkvkzfYzlTIvX4V9RAzap9MuISgz0MqQlcSXmT_U8tjYgYK5uk/s1600/loading.gif) no-repeat 50% 50%;
  height:470px;
  border:1px solid #c3c3c3;
}

#itp-navigationfeed {
  border:1px solid #c3c3c3;
  color:#bbb;
  font-family:Verdana;
  font-size:12px;
  text-align:center;
  margin:0;
}

#itp-navigationfeed:hover {
  background-color:#c3c3c3;
}

#itp-navigationfeed a {
  color:#141414!important;
  font-family:Tahoma!important;
  font-size:12px!important;
  font-weight:400!important;
  display:block;
  padding:5px 10px;
}

#itp-navigationfeed span {
  padding:5px 10px;
}

#itp-navigationfeed .next {
  float:right;
}

#itp-navigationfeed .previous {
  float:left;
}

#itp-navigationfeed .home {
  text-align:center;
}

#itp-navigationfeed a:hover,
#itp-navigationfeed span.noactived {
  color:transparant!important;
}

JavaScript

Pasang diatas </head>

<script type='text/javascript'>
//<![CDATA[
var numfeed = 5;
var startfeed = 0;
var urlblog = "https://nama-blog-anda.blogspot.com/";
var charac = 150;
var urlprevious, urlnext;

function idtutorplufeed(idtutor,mantap){
var showfeed = idtutor.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,mantap-1);
return showfeed;
}
function showrecentss(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 = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4X1mC_cv9I5m8atdIBlil6DQQN_MzrO4q6XvZJT5iW4SxDv-Bx8vc-_bwCAiTldS_UBJKbwBnFOo-gmKqBYc05HWotK6M3GVvA8QYNUShu-DZpnILiWhyZ4XA8G5fzchYu-oOn30oQFA/s1600/idtp.png";
}
showblogfeed += "<div class='itp-elemen'>";
showblogfeed += "<a href='" + posturl + "' target='_blank'><img src='" + postimg + "' /></a>";
showblogfeed += "<h6><a href='" + posturl + "'>" + posttitle + "</a></h6>";
showblogfeed += "<p>" + idtutorplufeed(postcontent,charac) + "...</p>";
showblogfeed += "</div>";
}
document.getElementById("recentss").innerHTML = showblogfeed;
showblogfeed = "";
if(urlprevious) {
showblogfeed += "<a href='javascript:navigationfeed(-1);' class='previous'>&#9668; Previous</a>";
} else {
showblogfeed += "<span class='noactived previous'>&#9668; Previous</span>";
}
if(urlnext) {
showblogfeed += "<a href='javascript:navigationfeed(1);' class='next'>Next &#9658;</a>";
} else {
showblogfeed += "<span class='noactived next'>Next &#9658;</span>";
}
showblogfeed += "<a href='javascript:navigationfeed(0);' class='home'>Home</a>";
document.getElementById("itp-navigationfeed").innerHTML = showblogfeed;
}

function navigationfeed(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=showrecentss";
incluirscript(parameter);
}
function incluirscript(parameter) {
if(startfeed==1) {removerscript();}
document.getElementById("recentss").innerHTML = "<div id='itp-loading'></div>";
document.getElementById("itp-navigationfeed").innerHTML = "";
var archievefeed = urlblog + "/feeds/posts/default"+ parameter;
var recentss = document.createElement('script');
recentss.setAttribute('type', 'text/javascript');
recentss.setAttribute('src', archievefeed);
recentss.setAttribute('id', 'ITPLABEL');
document.getElementsByTagName('head')[0].appendChild(recentss);
startfeed = 1;
}
function removerscript() {
var elemen = document.getElementById("ITPLABEL");
var parent = elemen.parentNode;
parent.removeChild(elemen);
}
onload=function() { navigationfeed(0); }
//]]>
</script>

Penerapan HTML

<div id="recentss"></div>
<div id="itp-navigationfeed"></div>

Atur bagian JavaScript diatas sesuai dengan kemauan Anda, tapi jangan sampai salah penulisannya
var numfeed = 5; ⇒ Jumlah label yang ditampilkan
var urlblog = "https://nama-blog-anda.blogspot.com/"; ⇒ Nama blog Anda.
var charac = 150; ⇒ Banyaknya karakter.

Semoga bermanfaat.

Pasang Iklan Anda di Sini

Pasang Iklan Anda di Sini