Awesome Animated Style of Recent post widget for Blogger

Awesome Animated Style  of Recent post widget for Blogger. 

It's very helpful and useful. It also very Attractive . Some people request me for nice recent post widgets for their Blog Site , so that today I Share It widgets, This widgets is Awesome Animated widgets.

I hope This widgets help to you and you like this widgets. 

Now Follow this instruction :

Step 1:   Go to your blogger Dashboard  and Click  Layout

Step 2:  Now  Add a  new Widget Like   HTML/JavaScript 

Step 3: Now Copy this Below Code and Pasted this Code  on       

                    this  Widget

Step 4: Then save and enjoy yourself .......

Note: Please Replace http://kisabuj.blogspot.com/ this with your Blog URL 

<style type="text/css">

#post-gallery{width:100%;margin:0 auto;font:normal 11px Arial,Sans-Serif;color:##000000;padding:8px}#post-gallery .rp-item{float:left;display:inline;position:relative;margin:2px;padding:0;background:url(http://i.imgur.com/Xgup3Hw.gif) no-repeat 50% 50%;width:79px;height:79px}#post-gallery .rp-item img{width:69px;height:69px;border:2px solid silver;border-radius:50%;margin:0!important;padding:0!important;background:transparent!important;display:none;-webkit-transition-duration:.8s;-moz-transition-duration:.8s;-o-transition-duration:.8s;transition-duration:.8s;-webkit-transition-property:-webkit-transform;-moz-transition-property:-moz-transform;-o-transition-property:-o-transform;transition-property:transform;overflow:hidden}#post-gallery .rp-item img:hover{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-o-transform:rotate(360deg)}#post-gallery .rp-item .rp-child{position:relative;top:10%!important;left:10%!important;z-index:1000;width:200px;background-color:#fff;border:2px solid #f56954;-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:initial;word-wrap:break-word;display:none;opacity:.9}#post-gallery .rp-item .rp-child h4{font-size:12px;margin:0 0 5px;color:#1BA1E2}#post-gallery .rp-item:hover .hidden{display:block}

</style>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>

<script type="text/javascript">

var rpTitle     = "Recent Posts", // This Widget Title

    numposts    = 14,      // How much Posts to show

    numchar     = 200,      // How much Characters to be displayed on hover

    rcFadeSpeed = 600,      // Slid Speed

    pBlank      = "http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.gif",      // If No Image

    blogURL     = "http://kisabuj.blogspot.com/";       // Your Blog URL Here

</script>