Cara Membuat Recent/Posting Terbaru Perlabel

Cara Membuat Widget Recent/Posting Terbaru Perlabel

Widget recent posting terbaru berdasarkan label ini memuat daftar posting terbaru dengan label yang spesifik. Untuk penerapannya silahkan ikuti langkah-langkah sebagai berikut :

1. Pada Dasboard akun blogger sobat pilih tata letak.

Pilih Tata Letak

2. Tambahkan gadget HTML/JavaScript

3. Salin kode ini dan letakan pada formulir / gadget yang anda tambahkan tadi.

<div id="list-recent-Post">
</div>
<script type="text/javascript">
    var setelan_lanjutan = {
        feedsUri: [{
            url: "http://info-kmu.blogspot.com/",
            tag: "ABK"
        }],

    };
</script>

4. Masuk ke menu edit HTML kemudian tambahkan CSS ini tepat sebelum ]]></b:skin>

.list-recent-Post {
    margin:5px;
    padding:0;
    width:300px;
}
.list-recent-Post ul, .list-recent-Post li {
    margin:0;
    padding:0;
    list-style:none
}
.list-recent-Post li {
    padding:0.3em;
    border-bottom:1px solid #999
}
.list-recent-Post .main-title {
    padding:2px
}
.list-recent-Post .title a {
    font-weight:bold;
    font-size:100%;
    text-decoration:none
}
.list-recent-Post .title a:hover {
    text-decoration:underline
}
.list-recent-Post img, .list-recent-Post .fake-img {
    border:none;
    background-color:#333;
    margin:0 1em 0 0;
    padding:0;
    float:left
}
.list-recent-Post .summary {
    font-size:95%;
    overflow:hidden
}

5. Tambahkan JavaScript di bawah ini di atas </body>

Cara Penulisan Penempatan JavaScript

<script>
    //<![CDATA[
    Code disini
        //]]>
</script>

//Source http://www.dte.web.id/2013/04/widget-blogger-untuk-menampilkan-daftar.html
//Modification http://info-kmu.blogspot.com/

var setelan_defaults = {
    feedsUri: [{
        url: "http://www.infokmu.com",
        tag: "ABK"
    }],
    numPost: 4,
    summaryLength: 80,
    titleLength: "auto",
    thumbSize: 72,
    newTabLink: false,
    containerId: "list-recent-Post",
    listClass: "list-recent-Post",
    current: 0,
    onLoadFeed: function (b) {},
    onLoadComplete: function () {},
    loadFeed: function (h) {
        var g = document.getElementsByTagName("head")[0],
            f = document.getElementById(this.containerId),
            e = document.createElement("script");
        e.type = "text/javascript";
        e.src = this.feedsUri[h].url + "/feeds/posts/summary" + (this.feedsUri[h].tag ? "/-/" + this.feedsUri[h].tag : "") + "?alt=json-in-script&max-results=" + this.numPost + "&callback=listEntries";
        g.appendChild(e)
    }
};
for (var i in setelan_defaults) {
    setelan_defaults[i] = (typeof (setelan_lanjutan[i]) !== undefined && typeof (setelan_lanjutan[i]) !== "undefined") ? setelan_lanjutan[i] : setelan_defaults[i]
}
function listEntries(j) {
    var o = j.feed.entry,
        A = setelan_defaults,
        v = document.getElementById(A.containerId),
        C = document.createElement("div"),
        z = "<ul>",
        t = A.feedsUri.length,
        r, u, s, w;
    for (var x = 0; x < A.numPost; x++) {
        if (x == o.length) {
            break
        }
        r = (A.titleLength !== "auto") ? o[x].title.$t.substring(0, A.titleLength) + (A.titleLength < o[x].title.$t.length ? "&hellip;" : "") : o[x].title.$t;
        s = ("summary" in o[x]) ? o[x].summary.$t.replace(/<br ?\/?>/g, " ").replace(/<.*?>/g, "").replace(/[<>]/g, "") : "";
        s = (A.summaryLength < s.length) ? s.substring(0, A.summaryLength) + "&hellip;" : s;
        w = ("media$thumbnail" in o[x]) ? '<img src="' + o[x].media$thumbnail.url.replace(/\/s72(\-c)?\//, "/s" + A.thumbSize + "-c/") + '" style="width:' + A.thumbSize + "px;height:" + A.thumbSize + 'px;">' : '<span class="fake-img" style="width:' + A.thumbSize + "px;height:" + A.thumbSize + 'px;"></span>';
        for (var y = 0, B = o[x].link.length; y < B; y++) {
            u = (o[x].link[y].rel == "alternate") ? o[x].link[y].href : "#"
        }
        z += '<li><div class="inner"' + (!A.autoHeight ? ' style="height:' + A.thumbSize + 'px;overflow:hidden;"' : "") + ">";
        z += w;
        z += '<div class="title"><a href="' + u + '"' + (A.newTabLink ? ' target="_blank"' : "") + ">" + r + "</a></div>";
        z += '<div class="summary">';
        z += "<span>" + s + "</span></div>";
        z += '<span style="display:block;clear:both;"></span></div></li>'
    }
    z += "</ul>";
    C.className = A.listClass;
    C.innerHTML = z;
    v.appendChild(C);
    A.onLoadFeed(A.current);
    if ((A.current + 1) < t) {
        A.loadFeed(A.current + 1)
    }
    if ((A.current + 1) == t) {
        A.onLoadComplete()
    }
    A.current++
}
setelan_defaults.loadFeed(0);

6. Simpan

Konfigurasi

Opsi	Keterangan
feedsUri	Berupa array objek dimana di dalamnya terdapat beberapa data berupa url dan tag: url digunakan untuk menentukan URL feed, tag digunakan untuk menentukan tag/label posting yang ingin ditampilkan.
numPost	Digunakan untuk menentukan jumlah posting yang ingin ditampilkan
summaryLength	Digunakan untuk menentukan jumlah karakter ringkasan posting
titleLength	Digunakan untuk memotong karakter judul posting yang terlalu panjang. Ganti nilainya menjadi angka untuk memotong karakter sebanyak angka tersebut, atau set sebagai "auto" untuk membiarkan judul posting sebagai apa adanya
thumbSize	Digunakan untuk menentukan ukuran thumbnail posting
containerId	Digunakan untuk menentukan ID kontainer yang akan digunakan untuk memuat widget

Demo

Share on Facebook

Share on Twitter

Share on Google+

Share on LinkedIn