Beberapa hari ini aku sedang mencoba memperbaiki blog dengan melengkapi semua link dengan title. Beberapa sudah beres, terakhir aku mentok di Recent Post Widget yang disertai label yang mampu Anda lihat di sidebar. Ternyata pengaturan untuk memunculkan title pada link-nya ada di dalam arahan javascript. Weleh...tambah pusing hehehehe... tapi jika tidak mencoba kapan bisanya....
Karena aku mencar ilmu otodidak, otomatis tidak tahu bahasanya, hanya menerka-nerka arahan yang mirip-mirip dengan tujuan aku yaitu arahan "title". Seperti biasa, hapus dulu yang ini, gagal, balikin lagi, coba hapus yang lain, gagal lagi, balikin lagi hehehe...akhirnya ketemu juga... Sekarang mampu menampilkan title link dan goresan pena "continue>>" aku hapus, sehingga penampilannya lebih rapi menyerupai widget Popular Post. Tulisan "continue>>" aku hapus alasannya yaitu aku pikir linknya cukup dengan title post saja.
Recent Post Widget sebelum diperbaiki.
Recent Post Widget setelah diperbaiki.
Pertama kita bongkar arahan javascriptnya, dan penampakannya akan menyerupai di bawah ini.
/*
* If you want to copy the code below, please DO NOT delete or modify this note
*
* Author : Copycat91
* Website : http://infotentangblog.blogspot.com/
* Description :
* Creating a recent post widget classified by labels.
*
* Inspired from : a comment on http://tutorial-jitu.blogspot.com/
* Thanks a lot for : http://buzz.blogger.com/
* Created by : NetBeans IDE 6.5
*/
var num = jumlah_maksimum_post;
var wsumm = dengan_ringkasan;
var summlen = jumlah_karakter_ringkasan;
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='*'/>All Labels";
for(var i=0; i<labels.length; i++){
var label = labels[i];
s += "<option value='"+label+"'/>" + label;
}
s += "</select>";
document.getElementById("pbl_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/><a href='"+post.href+"'> continue>> </a>";
s += "</p>";
} else {
s += "<li><a href='"+post.href+"'>" + post.title + "</a></li>";
}
}
if(!wsumm){s += "</ul>";}
document.getElementById("pbl_posts").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;
} Kita konsentrasi pada arahan yang berwarna biru, di situ terlihat "post.href", "post.title",dan "continue>>". Kode "post.href" untuk link judul postingan, arahan "post.title" untuk title/judul postingan, dan arahan "continue>>" untuk read more (disertai link). Saya potong kodenya alasannya yaitu terlalu panjang, menyerupai di bawah ini:
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/><a href='"+post.href+"'> continue>> </a>";
s += "</p>";
} else {
s += "<li><a href='"+post.href+"'>" + post.title + "</a></li>";
}
} Perhatikan arahan yang berwarna merah, itu arahan yang harus dirubah dan dihapus. Kode merah pertama dan ketiga harus dirubah, dan arahan merah kedua dihapus. Sehingga penampilannya setelah dirubah akan menyerupai di bawah ini:
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+"'title='"+post.title+"'>" + post.title + "</a></b> <br/>";
s += post.content;
s += "</p>";
} else {
s += "<li><a href='"+post.href+"'title='"+post.title+"'>" + post.title + "</a></li>";
}
} Sehingga secara komplit, arahan javascriptnya setelah diperbaiki akan menyerupai di bawah ini.
/*
* If you want to copy the code below, please DO NOT delete or modify this note
*
* Author : Copycat91
* Website : http://infotentangblog.blogspot.com/
* Description :
* Creating a recent post widget classified by labels.
*
* Inspired from : a comment on http://tutorial-jitu.blogspot.com/
* Thanks a lot for : http://buzz.blogger.com/
* Created by : NetBeans IDE 6.5
*/
var num = jumlah_maksimum_post;
var wsumm = dengan_ringkasan;
var summlen = jumlah_karakter_ringkasan;
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='*'/>All Labels";
for(var i=0; i<labels.length; i++){
var label = labels[i];
s += "<option value='"+label+"'/>" + label;
}
s += "</select>";
document.getElementById("pbl_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+"'title='"+post.title+"'>" + post.title + "</a></b> <br/>";
s += post.content;
s += "</p>";
} else {
s += "<li><a href='"+post.href+"'title='"+post.title+"'>" + post.title + "</a></li>";
}
}
if(!wsumm){s += "</ul>";}
document.getElementById("pbl_posts").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;
} Untuk penerapannya ke widget, tambahkan arahan <script type="text/javascript"> di atasnya dan </script> di bawahnya.
Untuk arahan Recent Posts Widget Dengan Label selengkapnya silahkan buka postingan sebelumnya DI SINI.
Komentar
Posting Komentar