Recent Posts Blogger Widget with Hover Animation
close
Recent Posts Blogger Widget with Hover Animation

Recent Posts Blogger Widget with Hover Animation

Recent Posts Blogger Widget with Hover Animation

Hello today I have any brand new blogger widget for blogger users and this is recent post blogger widget I have given't gave it any name but in this article we are calling it recent post blogger widget with hover animation.

Before going ahead let me show you the demo of this recent post blogger widget.

Demo:

View Demo

So you can see the demo above it looks beautiful this widget is very beautiful I also like it and love it by the way that's my profile on codepen.io website that's kind of IDE for developers.

So now it's time to build this blogger widgets here is the source code and steps how to implement this blogger widget in blogger you should have to follow the steps as they are provided if you have knowledge about blogger then you can also customise this visit according to your requirements.

Steps To Follow:

  1. Go to Blogger Dashboard
  2. Go to Layout Section
  3. Click Add New Widget
  4. Choose HTML/Javascript Widget from list of blogger widgets.
  5. Choose the best location to show this widget the location which i recommend you is just above or below comments section.
  6. Copy the code provided below and paste as widget content.
  7. <style>body{background:#efefef;font-family:Roboto,sans-serif}a{text-decoration:none;color:#000}.container{width:550px;margin:0 auto}.post{display:flex;width:100%;justify-content:center;align-items:center;margin:0 0 20px 0;overflow:visible;border-radius:4px;transition:.5s ease}.post:hover>.preview:before{transition:.3s;width:350px;background-size:80%}.post .preview{min-width:190px;text-align:center;transition:.3s;position:relative}.post .preview:before{content:"";transition:.3s;position:absolute;width:300px;height:100%;border-radius:10px;left:0;top:0;z-index:-1;clip-path:polygon(0 99%,0 0,100% 0,65% 100%);box-shadow:inset 4px 5px 100px 0 rgba(0,0,0,.5)}.post .preview span{font-size:22px;font-weight:900;margin:58px 0;display:block;text-transform:uppercase;letter-spacing:-1px;color:#fff;opacity:0}.post .content{transition:all .3s ease;padding:20px;margin:0 10px 0 0;position:relative}.post .content span{font-size:13px;letter-spacing:.3px;line-height:1.5;color:#000;position:relative;z-index:5;padding:5px;display:block;min-width:300px;background:#fff}.post .content .bg_clip{position:absolute;top:0;left:0;width:100%;height:100%;transition:.3s ease;background:#fff;border-radius:10px;text-overflow:hidden}.credit *{z-index:999999}.credit{position:absolute;margin:10px 10px;background:tomato;padding:1px 6px;color:#fff;border-radius:50%;text-align:center;opacity:.2;text-decoration:none;transition:.3s opacity;top:0;left:0}.credit:hover{opacity:1}.credit .tooltiptext{visibility:hidden;width:120px;font-size:10px;background-color:tomato;color:#fff;text-align:center;border-radius:6px;padding:5px 0;position:absolute;top:150%;left:50%;margin-left:-60px}.credit .tooltiptext strong{color:inherit;font-weight:200;border-bottom:1px dotted #000}.credit .tooltiptext::after{content:" ";position:absolute;bottom:100%;left:50%;margin-left:-5px;border-width:5px;border-style:solid;border-color:transparent transparent tomato transparent}.credit:hover .tooltiptext{visibility:visible}</style>
    <div id='recent-posts'>
    <script type='text/javaScript'>
    //<![CDATA[
    var rcp_website="https://www.softwebtuts.com",rcp_numposts=5,rcp_snippet_length=150,rcp_info="yes",rcp_comment="Comments",rcp_disable="yes",rcp_thumbs_wid=300,rcp_thumbs_hei=190,rcp_ytthumbsize=0,rcp_title="yes";function recent_posts(t){var e="";a=location.href,y=a.indexOf("?m=0"),e+='<div class="container">';for(var s=0;s<rcp_numposts;s++){var r=t.feed.entry[s],i=r.title.$t;if("content"in r)var n=r.content.$t;else if("summary"in r)n=r.summary.$t;else n="";if((n=n.replace(/<[^>]*>/g,"")).length<rcp_snippet_length);else{var l=(n=n.substring(0,rcp_snippet_length)).lastIndexOf(" ");n.substring(0,l)+"…"}for(var p=0;p<r.link.length;p++){if("thr$total"in r)var c=r.thr$total.$t+" "+rcp_comment;else c=rcp_disable;if("alternate"==r.link[p].rel){var o=r.link[p].href;-1!=y&&(o+="?m=0");var m=r.published.$t;if("media$thumbnail"in r)var _=r.media$thumbnail.url;else _="http://lh3.ggpht.com/--Z8SVBQZ4X8/TdDxPVMl_sI/AAAAAAAAAAA/jhAgjCpZtRQ/no-image.png"}}var u=_.replace("/s72-c/","/w"+rcp_thumbs_wid+"-h"+rcp_thumbs_hei+"-c/").replace("/default.jpg","/"+rcp_ytthumbsize+".jpg"),d=rcp_numposts+1555,h=Math.floor(Math.random()*(+d-1))+1;e+="<style>.post .post-item-"+h+":before {background: url("+u+') 0 50%;background-size: 100%;}</style><div class="post"><div class="preview post-item-'+h+'"><a href="https://www.softwebtuts.com" rel="dofollow" class="credit">ⓘ<strong class="tooltiptext">This widget is made by <strong>M.Muzammil</strong></strong></a><span>View</span></div>',e+='<a class="content" href="'+o+'" rel="nofollow" title="'+i+'">',"yes"==rcp_title&&(e+="<span>"+i,"yes"==rcp_info&&(e+="<br/><small>"+m.substring(8,10)+"/"+m.substring(5,7)+"/"+m.substring(0,4)+" - "+c+"</small>"),e+="</span>"),e+='<div class="bg_clip"></div></a></div>'}e+="</div>",document.getElementById("recent-posts").innerHTML=e}document.write('<script type="text/javascript" src="'+rcp_website+"/feeds/posts/default?alt=json-in-script&max-results="+rcp_numposts+'&callback=recent_posts"><\/script>');
     //]]>
    </script>
    </div>
  8. Save Widget

You are all done you have just implemented this blogger widget into your blogger blog now go and have a look on your blog that this widget is working or not if not in the comment section I will resolve it.

Customizations in the above:

In the code provided above you have to make some customisation. Here is a list of that customizations that are you have to do in the above code.

ReplacementDescription
https://www.softwebtuts.com Replace this URL with the URL of your blogger blog.
rcp_numposts=5 Replace 5 with the number of posts to show in this widget by default you will see 5 posts.

You can customize the above 2 things only there are some other setting that can also be customized but without customizing this widget will work perfectly.

Conclusion:
In the end I want to say that if you want any other blogger widget with this style comment below.
Disqus Codes

No comments

Notifications

Disqus Logo