Add Amazing CSS3 Carousel Slider in your Blog
Carousel Slider is one of the
best widget to display your featured post common way. It Is very popular
because you it take small space and load faster. Most of the Carousel Slider
able to display infinity posts. There are various use of this slider. Best user
of Carousel Slider are movie and games based site. You can easily add your
featured or latest movie and games through Carousel Slider. It make navigation
friendly for this reason a visitors can easily navigate to specific post
easily. Though we generally use Carousel Slider at the top area (below header)
of the blogger template, as a result when a visitors visit your landing page
then they can easily see the hottest posts. So I have tried to make little
variation in Carousel Slider widget. This Carousel Slider is not like common
one that a right or left button for scrolling rather I have added on this
Carousel Slider mouse over scrolling effect. When you take your mouse pointer
on right or left site of featured posts then it will scroll automatically. As
well as a transparent caption will appear where you can simply write the
content name. Another feature of this widget is that you can add infinity
content. But this Carousel Slider you have to maintain manually.
For using this slider you have
to select image and resize it to 150px
width X 120px Height and upload it in any hosting server (e.g. Google,
Photobucket, Image Shark) then get the link and finally add it into Carousel
Slider.
So let’s proceed to the tutorial
to install it into your blog. You can add this slider below header of above
footer section. Just follow the below simple steps-
Step 4 Now Copy the below code and paste it in "HTML/JavaScript" Gadget and Save it.
Step 1 Log in to your Blogger account and Go to
your Blogger Dashboard
Step 2 Go to your Layout tab.
Step 3 Click on "Add a Gadget"
then select "HTML/JavaScript" Gadget.
Step 4 Now Copy the below code and paste it in "HTML/JavaScript" Gadget and Save it.
Step 5 Place the Gadget below header.
that's it.
<style>
#BloggerSpiceCarouselSlider {
height:130px;
background-color:#333333;
border:10px solid #000000;
position:relative;
margin:50px 50px;
overflow:auto;
}
/* CarouselSlider by www.bloggerspice.com */
#BloggerSpiceCarouselSlider:before,
#BloggerSpiceCarouselSlider:after {
content:"";
display:block;
position:absolute;
top:0;
bottom:0;
left:-4px;
width:4px;
height:100%;
box-shadow:0 0 4px black;
z-index:10;
}
#BloggerSpiceCarouselSlider:after {
left:auto;
right:-4px;
}
#BloggerSpiceCarouselSlider .container {
position:absolute;
top:0;
left:0;
margin:5px 0 0 5px;
width:300%;
height:120px;
}
#BloggerSpiceCarouselSlider figure {
display:block;
background-color:white;
float:left;
width:150px;
height:120px;
margin:0 5px 0 0;
position:relative;
overflow:hidden;
}
#BloggerSpiceCarouselSlider figcaption {
display:block;
position:absolute;
right:0;
bottom:-50px;
left:0;
background-color:black;
font:italic normal 11px Arial,Sans-Serif;
color:white;
padding:4px 10px;
text-align:left;
opacity:.8;
}
#BloggerSpiceCarouselSlider figure img {
display:block;
border:none;
margin:0 0;
}
</style>
<div id="BloggerSpiceCarouselSlider">
<div class="container">
<figure>
<a href="#" title="Title for Caption">
<img alt="" src="http://1.bp.blogspot.com/-EE_tp-P3r9A/UfYvm5HykII/AAAAAAAAEJY/NuTPF5nNasA/s1600/7.jpg" />
</a>
</figure>
<figure>
<a href="#" title="Title for Caption">
<img alt="" src="http://2.bp.blogspot.com/-bp70bq1oUmE/UfYvnxZrc-I/AAAAAAAAEJs/ESVCQ3EKimk/s1600/9.jpg" />
</a>
</figure>
<figure>
<a href="#" title="Title for Caption">
<img alt="" src="http://3.bp.blogspot.com/-cqHmDnU6IUo/UfYvkiKD-pI/AAAAAAAAEIs/6rNbrWl2n5U/s1600/10.jpg" />
</a>
</figure>
<figure>
<a href="#" title="Title for Caption">
<img alt="" src="http://4.bp.blogspot.com/-zneaAHQlNgI/UfYvnaCia6I/AAAAAAAAEJc/aKEJCLOExJA/s1600/8.jpg" />
</a>
</figure>
<figure>
<a href="#" title="Title for Caption">
<img alt="" src="http://3.bp.blogspot.com/-0l9Jf0vageQ/UfYvmpUuOKI/AAAAAAAAEJk/6412AvMPgJs/s1600/6.jpg" />
</a>
</figure>
<figure>
<a href="#" title="Title for Caption">
<img alt="" src="http://1.bp.blogspot.com/-oe6eNCRFrPs/UfYvlop75fI/AAAAAAAAEJE/atL7k6y5bpI/s1600/4.jpg" />
</a>
</figure>
<figure>
<a href="#" title="Title for Caption">
<img alt="" src="http://4.bp.blogspot.com/-a5Ek7XZxIyE/UfYvlUlOyxI/AAAAAAAAEJM/XyZzkVtklF4/s1600/3.jpg" />
</a>
</figure>
<figure>
<a href="#" title="Title for Caption2">
<img alt="" src="http://1.bp.blogspot.com/-xarVMAVA3YU/UfYvkhm4MCI/AAAAAAAAEIw/cehXZF6MeRw/s1600/2.jpg" />
</a>
</figure>
<figure>
<a href="#" title="Title for Caption">
<img alt="" src="http://4.bp.blogspot.com/-A6GKQkWlf4o/UfYvkYZjF0I/AAAAAAAAEIo/goOT3YD4D_Y/s1600/1.jpg" />
</a>
</figure>
</div>
</div>
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
<script type='text/javascript'>//<![CDATA[
(function($) {
var config = {
itemMargins: 5 // Distance between the thumbnails
};
var $thumbnailScroller = $('#BloggerSpiceCarouselSlider'),
$container = $thumbnailScroller.find('.container'),
$item = $container.find('figure'),
item_length = $item.length,
item_width = $item.outerWidth(),
item_margin = config.itemMargins,
total_width = (item_width + item_margin) * item_length,
$window = $(window);
$thumbnailScroller.css('overflow', 'hidden');
$container.css('width', total_width);
// Auto caption builder & hover effect
$item.each(function(cap) {
if ($(this).children().attr('title')) {
cap = $(this).children().attr('title');
$(this).children().removeAttr('title');
$(this).append('<figcaption>' + cap + '</figcaption>');
}
}).hover(function() {
$(this).find('figcaption').stop().animate({
bottom: 0
}, 200);
}, function() {
$(this).find('figcaption').stop().animate({
bottom: -50
}, 200);
});
$window.on("resize", function() {
var o_l = $thumbnailScroller.offset().left,
t_w = $thumbnailScroller.width(),
c_w = total_width;
$thumbnailScroller.on("mousemove", function(e) {
if ($(this).width() < $container.width()) {
$container.css('left', -((e.pageX - o_l) * (c_w - t_w) / t_w));
}
});
}).trigger("resize");
})(jQuery);
//]]>
</script>
Customization
- Change #333333 for Background color of CarouselSlider
- Change #000000for Border colorCarouselSlider
- Replace # with post link
- Alter Title for Caption with Post title
- Replace Image URL Here with post Image link
- To add more link just add code like below after </figure>
<figure>
<a href="#" title="Title for Caption">
<img alt="" src="Image URL Here" />
</a>
</figure>
If you need any help just feel free to contact me. I will help you to solve your problem.