HOW TO ADD RECENT POSTS Widget on Blogger

HOW TO ADD RECENT POSTS Widget on Blogger
You are currently viewing HOW TO ADD RECENT POSTS Widget on Blogger

 HOW TO ADD RECENT POSTS Widget on Blogger 

 

 

If you want to put recent post widgets in the side bar of blogger website, then what you have to do. it’s a very simple process, 

  • 1.first you have to go to the layout section of your blogger
  • 2. go to  the side bar. 
  • 3.You have to click on add a gadget, after clicking on add a gadget
  • 4. you will get a popup from which you have to select HTML/JavaScript
  • 5. there you have to write RECENT POSTS first in the title bar
  • 6.  in the content  you have to paste a code To do. Where to get the code The link is given in the description of this video where two codes will be found.
    • 1.CODE FOR RECENT POSTS Widget on Blogger Without thumbnail
    • 2.CODE FOR RECENT POSTS Widget on Blogger With thumbnail

1.CODE FOR RECENT POSTS Widget on Blogger Without thumbnail– If you want to show only title in blog post then you have to paste CODE 1

2.CODE FOR RECENT POSTS Widget on Blogger With thumbnail– If you want to show both title and thumbnail in blog post then you have to paste CODE 2.

1.CODE FOR RECENT POSTS Widget on Blogger  Without thumb 

<style scoped='' type="text/css">
ul#recent-posts{list-style:none;margin:0;padding:0}li.recent-posts{display:block;clear:both;overflow:hidden;list-style:none;border-bottom:1px solid #e3e3e3;word-break:break-word;padding:10px 0;margin:0;}
li.recent-posts:last-child{border-bottom:0;}
li.recent-posts a{color:#444;}li.recent-posts a:hover{color:#444;text-decoration:underline}
</style>

<ul id="recent-posts"></ul>

<script>
//<![CDATA[
var homePage = " PASTE YOUR WEBSITE URL HERE ex- https://www.freshvila.com/",numPosts = 5;

function recentPosts(a){if(document.getElementById(“recent-posts”)){var e=a.feed.entry,title,link,content=””,ct=document.getElementById(“recent-posts”);for(var i=0;i<numPosts;i++){for(var j=0;j<numPosts;j++){if(e[i].link[j].rel==”alternate”){link=e[i].link[j].href;break}}var title=e[i].title.$t;content+='<li class=”recent-posts”><a href=”‘+link+'” title=”‘+title+'” target=”_blank” rel=”nofollow”>’+title+'</a></li>’}ct.innerHTML=content}}var rcp=document.createElement(‘script’);rcp.src=homePage+’/feeds/posts/summary?alt=json-in-script&orderby=published&max-results=’+numPosts+’&callback=recentPosts’;document.getElementsByTagName(‘head’)[0].appendChild(rcp); //]]> </script>

 

2 .CODE FOR RECENT POSTS Widget on Blogger With thumb

 

<script type=’text/javascript’> //<![CDATA[ var homePage = ” PASTE YOUR WEBSITE URL HERE ex- https://www.freshvila.com/“,numPosts = 5; function recentPosts(e){if(document.getElementById(“recent-posts”)){for(var t,s,r=e.feed.entry,n=””,a=document.getElementById(“recent-posts”),l=0;l<numPosts;l++){for(var c=0;c<numPosts;c++)if(“alternate”==r[l].link[c].rel){s=r[l].link[c].href;break}”media$thumbnail”in r[l]?u=r[l].media$thumbnail.url.replace(/.*?:///g,”//”).replace(//s[0-9]+-c/g,”/s90″):u=”https://1.bp.blogspot.com/-jHWwEwTEwQ4/WJJ4k71QSYI/AAAAAAAApVc/XO_OitR_VGQS_Wquq1pv1h1D-dgiejSuQCLcB/s90/nothumb_large.png”;var t=r[l].title.$t;n+='<li class=”recent-posts”><img src=”‘+u+'” alt=”‘+t+'”><div class=”title_post”><a href=”‘+s+'” title=”‘+t+'” target=”_blank”>’+t+”</a></div></li>”}a.innerHTML=n}}var rcp=document.createElement(“script”);rcp.src=homePage+”/feeds/posts/summary?alt=json-in-script&orderby=published&max-results=”+numPosts+”&callback=recentPosts”,document.getElementsByTagName(“head”)[0].appendChild(rcp); //]]> </script> <style> ul#recent-posts{width:100%;margin:0 auto;padding:0!important;list-style-type:none} ul#recent-posts li{background:#FFF;padding:0!important;margin-bottom:10px;overflow:hidden;width:100%;height:auto;-webkit-box-shadow:2px 2px 3px rgba(0,0,0,.05);-o-box-shadow:2px 2px 3px rgba(0,0,0,.05);-ms-box-shadow:2px 2px 3px rgba(0,0,0,.05);box-shadow:2px 2px 3px rgba(0,0,0,.05);} ul#recent-posts li img{width:90px;height:70px;margin-right: 15px;float:left;} ul#recent-posts li .title_post{padding:10px!important;line-height: 1;position:relative;text-align:left} ul#recent-posts li a{color:#333;font-family:inherit;font-size:14px;font-weight:500;text-decoration:none} ul#recent-posts li a:hover{color:#FF1744;} ul#recent-posts:after{content:&quot;&quot;;display:block;clear:both} </style> <ul id=”recent-posts”></ul>













	
	
		

		
Leave a Reply