Awesome Animated recent post widget for Blogger

Awesome Animated recent post widget for Blogger

Blogger Awesome Animated recent post widget

Blogger Animated recent post widget - is more attractive and useful. Some users requested me for blogger recent post widget. Okay, Today i am sharing a widget for blogger recent post widget. This widget with awesome and beautiful rotate animation. 

Some times we have to need a widget for recent post. Because when a visitor visit on static page or post then he/she could't see other recent posts. If you put a widget of recent post then all visitors are see your recent post. Okay, Now let's stat. Before starting you may see the results of this widget.


Step 1 - Go to your blogger dashboard and click on Edit Template.
Step 2 - Now Save the below CSS before ]]></b:skin> or </style>
 #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}

Step 3 - Save The Template and Click on Layout
Step 4 - Add a new gadget like HTML/Javascript and save the below javascript.
<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",       // Widget Title
    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://your-blog.blogspot.com/";       // Your Blog URL
</script>
<script src="https://ms-design.googlecode.com/svn/animated-recent-posts.js" type="text/javascript"></script>

Note: "http://your-blog.blogspot.com/" replace this with your blog url.

Now enjoy the awesome animated widget with your blog. If you find any problem then inform me on comment section. Happy Blogging and keep sharing our posts... Thanks
Previous Post
Next Post

post written by:

TemplateMark better known as Template Market provides High quality free and premium Blogger templates. If you running a blog with Blogspot platform, then you can choose more than 20+ free blogger templates for your blog. TemplateMark provides free version of every template. You can highly choice TemplateMark for your digital blog.

9 comments:

  1. Vai animated lagbena.Apnar site er tai den.Animated ta dite gele amar blog er shomosto page jure post eshe porse.Onek shomossha kortese.

    ReplyDelete
    Replies
    1. আপনি " numposts = 14, পরিবর্তন করে কমিয়ে দিন। এখানে যত সংখ্যা থাকবে ততগুলো পোষ্ট শো করবে।

      Delete
  2. Na bepar eita na.Apnar ei widget ta save korle jokhoni amar blog load kori tokhon puro blog er upor recent post gular layer eshe porse.Mane blog Dhaka pore jasche.

    ReplyDelete
  3. খুব সুন্দর হইছে!!!!!!!!!!!!!!!!!!!!!!!

    ReplyDelete
  4. sir plz tell how i add post title smae your template mean after three post i add title and show more buttton in title box

    ReplyDelete
  5. sir plz reply how i add lable in after three post plz sir solve my issue how i add title mean lable after every three post

    ReplyDelete
  6. Nice info
    Visit for more www.asadnoultech.com

    ReplyDelete