Agung Design Blogging Widget Cara Mudah Memasang Widget Recent Post di Blogger Lengkap

Cara Mudah Memasang Widget Recent Post di Blogger Lengkap

Minggu, Maret 17, 2019 Blogging Widget Blogging - Widget - Minggu, Maret 17, 2019 - oleh
Cara Mudah Memasang Widget Recent Post di Blogger Lengkap - Widget Recent post merupakan sebuah widget pada blogger yang biasanya dipasang pada bagian sidebar blog. Recent post sendiri berfungsi untuk menampilkan artikel-artikel terbaru pada sebuah blog. Untuk tampilan biasanya hampir mirip dengan widget popular post bawaan blogger.

Tujuannya dipasangnya widget recent post yaitu pada saat pengunjung membaca artikel kita, pengunjung dapat mengetahui tampilan postingan terbaru yang ada pada blog kita. Dengan adanya itu dapat membuat pengunjung kita tidak buru-buru pergi. Dengan kata lain dengan memasang widget ini, memungkinkan kita dapat mengurangi persentase bounce rate pada blog.

Baca Juga: Tag Kondisional Blogger Terbaru Yang Lebih Simple Dan Sederhana.

Tidak seperti widget popular post, pada dasarnya widget recent post tidak tersedia pada widget bawaan blogger. Untuk itu kita harus menambahkannya secara manual dengan menggunakan javascript.

Cara Memasang Widget Recent Post


Untuk memasang widget recent post kita tidak harus mengedit pada bagian dalam template HTML nya. Cukup dengan mengisinya pada widget HTML yang ditambahkan dibagian sidebar blog. Dibawah ini langkah-langkah pemasangan lengkapnya:

  1. Login pada blogger.
  2. Pilih menu "Tata Letak / Layout" -> lalu pada bagian sidebar klik "Tambahkan Gadget / Add a Gadget".
  3. Pilih gadget "HTML/JavaScript".


  4. Pada bagian "Judul" diisi sesuai selera. Misal kita beri judul "Artikel Terbaru".
  5. Pada bagian "Konten" isi dengan script dibawah ini:
    
    <style>
    .recentposts {font-family:Arial,sans-serif;font-size:14px;line-height:1.4em;}
    .recentposts li {overflow:hidden;padding-bottom:12px;margin-bottom:15px;border-bottom:1px solid #eee;}
    .recentposts li a {transition:all 0.2s;text-decoration:none;}
    .recentposts li a:hover {opacity:0.8;}
    .recentposts .thumbnail {float:left;margin-right:12px;}
    .recentposts .thumbnail img {width:100%;height:auto;}
    .recentposts .title a {color:#e74c3c;}
    .recentposts .info {margin-top:5px;font-size:13px;color:#888;}
    .recentposts .info a {color:#888;}
    .recentposts .info span:not(:last-of-type):after {content:"-";margin:0 4px;}
    .recentposts .snippet {margin-top:5px;color:#444;}
    </style>
    <ul class='recentposts' id='recentposts'></ul>
    <script type='text/javascript'>
    //<![CDATA[
    var rp_blogUrl = "https://www.agungdesign.com";
    var rp_totalItem = 6;
    var rp_showThumbnail = 1;
    var rp_showInfo = 1;
    var rp_showSnippet = 1;
    var rp_thumbnailSize = [80,80];
    var rp_snippetLength = 100;
    (function(){ function filterTags(g, h) { var e = g.split("<"); for (var f = 0; f < e.length; f++) { if (e[f].indexOf(">") != -1) { e[f] = e[f].substring(e[f].indexOf(">") + 1, e[f].length) } } e = e.join(""); e = e.substring(0, h - 1); return e; }; var callback = "recentposts"; var containerID = document.getElementById("recentposts"); window[callback] = function(data){ var elements = ""; for (var i = 0; i < rp_totalItem; i++){ if (i == data.feed.entry.length){ break; }; var entry = data.feed.entry[i]; var item_title = entry.title.$t, item_comment = [], item_url, item_thumb, item_date, item_label, item_snippet; for (var j = 0; j < entry.link.length; j++) { if ("replies" == entry.link[j].rel && "text/html" == entry.link[j].type) { item_comment[0] = entry.link[j].title; item_comment[1] = entry.link[j].href; }; if ("alternate" == entry.link[j].rel) { item_url = entry.link[j].href; break; }; }; item_thumb = "//3.bp.blogspot.com/-FHhLnZncaZE/XF-c-Ey_n2I/AAAAAAAAAkA/TXD5_-NJvH0nWEVliT1vS0RR_R2lsr0TQCLcBGAs/s72-c/no-image.jpg"; if ("media$thumbnail" in entry) { item_thumb = entry.media$thumbnail.url.replace("/s72-c/", "/w" + rp_thumbnailSize[0] + "-h" + rp_thumbnailSize[1] + "-p-k-no-nu/"); }; var date = entry.published.$t, year = date.substring(0, 4), digit = date.substring(5, 7), day = date.substring(8, 10), month = ["", "January", "Februari", "Maret", "April", "Mei", "Juni", "Juli", "Agustus", "September", "Oktober", "November", "Desember"]; item_date = month[parseInt(digit)] + " "+ day + ", " + year; item_label = ""; for (var n = 0; n < entry.category.length; n++){ var urlLabels = rp_blogUrl.replace(/\/$/, "") + "/search/label/" + entry.category[n].term + "?max-results=6"; item_label += "<a href='" + urlLabels + "'>" + entry.category[n].term + "</a>"; }; item_snippet = ""; if ("content" in entry) { item_snippet = entry.content.$t } else { if ("summary" in entry) { item_snippet = entry.summary.$t } }; item_snippet = filterTags(item_snippet, rp_snippetLength); elements += "<li>"; if (rp_showThumbnail){ elements += "<div class='thumbnail'><a href='"+item_url+"'><img src='"+item_thumb+"'/></a></div>"; }; elements += "<div class='title'><a href='"+item_url+"'>"+item_title+"</a></div>"; if (rp_showInfo){ elements += "<div class='info'>"; elements += "<span class='date'>"+item_date+"</span><span class='comments'><a href='"+item_comment[1]+"'>"+item_comment[0]+"</a></span>"; elements += "</div>"; }; if (rp_showSnippet){ elements += "<div class='snippet'>"+item_snippet+"...</div>"; }; elements += "</li>"; }; containerID.innerHTML = elements; }; var js = document.createElement("script"); var blogUrl = rp_blogUrl.replace(/\/$/, ""); js.src = blogUrl + "/feeds/posts/summary?orderby=published&alt=json-in-script&max-results=" + rp_totalItem + "&callback=" + callback; document.getElementsByTagName("head")[0].appendChild(js); })();
    //]]>
    </script>

    • Ganti https://www.agungdesign.com dengan alamat domain url blog kamu.
    • Untuk property lainnya bisa di setting sendiri sesuai selera.
  6. Lalu klik "Simpan / Save".

Untuk tampilannya bisa diubah sendiri pada bagian css nya sesuai selera kalian. Jika ingin melihat hasilnya saya sudah membuatkan demonya.


Seperti itulah bagaimana cara memasang widget recent post pada blogger. Semoga artikel ini gampang dimengerti, jika ada yang belum dimengerti bisa ditanyakan pada kolom komentar dibawah ini.
Beri Komentar