Ads Banner

Cara Membuat Widget Recent/Posting Terbaru Perlabel

Cara Membuat Widget Recent/Posting Terbaru Perlabel
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.
    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

Print/Save

Blok kemudian tekan tombol Ctrl dan huruf C pada keyboard secara bersamaan untuk copy artikel di atas. Bagi pengguna Google Chrome bisa menyimpan halaman ini dalam bentuk *pdf melalui tombol print/save di atas.!
Share This :

Jika Anda menyukai , Share melalui social media di atas (satu suka dari anda sangat berarti bagi kami. Tuliskan kritik dan saran anda pada form komentar di bawah! Ketikan email dan klik subcribe untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Info [K-Moe].

Artikel relevan lainnya
Beri Komentar