Create a CSS Image Slider with Thumbnails for Blogger alphause

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 Color Code Generator28/02/2012 - 0 Comments Horizontal menu with sub-tabs in two columns for Blogger02/06/2013 - 27 Comments How to Add Different Backgrounds In Blogger Pages14/04/2012 - 4 Comments Related Posts: How to Add CSS code To Blogger usin... How to add custom Variable definiti... Understanding the Page Elements of ... What is the difference between padd... CSS3 Transition Property Basics 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,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 1 Like