Make Image Slider for Blogger

Customize your blog to become more better than usual by adding Image Slider. The slider can make your blog trendy and stylish. This Image Slider also can make the visitors who come to your blog feel very attractive as it is one of the famous fashion for the blogger(blog). I bet you all will like this things after you make your own Image Slider after you follow the steps below.


1. Use Ctrl+F to find the </head> code.

2. Paste this code below the </head> code:

<script src='http://www.sigmirror.com/files/45877_hooqz/slider.js' type='text/javascript'/> <script src='http://www.sigmirror.com/files/45876_wvoiq/jquery-1.2.6.min.js' type='text/javascript'/> <style type='text/css'> #mygallery{overflow: hidden;} </style> <script type='text/javascript'> stepcarousel.setup({ galleryid: 'mygallery', //id of carousel DIV beltclass: 'belt', //class of inner "belt" DIV containing all the panel DIVs panelclass: 'panel', //class of panel DIVs each holding content panelbehavior: {speed:500, wraparound:true, persist:true}, defaultbuttons: {enable: true, moveby: 3, leftnav: ['http://i625.photobucket.com/albums/tt337/syafzpic/Forum%20upload%20only/left.jpg', -48, 0], rightnav: ['http://i625.photobucket.com/albums/tt337/syafzpic/Forum%20upload%20only/right.jpg', 0, 0]}, statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels contenttype: ['external'] //content setting ['inline'] or ['external', 'path_to_external_file'] }) </script>


3. Then find this ]]></b:skin> code

4. Paste this code above the  ]]></b:skin>  code:

#myslides{ background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbDN221aOibXyimr9noSF8IDkqDTVI3zfxvsg-7G4UJ7e-s06S4nYHNv0x18uOou8ALGNkGjGIDeKmGXsEWbFpUIfm6eVigICUJrs8nePSCWDcgdD55r-464Br4B9PqrzsxGi9tFO80g/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; }


5. Then, click Add a gadget at the Page Elements and choose HTML/JavaScript

6. And add this code in it:

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

<!-- Picture 1 -->
<div class="panel">
<a href="http://www.blogging-style.blogspot.com" target="blank" title="Blogging-style"> <img width="160" alt="Blogging-style" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhn-y_OIjOQyLRLb1ImgZsOXnZI0XSswLeFvDjS8CLsbaHu6bfiEIVzmMxpVwG1DIvkA73zlQfhAFHvvl4xieR0vP_GXPg20I6Lp0ajuwIjOQDKZo-W8f9T_L1GX_Nk5scWw-OTW5NTlYY/s400/newtwocolumndenimtemplate.jpg" height="110"/> </a>
</div>
<!-- Picture 1 end -->

<!-- Picture 2 -->
<div class="panel">
<a href="http://www.blogging-style.blogspot.com" target="blank" title="Blogging-style"> <img width="160" alt="Blogging-style" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgl3vO5qgK1AhQGqzyz-p-75fFVBo5dO2O4-8IDXcCqFaAtZTwVremYFNAPaiGJuVGD-dZsEe_adCEhA-eeAWUFMT8DEYaYyMMnHeu5f82Zs9IIX77DUQSi7ZROgO4vKJzAie09FC0J3Mg/s400/simple+Blog+Template.png" height="110"/> </a>
</div>
<!-- Picture 2 end -->

<!-- Picture 3 -->
<div class="panel">
<a href="http://www.blogging-style.blogspot.com" target="blank" title="Blogging-style"> <img width="160" alt="Blogging-style" src="http://img2.pict.com/91/27/d5/ad3dbaa7835b554ec0d06a4e0c/XG7ZL/800/woork2520257c2520web2520design25.png" height="110"/> </a>
</div>
<!-- Picture 3 end -->

<!-- Picture 4 -->
<div class="panel">
<a href="http://www.blogging-style.blogspot.com" target="blank" title="Blogging-style"> <img width="160" alt="Blogging-style" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5WB76x3CEoAyg8MPTEWZAA_QfAUFZ7QmLDnD_0zpNhs5bK1HP3ctKqB3szz170RQKIo_osXp0R67Oy63SBVSzP7qcQDKOCbfFw4CA-HIs5MmqDaSN72u28l_dRVbg_fPKTwKM244ggpg/s400/Preview.jpg" height="110"/> </a>
</div>
<!-- Picture 4 end -->

<!-- Picture 5 -->
<div class="panel">
<a href="http://www.blogging-style.blogspot.com" target="blank" title="Blogging-style"> <img width="160" alt="Blogging-style" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5WB76x3CEoAyg8MPTEWZAA_QfAUFZ7QmLDnD_0zpNhs5bK1HP3ctKqB3szz170RQKIo_osXp0R67Oy63SBVSzP7qcQDKOCbfFw4CA-HIs5MmqDaSN72u28l_dRVbg_fPKTwKM244ggpg/s400/Preview.jpg" height="110"/> </a>
</div>
<!-- Picture 5 end -->

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

Change the links, images url, the titles with yours...

• Links = Red colour
• Image url = Yellow colour
• Titles = Blue colour
  

You just keep on adding links to in this format to any number you want as you can add thousand of images and posts in this format, no limit to it.

Please leave your comments on this post...

InspiredMagz.com