Add a Popular Posts Gallery just above your Blogger posts alphause

Po ... Add a Popular Posts Gallery just above your Blogger posts 26 comments The most strong and popular web design trend over last couple of years is a sliding horizontal panels also known as Sliders or Carousels. It's a very effective method to increase the web site usability and engage the user. This widget shows the most popular 10 posts on your blog just above your Blogger posts. You can see the Demo on my blog. Let's start adding it Before adding it you should know that this widget is not fully compatible with all templates, so please make a backup before making any changes to your blogger template. Now, follow these steps: 1.Go to Dashboard - Template - Edit HTML - click anywhere inside the code area and press the CTRL + F keys to open the Blogger' search box 2. Type or paste this piece of code inside the opened search box: ]]>Note: you might need to click on the arrow next to it and after try to find ]]> again. 3. Just above/before it, add the following code: #gallery{position:relative;margin:0 35px 20px;width:590px;height:126px;background:#ffffff} #gallery .belt{position:absolute;top:0;left:0;list-style-type:none} #gallery .panel{float:left;margin:20px;width:84px;height:86px;background:url( http://2.bp.blogspot.com /-_Srvna_zg0M/T393_LXqDLI /AAAAAAAABrQ/_t2GmPexCHo /s1600/bg-slider.png) bottom center no-repeat;overflow:hidden} #gallery .panel img{float:left;border:1px solid #DDD;margin:5px;width:72px;height:72px;background:#FFF;padding:0px} #gallery .panel img:hover{filter:alpha(opacity=50);-moz-opacity:0.5;-khtml-opacity:0.5;opacity:0.5}Note: you can adjust the size of gallery, changing the values in red (590 and 126). 4. Now search for the following piece of code: 5. Just above/before it, add this code: Next thing to do is to place the widget just above the blogger posts. 6. Search for this code: ...or if you can'find it, search for this one: 7. Just below it, add the following code:

• 

Note: delete the fragments of code in blue if you want this widget to be displayed in posts pages also. 8. Preview and if everything is ok, Save the Template. Like 2 Random Posts Add a Cool Style to Blogger Threaded/Nested Comments20/01/2014 - 10 Comments How To Remove Blogger Threaded Comments12/03/2012 - 6 Comments Add Facebook Like Button Below Post Titles17/03/2012 - 93 Comments Related Posts: How to Add Numbered Page Navigation... Share blog posts in social medias u... Add floating social media sharing b... Add A CSS Animated Share Button on ... Orbit - jQuery Image Slider Plugin ... 26 comments: hottestwallpaperscollecti on 4/09/2012 yeah...nice post...but it is not showing in posts.. means it is only working on homepage.... Pakistan's Best Site Reply syed shah 4/10/2012 what the heck is this... after installing this widget.. i remove it..and before instaling i already save html tempelate of my blog... but this popular post widget showing yet but now at the bottom of my blog and in vertical direct...shit.....and after reinstalling my old tempellate this widget still showing in vertical direction of my bottom of blog...give the solution... Reply Replies Admin 4/10/2012 Well, sorry. This widget is not compatible with all blogger templates. I see you have solved your problem. ashok royal 2/09/2013 plzz.. tell me how you solve it????? The 4/17/2012 i add it to my site http://themoviesfreak.blo gspot.com Reply Replies The 4/17/2012 i have a question why some of my post in slidebar there is no image ? can u please help me to solve it. Thanks Admin 4/18/2012 That's because you haven't added any images to your posts. To change the default image, search for this address in your template (Design-Edit HTML): http://2.bp.blogspot.c om/-mRxY2oEkLJc /T393wpt0z_I /AAAAAAAABrI /4blMjDaSOUY/s1600 /no-image.PNG and replace it with your own. Or add your own pictures to your posts. Good luck Lolly Lilly 4/20/2013 admin, i faces the same problem here. i already added image in my post but only 1 image/post appear out of 10. already follow the instruction u gave, but i dont know how to replace n put all the popular post image? please help me? my blog - http://stk- deus.blogspot.com/ Abhishek sony 4/19/2012 working thanks a ton http://lolsplanet.blogspo t.com/ Reply rvm 4/19/2012 Thanks Its Working Fine........ Here Url you can see it : http://fgirlspic.blogspot.in/ Reply Abhishek sony 4/23/2012 Working great on my both blog http://lolsplanet.blogspot. com/ http://nannu4u.blogspot.i n/ Thanks Reply Anonymous 5/26/2012 It's showing up vertically? I mean the arrows are properly positioned, bu the image snippets are vertical. Help? Reply Template Design 6/07/2012 Thanks for such an informative article and the extensive explanation, it's been very useful for me as well as others also... Reply Mark jenh 8/10/2012 hey its a good one.. but plz lemme know how can i have background of the widget as black? Reply Jessica 8/21/2012 Is there a way to use this widget, but select which specific posts appear? Reply Ben Hayward 10/05/2012 If anybody wants to see what it looks like before they apply it, take a look at my blog. I didn't change any of the code: http://benendsbasem ent.blogspot.co.uk/ Thanks helplogger! Reply Craig 12/27/2012 its great but i noticed some images not loading. does it take a while to update? Reply holiday rentals in barbados 12/28/2012 Thanks for share. Reply sahoo karmady 1/18/2013 Thanks a lot Reply elika 1/21/2013 hey can i maximaize the image? Reply Oussama Bouyardane 1/29/2013 thank you very nice trick Reply ashok royal 2/04/2013 after installing this widget.. . but this popular post widget showing yet but now this widget still showing . plz solve it.. Reply Abdellah L 2/13/2013 can't find help me Reply සෙන්නා 3/31/2013 thanks.. done.. Reply jade 6/19/2013 hi there, i have a question about gallery images, i've set up on the "photo" and "illustration" pages of my blog the gallery style posts, however, i would like to create a "blog" style posting system (the normal blogger posts) on the "blog" page, how to i code the html to make it an exception on the blog page? thanks! thenaptree.blogspot.co m Reply kavi sam 9/19/2013 its great but cant we change the width?? its not enough in mine..when i move it to anothr place in layouts it doesnt work, thats why 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,787 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 Eliza Lincy How to increase the number of posts shown in Home page after... Varad Parab That was one awsome post...it really helped!!! Anonymous it cause adsense are no longer support blogger anymore. Хай, тэгвэл олно. Tnk you so much. Saved a lot of time. Thanks. :-) Michelle Thought this tutorial was great,just what I have been looking for.... 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 2 Like