Add Recent post Widget with hover effect in blogger

Click Below Ad for Leaning Blogging Tricks.

Next Blogger Tricks

Hello Bloggers Prajjwal Today i am going to show how to Add Recent post Widget with hover effect in blogger
this widget has amazing and wonderful design This widget shows only latest your blog post in it it work on CSS and JavaScript.
Also Read:-Add Automated Featured Post Widget in Blogger
It is has fully responsive optimized with hover effect mean when your blog visitor enterd your blog then mouse placed in this widget then this animated automatically . This widget is very attractive it has a loading effect feature this thing make this widget is more awesome once you have seen this widget demo, add this widget in your blog
Check Live Demo:--

How To add Recent post Widget with hover effect in blogger:-

• Go to Blogger dashboard>>Layout >>Add Gadget
• Choose HTML/JavaScript Gadeget
• Paste below given code in widget

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>
<style type="text/css">
#post-gallery {width:100%; margin:0px auto;font:normal 11px Arial,Sans-Serif;color:##000000;padding:8px;}
#post-gallery .rp-item {float:left;display:inline;  position:relative;  margin:2px;  padding:0px 0px;  background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpGMDn6pgq3vwrgWMF6MAmZX3TtSeoXWVlduFljT1Riwsm3EqGvKLDDb-s9JNopqUgNhwFiavzWv640MRistyisOQCI_qHkVGkjxP5KPvnl3sTW1GhLFuHWWVBz14yqvv_-YS8qnRGrOGh/s1600/LOAD+(66).gif') no-repeat 50% 50%;  width:79px;  height:79px;}
#post-gallery .rp-item img {  width:69px;  height:69px;  border:none !important;  margin:0px 0px !important;  padding:0px 0px !important;  background:transparent !important;  display:none;}
#post-gallery .rp-item img:hover{-moz-transform: scale(1.2) rotate(-350deg);-webkit-transform: scale(1.2) rotate(-350deg);-o-transform: scale(1.2) rotate(-350deg);-ms-transform: scale(1.2) rotate(-350deg);transform: scale(1.2) rotate(-350deg);-webkit-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);-moz-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);}
#post-gallery .rp-item .rp-child {  position:relative;  top:10%!important;  left:10%!important;  z-index:1000;  width:200px;  background-color:white;  border-bottom:5px solid #1BA1E2;  -webkit-box-shadow:5px 5px 10px rgba(0, 0, 0, 0.7);  -moz-box-shadow:5px 5px 10px rgba(0, 0, 0, 0.7);  box-shadow:5px 5px 10px rgba(0, 0, 0, 0.7);  padding:10px 15px;  overflow:hidden;  word-wrap:break-word;  display:none;  opacity: 0.9;}
#post-gallery .rp-item .rp-child h4 {  font-size:12px;  margin:0px 0px 5px;  color:#1BA1E2;}
#post-gallery .rp-item:hover .hidden {display:block;}</style>
<script type="text/javascript">
var rpTitle     = "Recent Posts",       // Related posts
    numposts    = 14,      // Number of Posts to show
    numchar     = 200,      // Number of Characters to be displayed
    rcFadeSpeed = 600,      // Speed
    pBlank      = "http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.gif",      // If No Image
    blogURL     = "http://softwayrko.blogspot.com/";       // Your Blog URL
</script>
<script src="https://dl.dropboxusercontent.com/u/76401970/All%20Blogger%20Tricks/abt-recent-posts.js" type="text/javascript"></script>

• Replace  14 with number of post shown in this widget
• Replace http://softwayrko.blogspot.com/ with your blog URL
• Save it!
• Enjoy

Final Words

I hope this widget are successfully add in your blog if not please write your problem in comment box for his problem solutions Happy Blogging!