Helplogger Home Blog DesignWidgets SEO Menus Po ... Create a CSS Image Slider with Thumbnails for Blogger 4 comments Image galleries/slidersare particularly useful for photoblogs, but they could also serve those who occasionally need a gadget like this. As we saw in a previous tutorial, on the top of the block we had some small thumbnails which were enlarged at the bottom each time an image was selected. The difference is that there we had to click the thumbnail in order to show a larger version and that was acquired withJavaScript. This time will use onlyhoverandCSS. DEMO How to Add A CSS Image Slider with Thumbnails to Blogger Step 1.Log in to your Blogger Dashboardand go toTemplate>Edit HTML Step 2.Click anywhere inside the code area and press the CTRL + F keys to open the Blogger search box Step 3.Paste thetag inside the search box and hit Enter. Step 4.Just above thetag, add this code: Here we set a specificheight(530px) andwidth(640px) so that we can slide an image out of the bounds of the container and have it be hidden (overflow:hidden); Theabsolutepositioning on the larger thumbnails (.large-thumbnail) pulls them out and places them specifically in the spot that we've chosen using a value of 800px for thetopproperty; Themini-thumbnailswhich are actually a second image remain all the time above in a static position and are altered only slightly in terms of style for distinguishing the active (a:hover .mini-thumbnail) on mouse over. Step 5.Save the changes by clicking on theSave templatebutton. And finally, we need to add the HTML code. Step 6.Paste the below HTML structure to where you want to display the gallery by going either toLayoutand add a new gadget (click on theAdd a gadgetlink and chooseHTML/JavaScript), or inside a post or page within theHTMLsection.

In this example we left the link empty (javascript:void(0);) but you can add one if you want - just replacejavascript:void(0);with the url of your page/post. To add pics inside the image slider just replaceMINI-THUMB-URLandLARGE-THUMB-URLtexts with the URL of your images.Note: The lastLARGE-THUMB-URL1should be replaced with the URL of the default image that will appear on your slider. If you need more information on how to get the URL of images, I recommend you reading this tutorial: How to Upload Images and Get the URL Finally, save your widget/gadget or publish your page/post and that's it! Enjoy :) Like 1 Random Posts How to Add Emoticons/Smileys in Blogger Comments18/04/2012 - 56 Comments How To Add or Change Favicon on Blogger Blogspot18/04/2012 - 57 Comments Create A Rollover Image Effect (change image on mouseover)31/05/2012 - 55 Comments Related Posts: CSS3 Transition Property Basics How to Increase Thumbnail Resoluti... Share blog posts in social medias u... Add floating social media sharing b... Add A CSS Animated Share Button on ... 4 comments: supriya sivabalan 1/26/2014 Thank you for all your lovely help! I love the way you give instructions xxx fourstepsofpain.blogs pot.com Reply Navi Oplovers 2/07/2014 thanks you .. Reply mmLin 2/15/2014 Thank you for your post . just one question how to place small thumbnail images below the large thumbnail one ? change the position of small thumbnail to the opposite of what you displayed currently . Reply dara king 4/09/2014 good 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,775 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 Joseph V M Hi, I've added pagination to my blog... dara king good Mel Ancheta You did it finally, thanks admin (: sorry for my late reply... Sandra Harriette It never ceases to amaze just how much we can do with Blogger.... Gabor Sziladi One question i still have...how can i keep distance between my... 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 1 Like