How to Add Recent Posts Widget in blogger

recent posts widget,blogger,how to add recent posts widget on blogger,simple recent post widget for blogger,recent post widget for blogger,how to add

Hello dear visitors welcome to our website - MR Laboratory. Today we will finish this article by discussing about How to Add Recent Posts Widget in blogger. Search on Google or visit mrlaboratory.info to know more about How to Add Recent Posts Widget in blogger article. See the table of contents to get an idea of the main topic of the article.

 

Recent Posts Widget in blogger


How to use a code to add a recent post box to a blogger site.

You can add Blogger's Recent Posts on any website as a Widget. today I will share js HTML CSS code for add e widget for the recent post..This will dynamically show your website posts. This means that if you make a new post, it will be added to the widget of that website immediately.

I have shared my code below, here you will put the link of your website and write down how many recent posts you can show.  


<style scoped='' type="text/css">

ul#recent-posts{list-style:none;margin:10px 0 0;border:1px solid #ddd;border-radius:7px;padding:5px 0;text-align:left}li.recent-posts{display:block;clear:both;background:#fff;border-bottom:1px solid #ddd;overflow:hidden;list-style:none;word-break:break-word;padding:8px;margin:0 0 5px;line-height:1.7;transition:all .3s}

li.recent-posts:last-child{border-bottom:0}

li.recent-posts a{color:#333;background:transparent}li.recent-posts a:hover{color:#222!important}

</style>

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

<script>

//<![CDATA[

var homePage = "https://www.mrlaboratory.info/",

numPosts = 10;

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">'+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>

Hopefully, this will work for you, you can not only use it on Blogger sites, it will work if you put it in any HTML code. thanks 😊😊






recent posts widget,blogger,how to add recent posts widget on blogger,simple recent post widget for blogger,recent post widget for blogger,how to add recent post widget in blogger,recent post by label widget for blogger,recent posts widget for blogger,stylish recent posts widget for blogger,how to add recent posts widget for blogger,recent posts widget with thumbnails blogger,recent posts widget with thumbnails for blogger,recent posts,widget recent post blogger,

You are indeed a valuable reader of mrlaboratory. Thank you very much for reading the article about How to Add Recent Posts Widget in blogger. Please let us know how you feel after reading this article. Read more:-

Next Post Previous Post
3 Comments

You cannot comment with a link / URL. If you need backlinks then you can Contact with us

  • Star Cường IT
    Star Cường IT August 20, 2021 at 11:12 AM

    Let's interact!
    Love from: starcuongit.com

    • Md Mijanur Rahaman (MR)
      Md Mijanur Rahaman (MR) August 20, 2021 at 11:49 AM

      Thanks ❤💖

  • Unknown
    Unknown August 24, 2021 at 11:32 AM

    thanks for sharing

    কুরআনিক শিক্ষা | বাংলা ইসলামিক ব্লগ

Add Comment
comment url