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

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

By default Blogger doesn’t provide you the widget that shows the most recent posts, but developers have managed to develop the Most Recent Posts Widget with Thumbnails using Javascript, HTML & CSS.

 

Also Read:

 

Step 1:

  • Go to Layout.
  • Click Add a Gadget.
  • Add HTML/Javascript.
How To Show Most Recent Posts Widget With Thumbnail On Blogger | Recent Post Widget For Blogger

 

Blogger Templates

 

Step 2:

  • Paste the Code like this.
How To Show Most Recent Posts Widget With Thumbnail On Blogger | Recent Post Widget For Blogger

 

Copy and Paste highlighted the code.

Some of the the things that you should know.

  • var numfeed = 5; // It means number of posts appear on one page. You can change.
  • var urlblog = “https://www.meersworld.net/”;  // Replace URL with your Website URL.

 

Here is the code. ————–

<script type=’text/javascript’>
var numfeed = 5;
var startfeed = 0;
var urlblog = “https://www.meersworld.net/”;
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.

 

4 Comments

4 Comments

  1. Karthikeya

    January 30, 2021 at 7:47 am

    thumnail of the post is not coming in blogger

  2. Meer's World

    January 30, 2021 at 12:21 pm

    which thumbnail? post thumbnail?

  3. Life Of Prakash

    February 1, 2021 at 11:44 am

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

  4. Meer's World

    February 1, 2021 at 12:20 pm

    I don't know why it is not showing. Use this widget, it is better: https://www.meersworld.net/2019/12/blogger-show-recent-and-specific-label-posts.html

Leave a Reply

Your email address will not be published.

More in Blogger

Advertisement
Advertisement
Free Guide to start a blog and make passive income
Download Cheap Website Themes
Get Namecheap Shared Hosting With Free Domain
To Top