Add Animated Recent Post Widget to Blogger is an amazing way to introduce your blog's posts to users and readers of your website in appropriate manner. As you know in previous articles i have shared many blogspot widgets which are liked by many users such as Recent Comments with Avatar Widget for Blogger and other related gadgets. But i have never shared Recent Post Widget for Blogger in this website, so today i have decided to share an awesome recent post widget with animated style with rolling rounded effect. It is superior than others due to its animated user friendly look. My friends frequently search for this type of plugin on internet but their attempts went in vain. So for helping my colleagues and readers i have written this post on it. Okay now we start the process of learning more about it.
This cool animated recent post widget will not surely boost the beauty of posting view style but also increase the chances to get more pageviews and impressions on your site. This best thing of this plugin is that whenever users hover mouse on any rounded post icon it will show its description to user in clean and simple rectangle view shape with light shadow. If you want to see its demo that how it looks then click on the below link to see its demo.
Adding Animated Recent Post Widget in Blogger
1. Log-in to your Blogger Dashboard >> Template >> Edit HTML
2. Search for ]]> and paste the below CSS code just above ]]>
#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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgq7H8vUALBylCPXR_tczcZwIqZe91RzRzNUk93qxcPk455FjBPZmWqcTN-Ntb_vpqRQKxcKC_LSuIlsINgA0wkVVN7WLaQG6WoXHyh_xF8J7Ni8UgmiwziFL_YjEmpuS7Yoil69u5JLHNd/s1600/please-wait.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}
3. Now Go to Layout, click on Add a Gadget link, a popup page will appear now scroll down the page and select HTML/JavaScript option and paste the below JavaScript Code into that box..
- Change http://www.bloggercell.com/ with the Address URL of your blog
4. Now finally save your settings.
Note: This gadget is completely customizable, so you can easily customize it with your desires, We do not recommend you to modify it if you are newbie and not having much knowledge about blogspot template. But of you really want to modify it according to your web template's widget, height and style then do the following...
- Change 12 with your desire value, If you want to increase or decrease number of posts view
- If you want to show more description characters then simply replace 200 with your desire value
- Replace 600 to any value, if you want to decrease or increase speed of rounded effect
Hope you would like Attractive Animated Recent Post Widget for Blogger. If you have any issue regarding to this gadget like installing issue then do not panic just drop your question in below comment box, i eagerly reply you as soon as possible. I must try my best to reply your all questions in 24 hours. Do not forget to share this article with your friends on social media sites.
Add Animated Recent Post Widget to Blogger is an amazing way to introduce your blog's posts to users and readers of your website in appropriate manner. As you know in previous articles i have shared many blogspot widgets which are liked by many users such as Recent Comments with Avatar Widget for Blogger and other related gadgets. But i have never shared Recent Post Widget for Blogger in this website, so today i have decided to share an awesome recent post widget with animated style with rolling rounded effect. It is superior than others due to its animated user friendly look. My friends frequently search for this type of plugin on internet but their attempts went in vain. So for helping my colleagues and readers i have written this post on it. Okay now we start the process of learning more about it.
This cool animated recent post widget will not surely boost the beauty of posting view style but also increase the chances to get more pageviews and impressions on your site. This best thing of this plugin is that whenever users hover mouse on any rounded post icon it will show its description to user in clean and simple rectangle view shape with light shadow. If you want to see its demo that how it looks then click on the below link to see its demo.
Adding Animated Recent Post Widget in Blogger
1. Log-in to your Blogger Dashboard >> Template >> Edit HTML
2. Search for ]]> and paste the below CSS code just above ]]>
#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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgq7H8vUALBylCPXR_tczcZwIqZe91RzRzNUk93qxcPk455FjBPZmWqcTN-Ntb_vpqRQKxcKC_LSuIlsINgA0wkVVN7WLaQG6WoXHyh_xF8J7Ni8UgmiwziFL_YjEmpuS7Yoil69u5JLHNd/s1600/please-wait.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}
3. Now Go to Layout, click on Add a Gadget link, a popup page will appear now scroll down the page and select HTML/JavaScript option and paste the below JavaScript Code into that box..
- Change http://www.bloggercell.com/ with the Address URL of your blog
4. Now finally save your settings.
Note: This gadget is completely customizable, so you can easily customize it with your desires, We do not recommend you to modify it if you are newbie and not having much knowledge about blogspot template. But of you really want to modify it according to your web template's widget, height and style then do the following...
- Change 12 with your desire value, If you want to increase or decrease number of posts view
- If you want to show more description characters then simply replace 200 with your desire value
- Replace 600 to any value, if you want to decrease or increase speed of rounded effect
Hope you would like Attractive Animated Recent Post Widget for Blogger. If you have any issue regarding to this gadget like installing issue then do not panic just drop your question in below comment box, i eagerly reply you as soon as possible. I must try my best to reply your all questions in 24 hours. Do not forget to share this article with your friends on social media sites.
by Jillur Rahman
Jillur Rahman is a Web designers. He enjoys to make blogger templates. He always try to make modern and 3D looking Templates. You can by his templates from Themeforest.
Follow him @ Twitter | Facebook | Google Plus
No Comment