How To Add Recent Post Widget To Blogger Easily
Some blog owners find it scary to go to their blog template and add certain features, thereby leaving their blogs without some important widget for SEO, If you are in that category of persons, then this is the nice post for you.
This recent post widget can be added without going to your blogger template to make certain changes, which may later result to what you are so much afraid of, which is messing up your template.
This recent post widget is actually very safe to use also enough to brighten you blog look in its beauty and holiness.
with out much talks, lets get to the process/steps/method.
Steps to add Recent post Widget to blogger
Like I mentioned above, you don't need to visit your template region for this work, is simply by adding a code to your gadget directly and save see. Steps below.Step 1: Log on to blogger.com and select the blog you want to add related post widget.
Step 2: Locate Layout in the menus after your selected blog have been opened.
<script type="text/javascript">
function showlatestpostswiththumbs(t){document.write('<ul class="recent-posts-container">');for(var e=0;e<posts_no;e++){var r,n=t.feed.entry[e],i=n.title.$t;if(e==t.feed.entry.length)break;for(var o=0;o<n.link.length;o++){if("replies"==n.link[o].rel&&"text/html"==n.link[o].type)var l=n.link[o].title,m=n.link[o].href;if("alternate"==n.link[o].rel){r=n.link[o].href;break}}var u;try{u=n.media$thumbnail.url}catch(p){s=n.content.$t,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),u=-1!=a&&-1!=b&&-1!=c&&""!=d?d:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifLj37MPtrp4I6C-ajBsYXDCeec5BsjARgA0tOBiZfpL6J2WjaCLhbI8Ti-DB1vZUY-5UORy3hCUZgr-zzIOCMNUgN90qSlONyYTU7LbYS7BPFMDIU2MlnNu6yVYRoVnHlOYGcjZigamDn/s1600/no-thumb.png"}var h=n.published.$t,f=h.substring(0,4),w=h.substring(5,7),v=h.substring(8,10),A=new Array;A[1]="Jan",A[2]="Feb",A[3]="Mar",A[4]="Apr",A[5]="May",A[6]="Jun",A[7]="Jul",A[8]="Aug",A[9]="Sep",A[10]="Oct",A[11]="Nov",A[12]="Dec",document.write('<li class="recent-posts-list">'),1==posts_date&&document.write('<div class="post-date">'+A[parseInt(w,10)]+" "+v+" "+f+"</div>"),1==showpoststhumbs&&document.write('<a href="'+r+'"><img class="recent-post-thumb" src="'+u+'"/></a>'),document.write('<div class="recent-post-title"><a href="'+r+'" target ="_top">'+i+"</a></div>");var g="",k=0;document.write('<div class="recent-posts-details">'),1==showcommentslink&&(1==k&&(g+=" <br> "),"1 Comments"==l&&(l="1 Comment"),"0 Comments"==l&&(l="No Comments"),l='<a href="'+m+'" target ="_top">'+l+"</a>",g+=l,k=1),1==readmorelink&&(1==k&&(g+=" | "),g=g+'<a class="readmorelink" href="'+r+'" class="url" target ="_top">Read more</a>',k=1),document.write(g),document.write("</div>"),document.write("</li>")}document.write("</ul>")}
</script>
<script type="text/javascript">
var posts_no = 5;var showpoststhumbs = false;
var readmorelink = true;
var showcommentslink = true;
var posts_date = true;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs"></script>
<a style="font-size: 9px; color: #CECECE; float: right; margin-top: 5px;" href="http://blogwox.blogspot.com/2016/09/Recent-post-widget-for-blogger.html">Recent Posts Widget</a>
<noscript>Your browser does not support JavaScript!</noscript>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>
<style type="text/css">
img.recent-post-thumb {padding: 2px; width:35px;height:35px;float:right;margin: -14px 0px 0px 5px; border: 1px solid #cea5ac; border-radius: 10%;}
.recent-posts-container {font-family: 'Oswald', sans-serif; float: left;width: 100%;min-height: 70px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}
ul.recent-posts-container li {padding:5px 0px;min-height:65px; list-style-type: none; margin: 0px 10px 5px 35px;}
ul.recent-posts-container {counter-reset: countposts;list-style-type: none;}
ul.recent-posts-container li:before {content: counter(countposts,decimal);counter-increment: countposts;z-index: 2;position:absolute; left: 5px; font-size: 16px;color: #4D4D4D;background: #F7F7F7;padding: 9px 14px; border: 1px solid #efefef;}
.recent-posts-container a { text-decoration:none; }
.recent-posts-container a:hover{color: #000000;}
.post-date {color:#000000; font-size: 11px; }
.recent-post-title a {font-size: 13px; text-transform: uppercase; color: #eb7303;}.recent-post-title { margin: 5px 0px; }
.recent-posts-details {border-top: 4px solid #eb7303; margin-top: 5px; padding-top: 5px;}
.recent-posts-details a{ color: #888;}
a.readmorelink {color: #000000;}</style>
Step 6: click save and that's all.
Visit your blog and you will find the recent post widget displayed in your slidebar, if you want this widget to blend well with your template, it can be customized, learn how below.
Customization
To make this customization easier, you will need to open the gadget the code was added, click anywhere in the code and hit Ctrl+F keys if you are using window, for Mac, Hit Cmd+F keys to pop out a search box. Copy and paste the code you want to make changes to, it will lead you directly to its location.
- Change to hover color, look for this code line .recent-posts-container a:hover{color: #000000;} and change to color of your choice
- Change the Read more link color look for the line a.readmorelink {color: #000000;} and swap to any color of your choice.
- Change the border color(the horizontal line displayed below every post title) Look for this code .recent-posts-details {border-top: 4px solid #eb7303 and change to your desired color.
- Change the number of posts to appear locate this line of code var posts_no = 5; change from 5 to any number you prefer.
- Change post title color, find this line of code .recent-post-title a {font-size: 13px; text-transform: uppercase; color: #eb7303;} change to your desired color.
- Change the post date color and Size, locate this code line .post-date {color:#000000; font-size: 11px; } edit to your personal teste.
EmoticonEmoticon