Cara Membuat Widget Recent/Posting Terbaru Perlabel

Cara Membuat Widget Recent/Posting Terbaru Perlabel

Navigasi blog menjadi hal penting bagi suatu blog/website. Navigasi yang mudah dan jelas, memberi peluang bagi pengunjung blog untuk menelusuri seluruh isi blog, disamping konten yang menarik. Salah satu navigasi yang dirasa perlu diantaranya daftar posting 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.
    Widget Recent/Posting Terbaru Perlabel
    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>
  5. .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
    }
  6. Tambahkan JavaScript di bawah ini di atas </body>
  7. 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://info-kmu.blogspot.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);
  8. Simpan

Konfigurasi

OpsiKeterangan
feedsUriBerupa array objek dimana di dalamnya terdapat beberapa data berupa url dan tagurl digunakan untuk menentukan URL feed, tag digunakan untuk menentukan tag/label posting yang ingin ditampilkan.
numPostDigunakan untuk menentukan jumlah posting yang ingin ditampilkan
summaryLengthDigunakan untuk menentukan jumlah karakter ringkasan posting
titleLengthDigunakan 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
thumbSizeDigunakan untuk menentukan ukuran thumbnail posting
containerIdDigunakan untuk menentukan ID kontainer yang akan digunakan untuk memuat widget

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel