• RSS
  • Delicious
  • Digg
  • Facebook
  • Twitter
  • Linkedin
  • Increase Website And Blog Traffic:latest article for Increasing Blog and website Traffic free gide.....
  • Create and Upload Site Map to Google:Google is fist largest Search Engine by upploading SITE MAP Google Easily Search Links from Ur site in Searching.......
  • Fix WEB SITE Errors:Google and other search engines always take those site in there fist page in searching which ha too less web Errors...
  • Top 20 Search Engine:Submit Ur site to top 20 Search Engines to Increasing Ur Site Traffic and making money top search engines like as Google, Yahoo, Ask, AOl, MSN...
  • Top Social Sites:Top 100 Social sites which real help U make a Affliate Marketer and in Pormoting ur Producdts...

New Posts

Create a CSS Image Slider with Thumbnails for Blogger

Posted by Mohsin On 1/13/2014 09:24:00 AM 1 comment

Image galleries/sliders are 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 with JavaScript.

This time will use only hover and CSS.

DEMO

How to Add A CSS Image Slider with Thumbnails to Blogger


Step 1. Log in to your Blogger Dashboard and go to Template > 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 the </head> tag inside the search box and hit Enter.

Step 4. Just above the </head> tag, add this code:
<style type='text/css'>
.image-container {
position: relative;
width: 640px;
height: 530px;
margin: 0 auto;
text-align:center;
overflow: hidden;
}
.image-container a {
display: inline;
text-decoration: none;
}
/* Mini-thumbnails style */
.mini-thumbnail {
width: 18%; /* 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 main thumbnail */
.large-thumbnail {
position: absolute;
width: 100%;
top: 800px;
margin:0 auto;
text-align: center;
display: block;
-webkit-transition: top 1s ease;
-moz-transition: top 1s ease;
-o-transition: top 1s ease;
-ms-transition: top 1s ease;
transition: top 1s ease;
}
.feature {
top: 110px;
width: 100%;
opacity: .3;
}
/* style 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 image */
a:hover .large-thumbnail {
top: 110px;
width: 100%;
z-index:3;
opacity: 1;
-webkit-transition: top 1s ease;
-moz-transition: top 1s ease;
-o-transition: top 1s ease;
-ms-transition: top 1s ease;
transition: top 1s ease;
}
</style>
Here we set a specific height (530px) and width (640px) so that we can slide an image out of the bounds of the container and have it be hidden (overflow:hidden);
The absolute positioning 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 the top property;
The mini-thumbnails which 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 the Save template button.

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 to Layout and add a new gadget (click on the Add a gadget link and choose HTML/JavaScript), or inside a post or page within the HTML section.
<div class="image-container">
<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>
In this example we left the link empty (javascript:void(0);) but you can add one if you want - just replace javascript:void(0); with the url of your page/post.
To add pics inside the image slider just replace MINI-THUMB-URL and LARGE-THUMB-URL texts with the URL of your images. Note: The last LARGE-THUMB-URL1 should 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 :)

1 comments:

When cleaning a carpet, it is important that you should be patient; even with
a high powered vacuum cleaner, dirt and dust can still be embedded in its fibers.

If there are stubborn stain spots, they then deal with these places with specialized stain removers.
But when your carpet needs a thorough cleaning from the roots it is always advisable to call the professional carpet cleaning to do excellent job leaving
your carpet stain free, dust free, allergen free and odor free.


My blog; rug cleaning Sunnyvale Ca

Post a Comment

All types of Comments are welcome