Professional Magazine Blogger Templates Read More ×

Friday, March 13, 2015

Awesome Animated recent post widget for Blogger

JSC Result 2016

www.nuedubd.com/jsc16

JSC Result 2016 will publish on 31th December 2016 Under Ministry of Education, Bangladesh. Check Your JSC Exam Result 2016 FAST!
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
SHARE THIS
Subcribe for our all latest news and updates

Subscribe Now

Previous Post
Next Post
Monetize your website traffic with yX Media
True Mag

7 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