Recent Rotating Post Gadget with Excerpt For Blogger alphatre

Helplogger Home Blog DesignWidgets SEO Menus Po ... Recent Rotating Post Gadget with Excerpt For Blogger 8 comments This Javascript code will display the latest posts of any feed with the distinction of having two parts that can be used individually or combined. At the top this widget will show a single post along with the title (link), author, date and a brief summary of its content. In addition, this post will rotate automatically within a list whose number of elements will be decided by us. At the bottom, we'll find a full list with chosen posts that will change the post above when we mouse over them, thus breaking the automatic cycle. Before installing anything, let's see it in action to decide if it does what we want. Latest Posts How to Add Numbered Page Navigation Widget for Bloggerby Admin-Apr 04, 2014 In Blogger, we have the option to set the number of posts we want to display per page by going to the Settings menu > Posts ... How to Add Numbered Page Navigation Widget for Blogger 5 Easy Ways to Improve the SEO of a blog & Boost Traffic What is the difference between padding and margins? Add a Custom jQuery Lightbox To Blogger How to Use Cookies in Javascript How to Add CSS code To Blogger using Template Designer How to add custom Variable definitions to Blogger Understanding the Page Elements of a Blogger Layout How to Add Neat CSS3 Dropdown Menu in Blogger Share blog posts in social medias using Sharethis How to Add Recent Rotating Posts Widget to Blogger Step 1. Go toLayout> click onAdd a Gadgetlink. Step 2. From the pop-up windows, choose theHTML/Javascriptgadget Step 3. Paste this code inside the empty box:

Loading...

Customizations:The url in blue is the feed address. Obviously, the http://helplogger.blogspot.co maddress should be replaced with yours. Next isstart-index=1. This number indicates which post will appear first on the list. By default it is the latest post published on our blog, so if we want to begin displaying older posts, we need to change the 1 value. max-results=10indicates the maximum number of posts that we will be reading from the feed, beginning from the one that we have set up before in the start-index=1. This number always needs to be equal or greater to what we should see later and its purpose is to set the number of posts that will be shown in the gadget. The easy thing would be to put 500 in order not to fail, but the higher the number is, the longer the gadget will take to load, so it's better to adjust to what we need to show. Finally here are some other parameters of the script: title: 'Latest Posts', is the widget's title that appears on top. numResults: 10, number of posts that will show in the list displayTime: 5000, the delay time between posts in the rotator (in milliseconds) hoverTime: 500, minimum time for an item in the list to be displayed at the top. If you want to hide the list and show only the posts, then change this part: .gfg-list { position : relative; overflow : hidden; text-align : left; } to : .gfg-list { display:none; }and if you want to display only the list, then change this part: .gfg-entry { background-color: #FFFFFF; width : 100%; height : 9.2em; position : relative; overflow : hidden; text-align : left; margin-top : 3px; }to: .gfg-entry { display: none; } Step 4. Save the gadget and you're done. Enjoy! Like 3 Random Posts Add floating social media sharing buttons below Blogger post titles20/02/2014 - 1 Comments Customize the scroll bar (scrollbar) with JScrollPane25/09/2013 - 2 Comments How to add “Email Subscription Form” to Blogger Blogspot01/06/2012 - 50 Comments Related Posts: Show Recent Posts With Thumbnails F... Recent Posts Widget with Thumbnails... Simple Recent Posts Widget for Blog... How to Add Numbered Page Navigation... Share blog posts in social medias u... 8 comments: waren 11/23/2013 Is there perhaps something like the Minimum Comment Length on blogger? Love your blog! Reply Maestro 12/03/2013 Thank you for this. Is there a way to make it show images from the feed? Reply Anonymous 12/05/2013 Hi, can you make this for blogger? https://github.com /browserstate/ajaxify Reply Muhammad Ibnu Idris 12/20/2013 Thanks a lot guys. this is a good tutorial :) Reply Nwagboo Emmanuel 12/24/2013 i just did it, and its saved it, got an error reply. Reply Ahmad Raza 2/12/2014 your blog is very informative. i m add css code to my blog customize > Advance > Add CSS to add code now click on apply blog button to apply . view blog code is working. when i try to add another CSS code with the same steps but previous code already in the code box, i can't add 2nd code to css , so i m decided to eras the standing code in css box to add new code bcoz previous code is also working. so eras code and past new code and apply blog , when the new / 2nd code is working but the 1st / previous code is deleted and no more working ... Please help me i m upset for that. my blog address is . www.thaheemsoftwa re.blogspot.com Reply SAUNG INFO 2/26/2014 tq very much....i like it... Reply SAUNG INFO 2/26/2014 how if i want to add the thumbs? Reply Add comment Comment as: Sign out Notify mePublishPreview Privacy Policy| Disclaimer| Terms of Service| Sitemap Back to Top DMCA PROTECTED Search Search Follow on Facebook Helplogger Like 2,777 people like Helplogger . Facebook social plugin Follow on Blogger Subscribe via Email Receive Quality Tutorials Straight in your Inbox by submitting your Email below. Submit Or subscribe via RSS Feed Recent Posts How to Add Numbered Page Navigation Widget for Blogger 5 Easy Ways to Improve the SEO of a blog & Boost Traffic What is the difference between padding and margins? Add a Custom jQuery Lightbox To Blogger How to Use Cookies in Javascript Recent Comments Usman Kurniawan not work in my template :( ahmad why i cant use that ? or because my blog its nofollow ?? Anonymous hi admin g i want ask some query about blogging please tell or... JazzyJ Thanks so much! But how do you change the font type of the... Saumya SC Done.........Awesome.........Thanks a lot :) Popular Posts Simple Recent Posts Widget for Blogger/Blogspot Create A Rollover Image Effect (change image on mouseover) Recent Comments Widget For Blogger How to remove Blogger Picture/Image Shadow and Border Hide/Show Widgets /Gadgets in Home/post /static/archive pages in Blogger 3 Like