Featured Post Slideshow For Blogger

This tutorial can shows you ways to feature featured content slideshow to point out your featured post to your readers.This slideshow is incredibly simple to setup and might simply manage breadth and height to match your model.Not solely that you just will amendment the speed of this slideshow simply.Default breadth is 550px and Default height is 200px.I think you may love this slideshow.You can see the DEMO of this contraption from here.

1.Login to your blogger dashboard--layout- - Edit HTML
2.Scroll all the way down to wherever you see</head> tag .
3.Copy below code and paste it simply before the </head>  tag .

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js' type='text/javascript'></script> <script type='text/javascript'> //<![CDATA[ /* ------------------------------------------------------------------------ s3Slider Developped By: Boban Karišik -> http://www.serie3.info/ CSS Help: Mészáros Róbert -> http://www.perspectived.com/ Version: 1.0 Copyright: Feel free to redistribute the script/modify it, as long as you leave my infos at the top. -------------------------------------------------------------------------- */ (function($){ $.fn.s3Slider = function(vars) { var element = this; var timeOut = (vars.timeOut != undefined) ? vars.timeOut : 4000; var current = null; var timeOutFn = null; var faderStat = true; var mOver = false; var items = $("#" + element[0].id + "Content ." + element[0].id + "Image"); var itemsSpan = $("#" + element[0].id + "Content ." + element[0].id + "Image span"); items.each(function(i) { $(items[i]).mouseover(function() { mOver = true; }); $(items[i]).mouseout(function() { mOver = false; fadeElement(true); }); }); var fadeElement = function(isMouseOut) { var thisTimeOut = (isMouseOut) ? (timeOut/2) : timeOut; thisTimeOut = (faderStat) ? 10 : thisTimeOut; if(items.length > 0) { timeOutFn = setTimeout(makeSlider, thisTimeOut); } else { console.log("Poof.."); } } var makeSlider = function() { current = (current != null) ? current : items[(items.length-1)]; var currNo = jQuery.inArray(current, items) + 1 currNo = (currNo == items.length) ? 0 : (currNo - 1); var newMargin = $(element).width() * currNo; if(faderStat == true) { if(!mOver) { $(items[currNo]).fadeIn((timeOut/6), function() { if($(itemsSpan[currNo]).css('bottom') == 0) { $(itemsSpan[currNo]).slideUp((timeOut/6), function() { faderStat = false; current = items[currNo]; if(!mOver) { fadeElement(false); } }); } else { $(itemsSpan[currNo]).slideDown((timeOut/6), function() { faderStat = false; current = items[currNo]; if(!mOver) { fadeElement(false); } }); } }); } } else { if(!mOver) { if($(itemsSpan[currNo]).css('bottom') == 0) { $(itemsSpan[currNo]).slideDown((timeOut/6), function() { $(items[currNo]).fadeOut((timeOut/6), function() { faderStat = true; current = items[(currNo+1)]; if(!mOver) { fadeElement(false); } }); }); } else { $(itemsSpan[currNo]).slideUp((timeOut/6), function() { $(items[currNo]).fadeOut((timeOut/6), function() { faderStat = true; current = items[(currNo+1)]; if(!mOver) { fadeElement(false); } }); }); } } } } makeSlider(); }; })(jQuery); //]]> </script> <script type='text/javascript'> $(document).ready(function() { $('#s3slider').s3Slider({ timeOut: 4000 }); }); </script> <style type='text/css'> #s3slider { background:#000000; border:1px solid #818e8f; width: 550px; height: 200px; position: relative; overflow: hidden; } #s3sliderContent { width: 550px; position: absolute; top:0px; padding: 0px; margin: 0px; } .s3sliderImage { float: left; position: relative; display: none; } .s3sliderImage span { position: absolute; left: 0; font: 20px Trebuchet MS, sans-serif; padding: 10px 0px; width: 550px; background-color: #000; filter: alpha(opacity=80); -moz-opacity: 0.8; -khtml-opacity: 0.8; opacity: 0.8; color: #fff; display: none; bottom: 0; text-align:center; } .clear { clear: both; } </style></a>

NOTE : to vary the speed of slideshow, amendment the worth 4000.
 4.Save your model.
5.Now attend Layout--Page part and click on on "Add a gadget".
 6.Select "html/java script" and add the code given below and click on save.
  <div id="s3slider"> <ul id="s3sliderContent"> <li class="s3sliderImage"><a href="YOUR-LINK-HERE"><img style="width:550px;height:200px;" src="http://3.bp.blogspot.com/_4HKUHirY_2U/S9aKt3KHrsI/AAAAAAAAA- w/I2U4SlmRPss/s1600/Crysis-11.jpg" /><span>Crysis : Download Full Version</span></a></li> <li class="s3sliderImage"><a href="YOUR-LINK-HERE"><img style="width:550px;height:200px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcxFEw8Q9ITxkdzb7gD3WBe6l0YFpZRC0-EWYCL4SGKasOpflHaRkfMMkk_78ZiOaUm3T5Z0lI0SWgRx8GE142vqPT8lvU1h_cFz3_glKMF4QR9GpFjv6GcgFbRS3mXloNzBQKeWzAZInA/" /><span>Halo 3 : Play Game Online</span></a></li> <li class="s3sliderImage"><a href="YOUR-LINK-HERE"><img style="width:550px;height:200px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfYtfiZtTP53pxa94bRNx1BvLYMe7M5xoeMgzYNxOWeH2Y2u251cBtEM67lY3-2r994H96oUbycQ80_p2o3ButNKBfWpKTLIeQwK5mkoTxsmxpPYSq7yqzqvpg2ntBsEEtBnR1uKPSsU58/ 11.jpg" /><span>Avatar : Watch Movie Now !!!</span></a></li> <li class="s3sliderImage"><a href="YOUR-LINK-HERE"><img style="width:550px;height:200px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilTdvPT4YRcaVqey8iZdVVYRD1TqADjHiOKWiB8GORB2cAPSnWLd3bcehjaGXSkOtdQvkE-qBB4cqgzotyjd4Yo_vyWh_ARbQTPpVX6D2EM6YeO5IP_14s3bT2k0g6vvAMEVLasSXhhMi_/s1600/call +of+duty-11.jpg" /><span>Call Of Duty 4 : Get Here</span></a></li> <li class="s3sliderImage"></li> </ul> </div> <div class='clear'> </div> </a>

NOTE : Replace YOUR-LINK-HERE and pictures along with your content.
 Now you have got with success put in this slide show to your web site.