Connect with us

How To Show Most Recent Posts Widget With Thumbnails On Blogger

How To Show Most Recent Posts Widget With Thumbnails On Blogger

Blogger

How To Show Most Recent Posts Widget With Thumbnails On Blogger

(Last Updated On: December 27, 2022)

Do you want to display the most recent posts on your Blogger blog? You’re in the right place. In this tutorial, I will guide you step-by-step on how to display the recent posts on your Blogger blog by adding the Most Recent Post Widget.

Unlike state-of the-art professional custom Blogger templates the builtin Blogger themes do not offer the Most Recent Posts widget, which is required for every other blog. That’s why, you have to add a custom code for Most Recent Posts widget to show it on your Blogger blog.

If you’re looking for a better and more powerful “Most Recent Posts widget” with quality thumbnail, go through this tutorial:

Add Most Recent Posts Widget on Blogger

Follow the steps to add and display Most Recent Posts widget on your Blogger blog.

  • Go to your Blogger dashboard and click the Layout from the Sidebar.
  • Click Add a Gadget link of your Sidebar.
Go to your Blogger dashboard and click the Layout from the Sidebar. Click Add a Gadget
  • Click the HTML/JavaScript to add it on your blog’s sidebar.
Click the HTML/JavaScript to add it on your blog's sidebar.
  • Enter a widget Title like Most Recent Posts, Latest Posts, etc. Don’t forget to turn-on the Show this widget.
  • Copy the HTML/Javascript/CSS code of Most Recent Posts widget that I have shared in the next step, and Paste in the Content textarea.
  • Click the Save.
Copy the HTML/Javascript/CSS code of Most Recent Posts widget that I have shared in the next step, and Paste in the Content textarea.

Below is the code of Most Recent Posts widget that you have to copy and paste in the above step. Some of the the things/variable in the code that you should know about are:

  • var numfeed = 5; // It means number of posts appear on your widget.
  • var urlblog = “https://www.example.blogspot.com/”;  // Replace this URL with your blog URL.
<script type=’text/javascript’>
var numfeed = 5;
var startfeed = 0;
var urlblog = “https://www.example.blogspot.com/”;
var charac = 50;
var urlprevious, urlnext;

function cyberghost(ghost, banget) {
var showfeed = ghost.split(“<“);
for (var i = 0; i < showfeed.length; i++) {
if (showfeed[i].indexOf(“>”) != -1) {
showfeed[i] = showfeed[i].substring(showfeed[i].indexOf(“>”) + 1, showfeed[i].length);
}
}
showfeed = showfeed.join(“”);
showfeed = showfeed.substring(0, banget – 1);
return showfeed;
}

function showterbaru(json) {
var entry, posttitle, posturl, postimg, postcontent;
var showblogfeed = “”;
urlprevious = “”;
urlnext = “”;
for (var k = 0; k < json.feed.link.length; k++) {
if (json.feed.link[k].rel == ‘previous’) {
urlprevious = json.feed.link[k].href;
}
if (json.feed.link[k].rel == ‘next’) {
urlnext = json.feed.link[k].href;
}
}
for (var i = 0; i < numfeed; i++) {
if (i == json.feed.entry.length) {
break;
}
entry = json.feed.entry[i];
posttitle = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == ‘alternate’) {
posturl = entry.link[k].href;
break;
}
}
if (“content” in entry) {
postcontent = entry.content.$t;
} else if (“summary” in entry) {
postcontent = entry.summary.$t;
} else {
postcontent = “”;
}
if (“media$thumbnail” in entry) {
postimg = entry.media$thumbnail.url;
} else {
postimg = “http://1.bp.blogspot.com/-eiX9aalicz8/VWEORfDN71I/AAAAAAAAHdg/vfHyEfYKBh0/s1600/no_image.gif”;
}
showblogfeed += “<div class=’cg-elemen’>”;
showblogfeed += “<a =href='” + posturl + “‘ target=’_blank’><img src='” + postimg + “‘ /></a>”;
showblogfeed += “<h6><a href='” + posturl + “‘>” + posttitle + “</a></h6>”;
showblogfeed += “<p>” + cyberghost(postcontent, charac) + “…</p>”;
showblogfeed += “</div>”;
}
document.getElementById(“terbaru”).innerHTML = showblogfeed;
showblogfeed = “”;
if (urlprevious) {
showblogfeed += “<a href=’javascript:navigasifeed(-1);’ class=’previous’>&#9668; Previous</a>”;
} else {
showblogfeed += “<span class=’noactived previous’>&#9668; Previous</span>”;
}
if (urlnext) {
showblogfeed += “<a href=’javascript:navigasifeed(1);’ class=’next’>Next &#9658;</a>”;
} else {
showblogfeed += “<span class=’noactived next’>Next &#9658;</span>”;
}
showblogfeed += “<a href=’javascript:navigasifeed(0);’ class=’home’>Home</a>”;
document.getElementById(“cg-navigasifeed”).innerHTML = showblogfeed;
}

function navigasifeed(url) {
var p, parameter;
if (url == -1) {
p = urlprevious.indexOf(“?”);
parameter = urlprevious.substring(p);
} else if (url == 1) {
p = urlnext.indexOf(“?”);
parameter = urlnext.substring(p);
} else {
parameter = “?start-index=1&max-results=” + numfeed + “&orderby=published&alt=json-in-script”
}
parameter += “&callback=showterbaru”;
incluirscript(parameter);
}

function incluirscript(parameter) {
if (startfeed == 1) {
removerscript();
}
document.getElementById(“terbaru”).innerHTML = “<div id=’cg-loading’></div>”;
document.getElementById(“cg-navigasifeed”).innerHTML = “”;
var archievefeed = urlblog + “/feeds/posts/default” + parameter;
var terbaru = document.createElement(‘script’);
terbaru.setAttribute(‘type’, ‘text/javascript’);
terbaru.setAttribute(‘src’, archievefeed);
terbaru.setAttribute(‘id’, ‘MASLABEL’);
document.getElementsByTagName(‘head’)[0].appendChild(terbaru);
startfeed = 1;
}

function removerscript() {
var elemen = document.getElementById(“MASLABEL”);
var parent = elemen.parentNode;
parent.removeChild(elemen);
}
onload = function() {
navigasifeed(0);
}
</script>
<style>
/*Recent Post Navigation*/
a,
a:visited {
color: #555;
outline: none;
text-decoration: none;
}

a:hover,
a:focus,
a:visited:hover {
color: #22a1c4;
text-decoration: none;
}

.terbaru-container {
background: #fff;
width: 223px;
margin: -10px auto;
padding: 9px;
/*  border: 1px solid #ccc; */
}

#cg-terbaru {
border: 1px solid #585858;
width: 100%;
margin: 0 auto;
}

#terbaru {
margin: 0px;
}

.cg-elemen {
margin: 5px 0;
padding: 5px;
height: auto;
overflow: hidden;
padding-bottom: 20px;
}

.cg-elemen img {
padding: 0;
float: left;
height: 70px;
margin-right: 11px;
width: 70px;
border-radius:50%;
}

.cg-elemen h6,
.cg-elemen h6 a {
font-size: 13px!important;
font-weight: normal !important;
margin: 0;
color: #222;

}

.cg-elemen p {
font-size: 12px;
font-family: ‘Oswald’;
text-align: left;
color: #555;
line-height: normal;
margin: 5px 0;
}

#cg-loading {
color: #888;
font-family: inherit;
font-size: 100px;
letter-spacing: -10px;
text-align: center;
text-shadow: -5px 0 1px #444;
background: #fff url(http://4.bp.blogspot.com/-jSUS8v5kwpQ/U8Z_6Ufr-PI/AAAAAAAAEYY/o4cQPKvt8vQ/s1600/loading.gif) no-repeat 50% 50%;
height: 470px;
}

#cg-navigasifeed {
color: #bbb;
font-family: Oswald;
font-size: 12px;
text-align: center;
margin: 0px;
}

#cg-navigasifeed a {
color: #141414!important;
font-family: inherit!important;
font-size: 12px!important;
font-weight: 400!important;
display: block;
padding: 5px 10px;
}

#cg-navigasifeed span {
padding: 5px 10px;
}

#cg-navigasifeed .next {
float: right;
}

#cg-navigasifeed .previous {
float: left;
}

#cg-navigasifeed .home {
text-align: center;
}

#cg-navigasifeed a:hover,
#cg-navigasifeed span.noactived {
color: transparant!important;
}
@media screen and (max-width:700px) {
.terbaru-container, #terbaru, #cg-navigasifeed {
width:auto;
}
}

@media screen and (max-width:300px) {
.cg-elemen img {
display:none;
}
}

Lanjut, Sekarang Tinggal Memasukan Javascriptnya.
Cari

</style>
<div class=”terbaru-container”>
<div id=”terbaru”></div>
<div id=”cg-navigasifeed”></div>
</div>
  • Get access to all the Blogger Tutorial. If you like this post then don’t forget to share with other people. Share your feedback in the comments section below.
Blogger Templates

Also Read

Meer Basit is the founder of Meer’s World. He’s been running the show since launching the blog back in 2018. By background he is a computer scientist. Primarily, he creates content around blogging (WordPress, Blogger, Tumblr), SEO, affiliate programs, earn-online, reviews, eCommerce, & technology. He has got years of professional experience in web programming, computer programming, databases, data warehousing, & transcription. In general, he likes traveling, gardening, watching movies, is a passionate cricketer, creative writer, and a GSD lover.

4 Comments

4 Comments

  1. Karthikeya

    January 30, 2021 at 7:47 am

    thumnail of the post is not coming in blogger

    • Meer Basit

      January 30, 2021 at 8:43 pm

      which thumbnail? post thumbnail?

  2. Life Of Prakash

    February 1, 2021 at 11:44 am

    thumbnail of the post is not coming in my website https://www.targetallrounder.com/

Leave a Reply

Your email address will not be published. Required fields are marked *

More in Blogger

To Top