An Unusual Animated Recent Post Widget To Add To The Blogspot Site

Assalamu Alaikum blogspot masters I hope everyone is good. Today, for blogspot masters, a wonderful new post widget is also re-animated. Those who have  regularly visited my blog for updates to the blogspot may have seen this post. Although posted on my blog in English. Whatever happens. I'm posting this post on some people. Today I have come up with this post for those who mail me, comment and Facebook inbox. I think there must be a widget of the latest publication on each blogspot site. Its importance and effectiveness are many. So today you will see step by step how to add the Recent post widget. Before coming to see the demo.

Demo saw! I hope you like it. So let's start working now. And hey, do not forget to back up your template before starting work. Step 1:  First go to the dashboard of your blogspot site. Then click on "Template" and click "Edit Template". Step 2:  Press "Ctrl + F"  ]]> </ b: skin>  find this code and paste it on the following CSS code  ]]> </ b: skin> .  

#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( 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 now. 
Step 4:  After saving the template, click on Layout and open a new "HTML / Javascript" widget and paste the code below into this widget and save the widget. And hey, this widget will show this but recent posts. Therefore, create new widgets where you need to show recent posts. 
<script src='' 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 = "", // If No Image blogURL = ""; // Your Blog URL </script> <script src="" type="text/javascript"></script> 

Note: Change this text with your blog's URL.
That's right, the job is over. Stay Awesome! Awesome Animated Recent Post Widget If there is any problem tell tunement.

Post a Comment