Create a CSS Image Slider with Thumbnails for Blogger
Image galleries/sliders are especially useful for photoblogs, but can also be useful for users who need such a tool from time to time. We've already published a guide on how to add a thumbnail/gallery to Blogger with a large thumbnail at the top and bottom that gets bigger each time you select an image. The difference is that we needed to click on the image to enlarge it, and this was achieved using JavaScript .
However, this time we'll just use hover and CSS . To see how it works, visit the demo blog:
Step 2: Click anywhere in the code area and press CTRL + F to open the Blogger search box.
Step 3 Paste Select the search field and press Enter to search for it.
Step 4. Slightly higher Add CSS code:
Here we're setting a specific height of 530px so we can push the image out of the container's margins, and we're setting the Overflow value to Hidden .
Location: separate from large thumbnails (.
The thumbnails , which are actually the second image, remain on top in a fixed position all the time, and change slightly in terms of design to highlight the active image ( a:hover .mini-thumbnail ) on hover.
Fifth step: save the changes by clicking on the "Save Form" button.
Finally, we need to add the HTML code.
Step 6: Paste the HTML outline below where you want the gallery to appear by going to the layout page and adding a new widget (click the Add Widget link and select HTML/JavaScript) or in a post or page in the HTML section.
To add images to the image slider, replace MINI-THUMB-URL and BIG-THUMB-URL with image URLs. Note that. The last THUMB URL1 needs to be replaced with the URL of the default image that will be displayed on the scrollbar.
If you don't know how to get the URL of an image, visit this guide: How to upload images and get their URLs .
Now save your widget/device or publish your page/post and you are done adding CSS image slider with thumbnails in Blogger.
However, this time we'll just use hover and CSS . To see how it works, visit the demo blog:
How to Add a CSS Image Slider with Thumbnails in Blogger
Step 1: Login to your Blogger Dashboard and go to the forms section > click the Edit HTML button.Step 2: Click anywhere in the code area and press CTRL + F to open the Blogger search box.
Step 3 Paste Select the search field and press Enter to search for it.
Step 4. Slightly higher Add CSS code:
Here we're setting a specific height of 530px so we can push the image out of the container's margins, and we're setting the Overflow value to Hidden .
Location: separate from large thumbnails (.
The thumbnails , which are actually the second image, remain on top in a fixed position all the time, and change slightly in terms of design to highlight the active image ( a:hover .mini-thumbnail ) on hover.
Fifth step: save the changes by clicking on the "Save Form" button.
Finally, we need to add the HTML code.
Step 6: Paste the HTML outline below where you want the gallery to appear by going to the layout page and adding a new widget (click the Add Widget link and select HTML/JavaScript) or in a post or page in the HTML section.
javascript: invalid(0); Leave the link blank, but you can add one if you like. Just replace javascript: void(0); With the URL of your page/post.
To add images to the image slider, replace MINI-THUMB-URL and BIG-THUMB-URL with image URLs. Note that. The last THUMB URL1 needs to be replaced with the URL of the default image that will be displayed on the scrollbar.
If you don't know how to get the URL of an image, visit this guide: How to upload images and get their URLs .
Now save your widget/device or publish your page/post and you are done adding CSS image slider with thumbnails in Blogger.
Post a Comment for "Create a CSS Image Slider with Thumbnails for Blogger"