Add Amazing CSS3 Carousel Slider in your Blog

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. Live Demo So lets 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 1Log in to your Blogger account and Go to yourBlogger Dashboard Step 2Go to yourLayouttab. Step 3Click on /a /figure figure a href= /a /figure figure a href= /a /figure figure a href= /a /figure figure a href= /a /figure figure a href= /a /figure figure a href= /a /figure figure a href= /a /figure figure a href= /a /figure 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( /a /figure If you need any help just feel free to contact me. I will help you to solve your problem.