Moving jquery image slider for featured content in Blogger

In this blogger tutorial you will learn how you can insert auto move jquery image slider/featured content which is also known as carousel to blogger blog.You can see this jquery image slider implemented at the top of my blog.Some of my blog readers are asking me through email that how they can insert it in their blog so i decided to share it with my readers.It is an excellent way to make your blog attractive and user friendly because you can show your best content in it and your blog readers will stay on your blog for long time.Now just follow the below procedure step by step.

Also read Add Beautiful jQuery Auto-Playing Featured Content Image Slider to Blogger .

Backup template

Firstly backup your template so you can revert back any changes to the template in case of errors.
Go to Layout > Edit HTML and click on " Download Full Template".

Installation

After saving your template,check  "Expand widget templates" and insert the below css styling before ]]></b:skin>.

#myslides{

background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXe33m-foWhdn2hLv2JvMhG9wHMiAqgJZBhHszH2cJKflVlgLNTJDycDkz7o5LO_DwiLFl8_pGDT5tuEM_IilMl7TAOM0BWntWaVFa-9GVuR8lnG7L2i0yz5kuEQ8W52Vh6wAXNswTmA/s1600/mslid.jpg) repeat-x;
width: 650px;
height:165px;
margin-bottom:5px;
}

.stepcarousel{
position: relative; /*leave this value alone*/
overflow: scroll; /*leave this value alone*/
width: 554px; /*Width of Carousel Viewer itself*/
height: 160px; /*Height should enough to fit largest content's height*/
margin: 0px 48px 5px 48px;

}

.stepcarousel .belt{
position: absolute; /*leave this value alone*/
left: 0;
top: 0;
}

.stepcarousel .panel{
float: left; /*leave this value alone*/
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 20px 10px ; /*margin around each panel*/
width:170px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
background:#0e1829;
height:120px;
border:1px solid #1d2c44;

}
.stepcarousel .panel p{
text-align: left; /*leave this value alone*/
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 5px 5px ; /*margin around each panel*/

}

.stepcarousel .panel h2{
text-align: left; /*leave this value alone*/
height:20px;
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 2px 5px ; /*margin around each panel*/
font-size:16px;
font-weight:bold;
text-align:center;
font-family:Georgia,century gothic,Arial,verdana, sans-serif;
}

.stepcarousel .panel img{
float: left; /*leave this value alone*/
background:#0E1829; /*clip content that go outside dimensions of holding panel DIV*/
margin: 5px 5px 5px 5px; /*margin around each panel*/
padding:0px 0px;
}

The red highlighted text in above code is the background image of the slider which is black but you can change the color of background according to your blog colors.You can use Google images to find background colors suitable for blog and after uploading that image to image hosting you can replace above link with yours.
Now using "Ctrl + F" find  /head in the template code and add below code before it.

<!-- JavaScript Slider -->
<script src='http://www.yourjavascript.com/57180121136/jquery-1.3.2.js' type='text/javascript'/>
<script src='http://www.yourjavascript.com/30111191622/slider.js' type='text/javascript'/>

<!-- End JavaScript Slider -->
<script type='text/javascript'>
stepcarousel.setup({
galleryid: &#39;mygallery&#39;, //id of carousel DIV
beltclass: &#39;belt&#39;, //class of inner &quot;belt&quot; DIV containing all the panel DIVs
panelclass: &#39;panel&#39;, //class of panel DIVs each holding content
panelbehavior: {speed:1500, wraparound:true, persist:true},
autostep: {enable:true, moveby:1, pause:1000},
defaultbuttons: {enable: true, moveby: 4, leftnav: [&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiw_jCJwHJ5t0Ath42-aJkBzTyPjpX_8fmvMKXm5zyq3F7QVuhZt1Tuqfw-TP68OR0hhuuS4_328zdsejydDMhh6OW-81lJUgSuCPM6ZiGje5ZodLgjarvPL0glyVk8K6s3VM2bu4L-KU4/s400/left.jpg&#39;, -48, 0], rightnav: [&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFUPBF8nTKBDL2JQi6OJ19HzQDN0THsfmm_thAvfpPsC3ctAsBIYnwlu169wF6IqKetGrYTUCHt9w0kcdYSLYAYPECZjyZkY-mqd9Hot5QjCU9k5jFerP0AGOaV11ZB3u6uXSIp8OS-eI/s400/right.jpg&#39;, 0, 0]},
statusvars: [&#39;statusA&#39;, &#39;statusB&#39;, &#39;statusC&#39;], //register 3 variables that contain current panel (start), current panel (last), and total panels
contenttype: [&#39;external&#39;] //content setting [&#39;inline&#39;] or [&#39;external&#39;, &#39;path_to_external_file&#39;]

})

</script>

The highlighted red lines in above script are right and left sliding arrows images which can also be changed.The green highlighted texts are different attributes of the slider like speed of the carousel ,how many images to "moveby" when clicking on arrows.
The difficult part is almost finished just save your template.
Go to Layout > Page Elements > Add A Gadget > Html /Javascript and insert the below code in the Gadget.

 

<div id="myslides">
<div id="mygallery" class="stepcarousel">
<div class="belt">

<!-- 1st Template -->
<div class='panel'>
<a href='http://www.bloggertemp.com/2010/01/blogger-template-made-in-spain.html' target='blank' title='Made in Spain'> <img alt='Made in Spain' height='135' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTyK59F41d3Ea507QonM3iExQMTScdpBysyu4p_si3RJNifQfTolgW49_Io5coU2a8h3u5gjE-9SwFIWEfC9_c9-6HXRRbO389lwLfWPVoCcbYLmLZYEefIliIeRYjUfpLq2_aSphSV-0/s400/madeinspain.jpg' width='185'/> </a>
</div>
<!--end code of 1st Template -->
<!-- 2nd Template -->

<div class='panel'>
<a href='http://www.bloggertemp.com/2010/01/blogger-template-fashion-press.html' target='blank' title='Fashion Press'> <img alt='Fashion Press' height='135' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-t-J4hm2_j7H8d3GeC3BBREqpcucArGjmSDLspq2a4fqURcYz8hc2FOXdrnkjZIuG7KsfVW3acoEvIMndHyxCcSP8Ocnhpo1bKvJQAPDCGX4M5wgGRFaIy4zcVxkgZvwXtXF7mHmlnto/s400/fashion-press.jpg' width='185'/> </a>

</div>
<!--end code of 2nd Template -->

<!-- 3rd Template -->

<div class='panel'>
<a href='http://www.bloggertemp.com/2010/01/blogger-template-techlure.html' target='blank' title='Techlure'> <img alt='Techlure' height='135' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiA0UJdyfV5XysaCkVtkwrOWGhndcpM7Q2Q7z3qj7M2Zv2MIdaieLVxm-PQTtJaY_887JDX4gUScwN6MDy2IE_LgAe6p9jruj9jhyphenhyphenOnblCzfITkPvmxiqknE7P1Rkf4AIR4V3nBYJuFysk/s640/techlure.JPG' title='Techlure' width='185'/> </a>
</div>
<!--end code of 3rd Template -->
<!-- 4th Template -->

<div class='panel'>
<a href='http://www.bloggertemp.com/2010/02/blogger-template-woodmag.html' target='blank' title='Woodmag'> <img alt='Woodmag' height='135' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvGy0sUKC5PM_tSFtQD7-k_T7ygueSO0Z-XtbdocTOCcU6u06kxzIhqvCGyPOXfEWXadsNIS8PTg1N54pqrgusTYj57SEaasx8V-UUJCDpucb8qCmFsvL-a2MDkrhnM6nRAlJZXiIZPjA/s640/Woodmag-blogger-template.jpg' title='Techlure' width='185'/> </a>
</div>
<!--end code of 4th Template -->
<!-- 5th Template -->

<div class='panel'>
<a href='http://www.bloggertemp.com/2010/02/blogger-template-showcase.html' target='blank' title='Showcase'> <img alt='Showcase' height='135' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmeBTbtbmL4KpH3ERdtOnHDKOP2jABmRP-V9y5fv5gBiefF3VnGklQhOrqshXB_Qo1eRD_Ktv3S7SbvHGC77OC42WRapKYZaKFYxHTjTGQbRL_6UXw_j8HDBlIBR2WpTQViHOxnvLHZXI/s640/showcase-portfolio-blogger-template.JPG' title='Showcase' width='185'/> </a>
</div>
<!--end code of 5th Template -->
<!-- 6th Template -->

<div class='panel'>
<a href='http://www.bloggertemp.com/2010/03/blogger-template-versatile.html' target='blank' title='Versatile'> <img alt='Versatile' height='135' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2IkC4qmeEdjRlLiO0NPZJcP2SzG2CexYmCCQO1JrR1Pal4Np4kj263HE2DnaI6_I768UPD4DQw0CLdwsI3bGH-hd9tMO3CrveRiAvo74qxhp8FjxH3PkkkX5v5KosUK9sIszcio6N81c/s640/Versatile.JPG' title='Versatile' width='185'/> </a>
</div>
<!--end code of 6th Template -->

</div></div></div>

Replace my images and post links with yours and save it.You can add as many posts in carousel as you like but do not add too much posts because it will increase the loading time of your blog.
I tried my best to help you install carousel in your blog but if you are still facing problems please mention it in comments and i will see what i can do to solve your problem.

read more