Create A Css Picture Slider Amongst Thumbnails For Blogger
Saturday, February 22, 2020
Edit
Image galleries/sliders are especially useful for photoblogs, simply they could too live useful for users who occasionally involve a gadget similar this. We already posted a tutorial on how to add together Thumbnail Image / Photo Gallery inwards Blogger amongst a large thumbnail at the transcend too smaller thumbs at the bottom which were enlarged each fourth dimension an ikon was selected. The departure is that nosotros had to click on the ikon inwards gild to arrive larger too that was acquired amongst JavaScript.
This time, however, nosotros volition purpose alone hover too CSS. To encounter how it works, delight view the exhibit blog:
Step 2. Click anywhere within the code expanse too press the CTRL + F keys to opened upwards the Blogger search box
Step 3. Paste the </head> tag within the search box too striking Enter to discovery it.
Step 4. Just higher upwards the </head> tag, add together the CSS code:
The position: absolute of the larger thumbnails (.large-thumbnail) pulls them out too places them inwards the spot that we've chosen using a value of 800px for the top property.
The mini-thumbnails which are truly a minute image, remain all the fourth dimension higher upwards inwards a static set too are slightly modified alone inwards damage 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 involve 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 too add together a novel gadget (click on the "Add a gadget" link too pick out "HTML/JavaScript"), or within a post service or page within the "HTML" section.
To add together pics within the ikon slider, supercede MINI-THUMB-URL too 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 too larn their URLs.
Now, Save your widget/gadget or reveal your page/post too you're done adding the CSS ikon slider amongst thumbnails inwards Blogger.
This time, however, nosotros volition purpose alone hover too CSS. To encounter how it works, delight view the exhibit blog:
How to Add CSS Image Slider amongst Thumbnails inwards Blogger
Step 1. Log into your Blogger Dashboard too become to "Template" > press the "Edit HTML" button.Step 2. Click anywhere within the code expanse too press the CTRL + F keys to opened upwards the Blogger search box
Step 3. Paste the </head> tag within the search box too striking Enter to discovery it.
Step 4. Just higher upwards the </head> tag, add together the CSS code:
<style type='text/css'>Here nosotros laid a specific tiptop of 530px too then that nosotros tin sack slide an ikon out of the container margins too laid the overflow value to hidden.
.image-container {
position: relative;
width: 100%;
height: 530px;
margin: 0 auto;
text-align:center;
overflow: hidden;
}
.image-container a {
display: inline;
text-decoration: none;
}
/* Mini-thumbnails mode */
.mini-thumbnail {
width: 18.4%; /* mini-thumbnails width */
margin:1px;
opacity: 1;
-webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.5);
box-shadow: 0px 0px 3px rgba(0,0,0,0.5);
}
/* Style for the principal thumbnail */
.large-thumbnail {
position: absolute;
width: 100%;
top: 800px;
margin:0 auto;
text-align: center;
display: block;
-webkit-transition: transcend 1s ease;
-moz-transition: transcend 1s ease;
-o-transition: transcend 1s ease;
-ms-transition: transcend 1s ease;
transition: transcend 1s ease;
}
.feature {
top: 85px;
width: 100%;
opacity: .3;
}
/* mode for the selected mini-thumbnail */
a:hover .mini-thumbnail {
opacity: .5;
-webkit-box-shadow: 0px 0px 10px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 0px 10px rgba(0,0,0,0.5);
box-shadow: 0px 0px 10px rgba(0,0,0,0.5);
}
/* transition effects for the selected ikon */
a:hover .large-thumbnail {
top: 85px;
width: 100%;
z-index:3;
opacity: 1;
-webkit-transition: transcend 1s ease;
-moz-transition: transcend 1s ease;
-o-transition: transcend 1s ease;
-ms-transition: transcend 1s ease;
transition: transcend 1s ease;
}
</style>
The position: absolute of the larger thumbnails (.large-thumbnail) pulls them out too places them inwards the spot that we've chosen using a value of 800px for the top property.
The mini-thumbnails which are truly a minute image, remain all the fourth dimension higher upwards inwards a static set too are slightly modified alone inwards damage 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 involve 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 too add together a novel gadget (click on the "Add a gadget" link too pick out "HTML/JavaScript"), or within a post service or page within the "HTML" section.
<div class="image-container">The javascript:void(0); leaves the link empty simply you lot tin sack add together i if you lot want. Just supercede javascript:void(0); amongst the URL of your page/post.
<a href="javascript:void(0);">
<img class="mini-thumbnail" src="MINI-THUMB-URL1" />
<img class="large-thumbnail" src="LARGE-THUMB-URL1" />
</a>
<a href="javascript:void(0);">
<img class="mini-thumbnail" src="MINI-THUMB-URL2" />
<img class="large-thumbnail" src="LARGE-THUMB-URL2" />
</a>
<a href="javascript:void(0);">
<img class="mini-thumbnail" src="MINI-THUMB-URL3" />
<img class="large-thumbnail" src="LARGE-THUMB-URL3" />
</a>
<a href="javascript:void(0);">
<img class="mini-thumbnail" src="MINI-THUMB-URL4" />
<img class="large-thumbnail" src="LARGE-THUMB-URL4" />
</a>
<a href="javascript:void(0);">
<img class="mini-thumbnail" src="MINI-THUMB-URL5" />
<img class="large-thumbnail" src="LARGE-THUMB-URL5" />
</a>
<a href="javascript:void(0);">
<img class="large-thumbnail feature" src="LARGE-THUMB-URL1" />
</a>
</div>
To add together pics within the ikon slider, supercede MINI-THUMB-URL too 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 too larn their URLs.
Now, Save your widget/gadget or reveal your page/post too you're done adding the CSS ikon slider amongst thumbnails inwards Blogger.