Cara Membuat Widget Recent Post Responsive di Blogger Agar Lebih Seo
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.expxo.net";
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.expxo.net dengan alamat domain url blog kamu. Untuk property lainnya bisa di setting sendiri sesuai selera.
. 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.
Belum ada Komentar untuk "Cara Membuat Widget Recent Post Responsive di Blogger Agar Lebih Seo"
Posting Komentar