Create A Css Picture Slider Amongst Thumbnails For Blogger – Helplogger

Image galleries/sliders are especially useful for photoblogs , precisely they could also live useful for users who occasionally ask a gadget similar this. We already posted a tutorial on how to add together Thumbnail Image / Photo Gallery inward Blogger amongst a large thumbnail at the tumble out in addition to smaller thumbs at the bottom which were enlarged each fourth dimension an ikon was selected. The divergence is that nosotros had to click on the ikon inward companionship to arrive larger in addition to that was acquired amongst JavaScript.

This fourth dimension , withal , nosotros volition purpose solely hover in addition to CSS. To run across how it industrial plant , delight view the exhibit blog:

How to Add CSS Image Slider amongst Thumbnails inward Blogger

Step 1. Log into your Blogger Dashboard in addition to larn to “Template” > press the “Edit HTML” button.

Step 2. Click anywhere within the code expanse in addition to press the CTRL + F keys to opened upwards the Blogger search box

Step 3. Paste the tag within the search box in addition to hitting Enter to notice it.

Step 4. Just to a higher identify the tag , add together the CSS code:

Here nosotros laid a specific peak of 530px in addition to therefore that nosotros tin slide an ikon out of the container margins in addition to laid the overflow value to hidden.

The position: absolute of the larger thumbnails (.large-thumbnail) pulls them out in addition to places them inward the spot that we’ve chosen using a value of 800px for the top property.

The mini-thumbnails which are genuinely a minute ikon , rest all the fourth dimension to a higher identify inward a static pose in addition to are slightly modified solely inward price of mode for distinguishing the active (a:hover .mini-thumbnail) on mouse over.

Step 5. Save the changes past times clicking the “Save template” button.

And finally , nosotros ask to add together the HTML code.

Step 6. Paste the below HTML construction to where you lot desire to display the gallery past times going either to the “Layout” page in addition to add together a novel gadget (click on the “Add a gadget” link in addition to conduct “HTML/JavaScript”) , or within a post or page within the “HTML” section.

MINI-THUMB-URL1” />
LARGE-THUMB-URL1” />


MINI-THUMB-URL2” />
LARGE-THUMB-URL2” />


MINI-THUMB-URL3” />
LARGE-THUMB-URL3” />


MINI-THUMB-URL4” />
LARGE-THUMB-URL4” />


MINI-THUMB-URL5” />
LARGE-THUMB-URL5” />


LARGE-THUMB-URL1” />

The javascript:void(0); leaves the link empty precisely you lot tin add together i if you lot want. Just supersede javascript:void(0); amongst the URL of your page/post.

To add together pics within the ikon slider , supersede MINI-THUMB-URL in addition to LARGE-THUMB-URL amongst ikon URLs. Note: The lastly LARGE-THUMB-URL1 should live replaced amongst the URL of the default ikon that volition look on your slider.

If you lot don’t know how to larn the images URL , view this tutorial: How to upload images in addition to larn their URLs.

Now , Save your widget/gadget or release your page/post in addition to you’re done adding the CSS ikon slider amongst thumbnails inward Blogger.