How To Add Scrolling Recent Posts Gadget In Blogger

Recent posts gadget for blogger

Previously I have shared many useful gadgets like popular post gadget, related posts gadgets, content slider, random post widget etc as it helps in increasing page views and every blogger need these gadgets. Today I am sharing a similar gadget which is also helpful in increasing pageviews, its a recent posts gadget. This is not an ordinary recent posts gadget, its special because it slides posts automatically. This gadget is widely used in blogs and is very popular.

It displays recent articles of a blog. It automatically slides posts which are created recently. It works on jquery, you don't need to update it for each time you create a post. It will automatically display your recent posts. You can see a snapshot of recent posts gadget below. To add this gadget in your blog follow below mentioned steps:

Snapshot:


How to add recent posts gadget in blogger

You may also like:
Step 1: Go to blogger dashboard.

Step 2: Select layout and click on add a gadget.

Step 3: Scroll down to Html/javascript and copy the below code.
Step 4: Paste it in the Html/javascript window.

Step 5: Replace https://101helperblogspot.com with your blog's link and also change https://yourblog.blogspot.com with your blog link in the end of the code similar to below shown code.
    <script src="https://yourblog.blogspot.com/feeds/posts/default?max-results=12&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts"></script>

    Step 6: Click on Save and you are done. 

    This gadget has cool effects also like when a thumbnail is hovered by mouse it becomes round and fades out. This gadget slides your content automatically and when a post is hovered its background color is also changed. You can customize it if you have a little knowledge about Css. Some easy things that you can customize in this gadget without having knowledge about Css are discussed below. If you want to customize this gadget as you like then learn it by reading below.

    Customization:

    To Change Number Of Posts:

    Change 12 to desired number of posts in numposts = 12;

    To Change Images Size:

    To change thumbnail size make changes in below piece of code:

    thumbwidth = 50; 
    thumbheight = 50;

     To make change is Post's Summery:

     Make changes in summaryPost = 40;

    To Change Font Size:

    Make changes in summaryFontsize = 10;

    To Change Border Color:

    Make changes in borderColor = "#232c35"; // Get Code Of A Color!

    To Customize Time Interval:

    Make changes in intervalspy=4000; // 4000 means 4 seconds!

    To Change Font Size:

    Make changes in fntsize = 15;

     To Show Or Hide Number Of Comments:

    Replace true with false in showPostDate = true;

    You will find all the customizable part of code at the end of the code in Javascript section!

    I hope you like this gadget. If you have any problem regarding this post ask me in comments or contact me. Share this post with others if you like it. Follow and subscribe to get latest news about blogger gadgets. 

    Search Tags: Recent posts gadget for blogger, how to add recent posts gadget in blogger, Display recent posts in blog, add recent posts gadget in blogger, free blogger gadgets, related posts gadget with thumbnails for blogger, 101Helper gadgets for blogger, how to increase blog traffic. 

    Comments

    Post a Comment