Image galleries, sliders and slideshows have become increasingly popular within web pages and more and more developers have been creating these amazing powerful, versatile and sleek galleries. In this tutorial, you will see how to display the relevant content in an attractive and usable manner, by adding this beautiful carousel slideshow to display a gallery of images with a cool sliding effect.
How to Add the Scriptaculous Image Slider on Blogger
Step 1. Log into your Blogger Dashboard and select your blog, then go to “Template” and click the “Edit HTML” button:
Step 2. Click anywhere on the code area and press the CTRL + F keys. This will open a search box – type the tag below and press ENTER to find it:
Step 3. Just above the tag, add these scripts:
Note: If you already have Scriptaculous and Prototype, it’s not necessary adding the code in red but please note that this may not work with some versions of jQuery.
Step 4. Next, search for the following tag (for more info, see the screenshot below):
]]>
| Screenshot |
Step 5. Just above that tag, add this CSS code:
.carousel
position:relative;
clear:both;
margin:10px -20px 20px;
border:2px solid #000; /* Carousel border */
background-color:#333333; /* Background color */
.carousel .navButton
cursor:pointer; display:block;
text-indent:-9999px;
background-repeat:none;
z-index:10;
.carousel .container
position:absolute;
overflow:hidden;
.carousel .items
position:absolute;
#Carousel2
height:88px; /* container height */
width:100%; /* container width */
#Carousel2 .container
top:12px;
width:100%; /* container width for the visible images */
height:100px; /* container height for the visible images */
#Carousel2 .items top:0; left:2px;
width:1700px; /* overall width for all the thumbnails */
#Carousel2 .item height:70px; width:70px; float:left; clear:right;
#Carousel2 .item .icon img position:relative; left:0px; width:65px !important; height:65px; cursor:pointer;
#Carousel2 .navButton position:absolute; bottom:0px; width:24px; height:87px;
#Carousel2 .navButton.previous left:0px; background-image:url(http://bit.ly/2hcVyef);
#Carousel2 .navButton.next right:2px; background-image:url(http://bit.ly/2gNo3Cz);
#Carousel2 .item .key display:none;
#Carousel2 .item .picture display:none;
Note:
Check the comments in green to see which parts you can customize, such as the border and background color of the carousel. Please note that the arrows are images, so if you want to change them, you need to replace the two URLs in blue with those of your images.
If you want to change the size of the container, change the /* container width */ (width of the carousel), the /* container width for the visible images */ (area where the thumbnails are visible) and the /* overall width of the thumbnails container */ value (1700px) which is the container for all the picutres that you added.
Step 6. To save the changes, click the “Save Template” button.
Step 7. Finally, go to “Layout” and click the “Add a Gadget” link. After the pop-up window opens, choose “HTML/Javascript” and paste the HTML structure of the carousel inside the empty box:
Note: Replace the text in blue with your links and image URLs. The link URL is optional, so you can add it only if you want to link the images to some posts.
Step 8. Once you added your pics to the carousel, click the “Save” button to save the widget and make it visible on your blog.
If you wish to add more images or remove some, change the width of the thumbnails as well, otherwise some pictures will appear behind the others.
To add more pictures, paste the following code just before the tags in red:
No comments:
Post a Comment