Cara Membuat Recent Post Berdasarkan Label / Kategori

Recent Post adalah penampilan setiap artikel yang pernah kita publish dihalaman blog ataupun web kita. Pada dasarnya Recent Post ini sangat berguna untuk halaman blog/web kita, agar memudahkan setiap pengunjung blog/web kita dapat dengan mudah melihat setiap artikel yang pernah kita publish dalam halaman tersebut. Recent Post mempunyai nilai penting untuk meningkatkan ranking pada blog/web kita.
Karena begitu pentingnya, saya pada tutorial kali ini akan menjelaskan cara pembuatan ataupun cara bagaimana anda dapat menampilkan Recent Post di blog kesayangan anda.

• Login ke blog anda
• Pilih tata letak untuk membuka layout blog anda
• Tempatkan sesuai selera, Pilih element laman anda dengan tambah gadget ( add gadget )
• Langkah berikutnya pilih HTML/Javascript. lalu salin code scrip yg dibawah ini.

    <div style="overflow:auto;width:100%px;height:300px;padding:10px;border:1px solid #000000">
    <span id="pbl_labels"></span>
    <div id="pbl_posts"> Recent Posts </div>
    <script type="text/javascript">
    var jumlah_maksimum_post = 10;
    var dengan_ringkasan = true;
    var jumlah_karakter_ringkasan = 100;
    </script>
    <script type='text/javascript'>
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;
}
    </script>
    <script src="ALAMAT BLOG ANDA/feeds/posts/default?alt=json-in-script&callback=onLoadFeed">
    </script></div>

Keterangan :

• Scrip yg diblok warna kuning itu adalah tinggi & lebar serta border pada tampilan kotak Recent Post anda nantinya.
• warna biru [ var jumlah_maksimum_post = 10 ] adalah jumlah maksimum post yang ingin ditampilkan
• warna  Hijau [ var dengan_ringkasan = true ; ] ganti "true"  dengan "false" jika tidak mau disertai ringkasan
• warna ungu [ var jumlah_karakter_ringkasan = 100 ] adalah jumlah karakter ringkasan post Anda.
• warna merah pada tulisan [ ALAMAT BLOG ANDA ] Ganti dengan alamat (url) blog anda.

Tutorial diatas adalah cara membuat atapun menampilkan Recent Post pada blog, semoga dengan keterangan yang begitu singkat itu anda dapat membuat serta lebih memahami cara pembuatan/menampilkan Recent Post diblog anda.

---

NB : Bila ada kesulitan dalam pembuatan Recent Post ini, silahkan anda tanya melalui form komentar dibawah ini, kita akan share bersama. Saya mohon maaf jika masih banyak kekurangannya.

---

Terimakasih atas kunjungannya,Bila anda suka dengan artikel ini silahkan JOIN TO MEMBER BLOG atau berlangganan geratis Artikel dari blog ini, daftarkan email anda pada form subscribe dibawah halaman . Pergunakan vasilitas diblog ini untuk mempermudah anda. Bila ada masalah dalam penulisan artikel ini silahkan kontak saya melalui kotak komentar yang ada dibawah atau gunakan fasilitas yang ada diblog ini untuk menghubungi saya.

Salam Blogger.... !!! .

Admin Rivai Silaban

Share article with : Google+ Facebook Twitter

Di posting oleh : Unknown Update pada : 10:49 PM