Cara Membuat Widget Recent Post Responsive di Blogger Lengkap

Widget Recent post adalah sebuah widget pada blogger yang biasanya dipasang pada bagian sidebar blog untuk menarik perhatian pengunjung. Recent post sendiri berfungsi untuk menampilkan artikel-artikel terbaru pada sebuah blog. Untuk tampilan biasanya hampir mirip dengan widget popular post bawaan blogger.


Tujuannya dari pemasang widget recent post ini 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.

Cara Membuat Widget Recent Post Responsive di Blogger Lengkap

1. Silahkan kamu login ke Blogger.com dengan menggunakan Gmail kamu.
2. Pilih menu "Tata Letak / Layout" -> lalu pada bagian sidebar klik "Tambahkan Gadget / Add a Gadget". selanjutnya Pilih gadget "HTML/JavaScript".
3. Masuk ke menu TEMA > klik Edit HTML
4. Pada bagian "Judul" silahkan diisi sesuai selera. Misal kita beri judul "Artikel Terbaru".
5. Masukkan kode script dibawah ini tepat diisi Konten.

<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.showdzgn.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.showdzgn.com dengan alamat domain url blog kamu.
Untuk property lainnya bisa di setting sendiri sesuai selera.

6. Kalau sudah silahkan klik SIMPAN dan Selesai.

Bagaimana mudah bukan untuk tutorial Cara Membuat Widget Recent Post Responsive di Blogger Lengkap apabila kamu memiliki kendala tentang blogger atau ada masalah silahkan komen dikolom komentar dibawah artikel ini.
Tampilkan Komentar
Sembunyikan Komentar

0 Response to "Cara Membuat Widget Recent Post Responsive di Blogger Lengkap"

Post a Comment

1. Berkomentarlah dengan tata bahasa yang baik agar orang lain tahu sebijak apa karakter anda melalui kata kata.
2. Silahkan tulis komentar anda untuk hal apapun yang masih berhubungan dengan post pada halaman ini.
3. Mohon untuk tidak menyertakan Link Aktif pada kolom komentar.
4. Mohon maaf apabila tidak sempat membalas komentar semua.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel