Recent Posts Widget Dengan Label Disertai Title Link

Recent Posts Widget Dengan Label Disertai Title Link

Bola Hero Gawai

Recent Posts Widget Dengan Label Disertai Title Link

Beberapa hari ini saya sedang mencoba memperbaiki blog dengan melengkapi semua link dengan title. Beberapa sudah beres, terakhir saya mentok di Recent Post Widget yang disertai label yang bisa Anda lihat di sidebar. Ternyata pengaturan untuk memunculkan title pada link-nya ada di dalam kode javascript. Weleh...tambah pusing hehehehe... tapi kalau tidak mencoba kapan bisanya....

Karena saya belajar otodidak, otomatis tidak tahu bahasanya, hanya menerka-nerka kode yang mirip-mirip dengan tujuan saya yaitu kode "title". Seperti biasa, hapus dulu yang ini, gagal, balikin lagi, coba hapus yang lain, gagal lagi, balikin lagi hehehe...akhirnya ketemu juga... Sekarang bisa menampilkan title link dan tulisan "continue>>" saya hapus, sehingga penampilannya lebih rapi seperti widget Popular Post. Tulisan "continue>>" saya hapus karena saya pikir linknya cukup dengan title post saja.

Recent Posts Widget
Recent Post Widget sebelum diperbaiki.

Recent Posts Widget Dengan Label
Recent Post Widget setelah diperbaiki.

Pertama kita bongkar kode javascriptnya, dan penampakannya akan seperti 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&gt;&gt; </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 kode yang berwarna biru, di situ terlihat "post.href", "post.title",dan "continue&gt;&gt;". Kode "post.href" untuk link judul postingan, kode "post.title" untuk title/judul postingan, dan kode "continue&gt;&gt;" untuk read more (disertai link). Saya potong kodenya karena terlalu panjang, seperti 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&gt;&gt; </a>";
            s += "</p>";
        } else {
            s += "<li><a href='"+post.href+"'>" + post.title + "</a></li>";
        }
    }

Perhatikan kode yang berwarna merah, itu kode yang harus dirubah dan dihapus. Kode merah pertama dan ketiga harus dirubah, dan kode merah kedua dihapus. Sehingga penampilannya setelah dirubah akan seperti 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, kode javascriptnya setelah diperbaiki akan seperti 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 kode <script type="text/javascript"> di atasnya dan </script> di bawahnya.

Untuk kode Recent Posts Widget Dengan Label selengkapnya silahkan buka postingan sebelumnya DI SINI.

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

8 Comments Add Comment

Waha langsung ke tkp buat bongkar script...

Balas

Iya mas Mahfid silahkan...biar tambah akrab sama kodi hehehe :D

Balas

Sukses...mas thankyou

Balas

Bisa gak hanya label tertentu atau label nya dihilangkan aja pak?
tengkyu :)

Balas

bisa dipake buat daftar isi.. :D :) .

Balas

Jadi ganti lagi script yang http://yourjavascript.com/36152802110/recentposts.js sama yang baru ya mas ?

Balas

Cara buat effect hovernya gimana mas ?

Balas

Hello Admin i tried your widget but if i select a certain label it pulls only one posts what should i do to display more than 1 posts thanks.....

Balas
Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×