Add An Image Slider In A Blogger-powered Blog

Images play an important and highly significant part in a blog. Just think about it, even kids are more attracted to those books which are full of images. So displaying images on the blog not only makes your articles more interesting but thus also increases your page hits. Today we'll teach you to how to display an image slider on your Blogger-powered blog. (To make a blog on Blogger, click here and sign in with your Google Account.)

We'll just provide you with a code, all you have to do is to copy/paste it. But we'll get it with steps, so follow the following extremely easy steps:

1) Login to your Blogger dashboard.

2) Open Layout options:



3) Click 'Add a Gadget'.



4) Add a 'HTML/JavaScript' widget:




5) Now copy the following code:

<style type="text/css">
/* http://thewebsa.ga */
#sliderFrame {position:relative;width:700px;margin: 0 auto 40px;}
    
#slider {
    width:700px;height:306px;/* Make it the same size as your images */
 background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7OH6Qh4Y_q5cMD57KBgnPbvnYhCMjtEqK0LJmi6ict2Cj0P9oBiitYg9r1FVsCaLft6vMZlgYJIXrgioOviY5mBKKKWgvpEx8T3_ku1nW1AjsCUyYPHilmiTmom50Eb2BEDTPK1wyXLtf/s1600/loading.gif) no-repeat 50% 50%;
 position:relative;
 margin:0 auto;/*make the image slider center-aligned */
    box-shadow: 0px 1px 5px #999999;
}
#slider img {
 position:absolute;
 border:none;
 display:none;
}
/* the link style (if an image is wrapped in a link) */
#slider a.imgLink {
 z-index:2;
 display:none;position:absolute;
 top:0px;left:0px;border:0;padding:0;margin:0;
 width:100%;height:100%;
}
/* Caption styles */
div.mc-caption-bg, div.mc-caption-bg2 {
 position:absolute;
 width:100%;
 height:auto;
 padding:0;
 left:0px;
 bottom:15px;
 z-index:3;
 overflow:hidden;
 font-size: 0;
}
div.mc-caption-bg {
 background-color:black;
}
div.mc-caption {
 font: bold 14px/20px Arial;
 color:#EEE;
 z-index:4;
 padding:10px 0;
 text-align:center;
}
div.mc-caption a {
 color:#FB0;
}
div.mc-caption a:hover {
 color:#DA0;
}

/* ------ built-in navigation bullets wrapper ------*/
div.navBulletsWrapper  {
 top:320px; left:280px; /* Its position is relative to the #slider */
 width:150px;
 background:none;
 padding-left:20px;
 position:relative;
 z-index:5;
 cursor:pointer;
}
/* each bullet */
div.navBulletsWrapper div
{
    width:11px; height:11px;
    background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcGtEwyxltS0NUUt3Bd0a_VH-C4zHgT8ktVIkkH057l2H-bj3Co72_4OedM3cV_1zFVH6gJDIwbJC1pbT5VbVUAJ-EfMOPPMOGNHptR7u9ZZfBW2QAzJZqN_-IESRYF4qPoLZ7AWx94akW/s1600/bullet.png) no-repeat 0 0;
    float:left;overflow:hidden;vertical-align:middle;cursor:pointer;
    margin-right:11px;/* distance between each bullet*/
    _position:relative;/*IE6 hack*/
}
div.navBulletsWrapper div.active {background-position:0 -11px;}

/* --------- Others ------- */
#slider
{
 transform: translate3d(0,0,0);
    -ms-transform:translate3d(0,0,0);
    -moz-transform:translate3d(0,0,0);
    -o-transform:translate3d(0,0,0);
}
</style>
<script src="http://dimpost.googlecode.com/files/js-image-slider.js" type="text/javascript"></script>
<div id="sliderFrame">
<div id="slider">
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnIhjumgx7sgnG9dO_iKOkGp-k101gXcjaaRwWthA-Mamsvk8FL0mzC6Iv_srypYpn1ljG3QW_vkMSpIiqEsqHBmAEcxH8ErPGdYBloNPmCD-WTm4Map-ZJIyB0xdbQjp4ghtKyUrt3tzR/h120/image-slider-1.jpg" alt="#htmlcaption1" /></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyeuvoQxXZJcucokI9jRlcQJsRTh7RGauClEb4GqpUggYvu9eOTthzQ5AfXWBFrcTJtLhn7_fyT82-u_YVwFm5zuQCrLpJjUqMkdamk0tufRJAOb9idF6w0vJzlrcxxkiN-aTpF8-gV-9c/h120/image-slider-2.jpg" alt="Go UP!" /></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpteJ7vtfw7b5QcOQe2iUHHWo9d1Z9RVF71mv4nQWMdpj17OhyphenhyphenxcYTqDWYN-s3sHed5PNONpInLdMUBiadPBqKfXScqAk-kG1XbHM2d5tyhIq-i99bDb8V3YZaz_hnVMyZYWkfA1jBOTye/h120/image-slider-3.jpg" alt="Pure Javascript. No jQuery. No flash." /></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1whb9x1oMICtmrcWDWrqlF85vRndhAIADVCmR4a6VNGKTSzR7310VQ8MY_EE2l93cpTMNsq5tJHz_r_dIr_hRkGD2E6KREuSQdUUTA-A9jufE1Iq8dzmeicM3UQkHqEZuFN-0QePzk7Oo/h120/image-slider-4.jpg" alt="#htmlcaption2" /></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8FiHPuSwRC2-05c2oJkRB_X9M0nz9BDSB3-UxWgXG8EPtvDFdE5drEdDWwSHsdG0wPXkkogTuWE2VbVunyXUUV_te43CghtvOQPcgSMO-sfF4Qup7JgJ7eshNCPLJpZtYW179B0CUQW74/h120/image-slider-5.jpg" alt="Stay Connected"/></a>
</div>
<div id="htmlcaption1" style="display: none;">
Code by <a href="http://thewebsa.ga/" target="_blank">The Web Saga</a>
</div>
<div id="htmlcaption2" style="display: none;">
<a href="http://www.thewebsa.ga/2015/01/add-image-slider-in-blogger-powered-blog.html" rel="dofollow" target="_blank" title="Image Slider Widget"><img src="http://img1.blogblog.com/img/blank.gif" alt="Image Slider Widget" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a></div>
</div>

6) Paste this code to the widget textbox and click the Save button:




Important Note: The text in red color is actually the URL of the images. You have to replace those URLs with the URLs of images you want to show in the slider.

Moreover, you can change the width and height by yourself.


If you liked this post and want to get notified about future posts, then subscribe to our RSS Feed by clicking here.