How to Add Recent Post With Thumbnail In Blogger Blog

0 16

How to Add Recent Post With Thumbnail In Blogger Blog

In this post, you will learn how to add recent post With Thumbnail in Blogger blog. If you have a website and blog on your blogger then this post is for you. By adding the recent post widget to the blog, your blog readers get the information about the new post easily. Many people blogging on blogger and want to show the latest post in their blog with Thumbnail. Follow these steps to show recent posts in blog (website) with Thumbnail.

Read also: –

Steps to Add Recent Post Widget With Thumbnail In Blogger Blog.

1. First of all go to the layout of your blogger blog

How-to-Add-Recent-Post-With-Thumbnail-In-Blogger-Blog

2. Click on add a gadget option. You will see that it has given many add a gadget option. Select the side add a gadget on which side of your blog you want to show the recent post.

Add Recent Post With Thumbnail
Add Recent Post With Thumbnail

3. After this a popup page will open in it select html / javascript option

recent-post
recent-post

4. After clicking html / javascript, a big box will open, copy and paste the code given below.

4. After clicking html

5. Write recent posts in the title box above.

<script type=’text/javascript’>
var numfeed = 4;
var startfeed = 0;
var urlblog = “http://www.techysharif.in”;
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: 280px;
margin: 20px auto;
padding: 15px;
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: 79px;
background: #FFF url(“http://smruthycollege.com/images/shadow2.png”) no-repeat scroll center bottom;
overflow: hidden;
padding-bottom: 20px;
}

.cg-elemen img {
padding: 0;
float: left;
height: 70px;
margin-right: 15px;
width: 70px;
}

.cg-elemen h6,
.cg-elemen h6 a {
font-size: 14px!important;
font-weight: 500;
margin: 0;
color: #222;
font-family:’Oswald’;
line-height: 18px;
text-transform: uppercase;
text-aligaln:’center’;
}

.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(https://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>


If you have any question, then you can ask by commenting. You must tell us how you felt about this information.

 

6. After this, click on the button of save.

 

Now you have learned how to post recent posts in blogger blog with Thumbnail.

Leave A Reply

Your email address will not be published.