Recent Posts Gadget With Avatar, Animated Thumbnails & Labels
We have covered a comprehensive series on how to use Blogger JSON feed to extract data from your blog feeds and parse the JSON data in JavaScript. If you really wish to code these gadgets yourself, you must read this series where we have covered all A-Z steps of blogger gadget development.
We have already shared an advanced recent posts label widget with featured thumbnails earlier. We will use the same logic to code something more useful and productive. Since most of you requested that the comment and labels links should be clickable. Fortunately all your requests have been fulfilled in this new label gadget.
Today's recent posts widget has some unique features introduced first time online :- Author Avatar - Unique!
- Clickable Labels - Unique!
- Displays recent posts
- Displays recent posts from a specific category/label.
- Clickable Comments Count
- Custom Date Format - Unique!
- Clickable Animated Featured Thumbnails - Unique!
- Option to increase or decrease thumbnail Resolution - Unique!
- Support for Third-party Images and YouTube thumbnails - Unique!
- Title Length is adjustable
- Summary Snippet Length is adjustable
- Total Posts Count for selected label is displayed at bottom - Unique!
- Customizable into different layouts using CSS thanks to different nodal IDs. - Unique!
Why Use Recent Posts Gadget?
By using Recent Posts Gadgets you can showcase latest posts from different labels to give extra exposure to your blog posts. It also helps you to increase pageviews and ultimately improve blog revenue. You can display posts from a specific label or you can simply display recent posts that just got published recently on your blog. You can display this gadget either on your homepage or your sidebar.
Search engine visitors who land on your blog would love to see what are the latest posts published on your blog through this gadget on your sidebar instead of going to the homepage. Thus bringing you more pageviews.
We have used AJAX to display several recent posts gadgets on homepage of COPmo template.
Install Recent Posts Gadget By Label on your Blog
Follow these easy steps to install it on your blogspot blog:
- Go To Blogger > Template
- Backup your template'
- Click "Edit HTML"
- Search and Paste the following CSS code just below it:
Make these customizations:
<link href='//netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>
<style>
/*------Recent Posts Gadget By STCnetwork.org--------*/
.mbtlist {list-style-type:none;overflow:hidden; margin: 10px 0px!important; width:300px; padding:0px!important;}
.mbtlist li {margin:0px auto 10px auto; clear:both; color:#666; font-family:helvetica; font-size:12px; border-bottom:1px solid #eee; overflow:hidden; position:relative}
.mbtlist li a { color:#666; text-decoration:none; }
.mbtlist i{color:#999; padding-right:5px; }
.mbtlist .iline{line-height:2em; margin-top:3px;}
.mbtlist .icontent{line-height:1.5em; margin-top:5px;}
.mbtlist div span{margin:0 5px 0 0; display:inline-block;font-weight: normal; }
.mbtlist .mbttitle {font-family:oswald; font-size:13px; color:#666; font-weight:normal; text-decoration:none;}
.mbtlist .mbttitle:hover, .mbtlist .itotal a:hover {color:#333; text-decoration:none;}
.mbtlist .iedit a{text-decoration:none; color:#999; cursor:pointer}
.mbtlist .iedit:before, .mbtlist .iauthor:before, .mbtlist .itag:before, .mbtlist .icomments:before, .mbtlist .idate:before, .mbtlist .itotal span:before{font-family:fontAwesome; position:relative; padding-right:8px; color:#999;}
.mbtlist .iauthorpic{width: 17px;height: 17px;border-radius: 50%;
float: none; display: inline-block; margin:0px 0px 0px 0px; padding-right:3px; position:relative; top:3px;}
.mbtlist .itag{ color: #fff;position: absolute;left: 7px;top: 8px;display: inline-block;font-size: 11px;width: 130px; height:22px; overflow: hidden;}
.mbtlist .itag a{background:#000;background:rgba(0,0,0,0.7);text-decoration:none;color:#fff;padding:4px 5px;text-transform:capitalize;line-height: 2em;font-family: arial;
font-size: 11px;border:1px solid #333;}
.mbtlist .itag a:hover{background:#222; color:#eee; text-decoration:none;}
.iFeatured{overflow:hidden;position:relative;float:left;margin:0 5px 10px 0;padding:0;}
.iFeatured a {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3hncJthe2pvnIWyldMFGchJEx1sBSv75aakIvgpu9LuM7bL_fQnwe60sD9iCw-LRP592NI0UD-ydRWNyNi8RLCWdjprCyWoxzYT1cSANCqHyE1hxUAQXQ54KyEgoSB3eKgNGoEDh9jns/s100/mbt-bg1.png) 0 0;padding: 7px 7px 8px 7px;display: block;}
.iFeatured img{width:135px;height:80px;-moz-transition:all .3s;-webkit-transition:all .3s;transition:all .3s; border-radius: 2px;}
.iFeatured:hover img{ opacity:1; -moz-transform:scale(1.4);-webkit-transform:scale(1.4);transform:scale(1.4)}
.mbtlist .icomments a{color:#0080ff; font-family: arial;font-size:12px;}
.mbtlist .icomments a:hover{text-decoration:underline}
.mbtlist .icomments:before {content:'\f086'; padding:0px 3px 0px 7px; color:#84DB06;}
.mbtlist .idate:before {content:'\f073';padding-right:3px}
.mbtlist .iedit:before {content:'\f040';}
.mbtlist .imore {font-size:16px; font-weight:bold; text-decoration:none; color:#666;}
.mbtlist .itotal {color:#333; padding:5px 0px; }
.mbtlist .itotal a {font-family:oswald, arial; font-size:12px; font-weight:normal; color:#0080ff; text-decoration:none}
.mbtlist .itotal span:before {content:'\f07c';}
.mbtlist .itotal span font {padding:0px 3px; color:#333; font-family:georgia; font-size:15px; font-weight:bold}
</style>
- To change link color edit #0080ff
- To change comment icon color edit #84DB06
- Next Go To Blogger > Layout
- Choose HTML/JavaScript Widget
- Paste the following code inside it:
<script type="text/javascript">You can easily choose to show or hide an option using on/off Boolean values. Simple make these settings:
//#################### Default Settings
var ListBlogLink = "http://mybloggertricks.com";
var ListCount = 3;
var ListLabel = "SEO";
var ChrCount = 45;
var TitleCount = 66;
var ImageSize = 200;
var showcomments = "on";
var showdate = "off";
var showauthor = "on";
var showthumbnail = "on";
var showlabel = "on";
var showcontent = "off";
var showTotal = "on";
//################ Function Start
function mbtlist(json) {
document.write('<ul class="mbtlist">');
for (var i = 0; i < ListCount; i++)
{
//################### Variables Declared
var listing= ListImage = ListUrl = ListTitle = ListImage = ListContent = ListConten = ListAuthor = ListTag = ListDate = ListUpdate = ListComments = thumbUrl = TotalPosts = sk = AuthorPic= ListMonth = Y = D = M = m = YY = DD = MM = mm = TT = "";
//################### Category
if (json.feed.entry[i].category != null)
{
for (var k = 0; k < json.feed.entry[i].category.length; k++) {
ListTag += "<a href='"+ListBlogLink+"/search/label/"+json.feed.entry[i].category[k].term+"'>"+json.feed.entry[i].category[k].term+"</a>";
if(k < json.feed.entry[i].category.length-1)
{ ListTag += " ";}
}}
//################### URL
for (var j = 0; j < json.feed.entry[i].link.length; j++) {
if (json.feed.entry[i].link[j].rel == 'alternate') {
break;
}
}
ListUrl= "'" + json.feed.entry[i].link[j].href + "'";
//################### Info
TotalPosts = json.feed.openSearch$totalResults.$t;
if (json.feed.entry[i].title!= null)
{
ListTitle= json.feed.entry[i].title.$t.substr(0, TitleCount);
}
if (json.feed.entry[i].thr$total)
{
ListComments= "<a href='"+json.feed.entry[i].link[j].href+"#comment-form'>"+json.feed.entry[i].thr$total.$t+"</a>";
}
ListAuthor= json.feed.entry[i].author[0].name.$t.split(" ");
ListAuthor=ListAuthor.slice(0, 1).join(" ");
AuthorPic = json.feed.entry[i].author[0].gd$image.src;
//################### Content Check
ListConten = json.feed.entry[i].content.$t;
ListContent= ListConten.replace(/(<([^>]+)>)/ig,"").substring(0, ChrCount);
//################### Date Format
ListMonth= ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
ListDate= json.feed.entry[i].published.$t.substring(0,10);
Y = ListDate.substring(0, 4);
m = ListDate.substring(5, 7);
D = ListDate.substring(8, 10);
M = ListMonth[parseInt(m - 1)];
ListUpdate= json.feed.entry[i].updated.$t.substring(0, 16);
YY = ListUpdate.substring(0, 4);
mm = ListUpdate.substring(5, 7);
DD = ListUpdate.substring(8, 10);
TT = ListUpdate.substring(11, 16);
MM = ListMonth[parseInt(mm - 1)];
//################### Thumbnail Check
// YouTube scan
if (json.feed.entry[i].content.$t.match(/youtube\.com.*(\?v=|\/embed\/)(.{11})/) != null)
{
var youtube_id = json.feed.entry[i].content.$t.match(/youtube\.com.*(\?v=|\/embed\/)(.{11})/).pop();
if (youtube_id.length == 11) {
var ListImage = "'//img.youtube.com/vi/"+youtube_id+"/0.jpg'";
}
}
else if (json.feed.entry[i].media$thumbnail)
{
thumbUrl = json.feed.entry[i].media$thumbnail.url;
sk= thumbUrl.replace("/s72-c/","/s"+ImageSize+"/");
ListImage= "'" + sk.replace("?imgmax=800","") + "'";
}
else if (json.feed.entry[i].content.$t.match(/src=(.+?[\.jpg|\.gif|\.png]")/) != null)
{
// Support For 3rd Party Images
ListImage = json.feed.entry[i].content.$t.match(/src=(.+?[\.jpg|\.gif|\.png]")/)[1];
}
else
{
ListImage= "'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhA-L8ACXRe0sbg4o4Fh9EcBXOd7GLxgybp9yCBRE8tr-oVvv5CUe5IDIRFHl51zEJDNvoVmc2dtZG6ZiCgFCsVK8leUVVNseW9hxFV0FhIeeT1wMqNVXaZ9QnxOXHiz-nLc4CM_yW7bDA/s200/Icon.png'";
}
//################### Printing List
document.write( "<li class='node"+[i]+"' >");
if (showthumbnail == 'on'){
document.write("<div class='iFeatured'><a href="
+ ListUrl+
"><img src="
+ListImage+
"/></a></div>");
}
if (showlabel == 'on'){
document.write("<span class='itag'>"
+ListTag +
"</span>");
}
document.write("<a class='mbttitle' href="
+ ListUrl+
">"
+ ListTitle+
"</a><div class='iline'>");
if (showauthor == 'on'){
document.write("<span class='iauthor'><img class='iauthorpic' src='"+AuthorPic+"'/>"
+ListAuthor+
"</span>");
}
if (showcomments == 'on'){
document.write("<span class='icomments'>"
+ListComments +
"</span> ");
}
if (showdate == 'on'){
document.write("<span class='idate'>"
+ M +
" "
+ D +
"</span>");
}
if (showcontent == 'on'){
document.write("<div class='icontent'>"
+ListContent +
"...</div> ");
}
document.write("</div></li>");
}if (showTotal == 'on'){
document.write("<div class='itotal'><span> <a href='"+ListBlogLink+"/search/label/"+ListLabel+"'>View all <font>"+TotalPosts+"</font> posts in → " +ListLabel+" </a></span></div>");
}
document.write("</ul>");
}
document.write("<script src='"+ListBlogLink+"/feeds/posts/default/-/"+ListLabel+"?alt=json-in-script&callback=mbtlist'></"+"script>");
</script>
- Replace http://www.techpuzz.com with your Blog URL.
- Mention number of posts to display in ListCount = 3;
- Replace SEO inside ListLabel = "SEO"; with your label/category for which you wish to display recent posts. Remember that labels are case sensitive. Therefore type it exactly as it is shown in your browser address bar. If your label is "blogging tips" and if you type it as "Blogging Tips" then it wont work. You must make sure that all letters are written in correct cases.
- Edit ChrCount = 45; to choose how many characters you wish to display in post description snippet/summary.
- Edit TitleCount = 66; to choose post title length.
- You can control the resolution or aspect ratio of thumbnails by editing ImageSize = 150; where the value 150 means that you want your images to be within 150 x 150 pixels in size. Make sure to keep this value close to the image size to ensure website load time is not effected a lot. Since our thumbnail images have a width of about 135px, therefore I have kept the resolution as 150, slightly higher to display images in slightly good resolution.
- To show an element simply choose on and to hide it choose off. You apply these switch on/off values to these 7 variables: showcomments, showdate, showauthor, showthumbnail, showlabel, showcontent, showTotal
- If you want to show recent posts published on your blog and don't wish to display posts from a specific label then simply remove /-/"+ListLabel+" from the code above. Switch off showTotal and also replace ListLabel = "SEO"; with this ListLabel = "";
Full Third Party Thumbnail Support
Our Recent Posts widget has the most robust coding algorithm which makes sure to use any available image from your post whether the image is hosted on your blogger Google album, Picasa or hosted somewhere else. It also has the built-in function to extract thumbnails from your YouTube video iframe. It will automatically display the YouTube thumbnail for a post where you may have embedded a YouTube video. In case the post contains no image at all, it will display a default image of MBT as shown below:
The image below shows recent posts for this blog.
No comments: