How to Add Image Slider in Blogger Post

Today we provide you tutorial about Add Image Slider in Blogger Post. You can easily add image slider in your blog post just follow some steps to add Image Slider. In this slider you get a ribbon at the left corner and it’s also contains with a slice effect. You can also edit it as you wish to perfectly for your blog.

Add Image Slider in Blogger Post

You can follow below step by step guide to Add Image Slider in Blogger Post:

Step 1

Login to your Blogger Dashboard.

Step 2

Go to Layout then Click on Add A Gadget as shown in below picture.

Step 3

Select HTML/JavaScript as shown in below picture.

Step 4

Copy and paste below code.

<style type="text/css">
/* http://dimpost.com */
#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/AVvXsEiYtrb-_Ldc7Nz1GbcvgR1Fu827kkSzAFxp-5VhK4Svm5bdPb7d5kzHqh4W7xbvEiChldUptH3CJitNmm0Iu8MUzWjlavwzRvR2OmGVX24gqLYWsYoYZeIfUIVEdjrIbxqFBtb_u7IvBhB9/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/AVvXsEg5zqFiqliWzlZZsxvXVS-IERkUfqSvbXHFIDLL3RHCLmBKF7Ik54imkb7EIpEDUb4xkcLXF4gDQA9NgBDgvhB5-eEhb4cTD9_ng_STdsiiwVZoRCrhBcex_m7VJDLUFPR9RDjnCr8jT6vS/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/AVvXsEjyF3CPCs2xnDFCE-sAW3p8QhXgkgzmdGBU-hh42-neBnbpGEywnldU57RsDaEzp4k_wn8qv4P81y0GnTpm_dRONVMRBKmCMPMr7lxJvG-bYN7ONJDbWwF-UfOfACEgY24Qz-qNgimWLzGO/h120/image-slider-1.jpg" alt="#htmlcaption1" /></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilY6HVuWOyUth-NBuZ-WoUI64kq-gItoovqBXHOhEDozvVsJiKmmUvSKch3d8O-NhoQaSgG-RzTcDOfagGm_RQih68fxsJdlFTxrVj3gV39nYAob8D6Nw0BBKTtc4oJe5LzcKQMXtKxYiD/h120/image-slider-2.jpg" alt="Go UP!" /></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-I5aPN320NeIenp2qmaXX5fTGOGloOOb7ZoMfnV8Pr1g6lmqM5clyi4HM70_VYgx1bSd88WVtj2n4cwpcvvnC7Cx9LHJYZCzvrgoBy6xz9kHnVi5U0jHIyFVwT6NzY5OpRXwwjD58xwXv/h120/image-slider-3.jpg" alt="Pure Javascript. No jQuery. No flash." /></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6b59DQL4_IrMrKbPXaN22IwdsRaaB035jRf7FrPeZ2_fr_6kVYaq2O14CeuwGb9u-0v7dYCTjZo2NByHftnZCx5JlUrs5E3VDON5d0t3ujjq3vaEB-1ucbn5LF7yrv1t5iQjHHX98QGqM/h120/image-slider-4.jpg" alt="#htmlcaption2" /></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPfdIhu98435gQfpN_6Pr8eS9igtvhsVfKrVb5Xnb3mz4CiZSKerxnp-6D1CuXJ3oH1qwA_GBFCErMO0ufdmuiN7vA2lFGWBf9dJWHrCLCnAu4qXMrs4ZoFb2k_SIup8n2tubLBApFvqI8/h120/image-slider-5.jpg" alt="Stay Connected"/></a>
</div><a href="http://www.haakblog.com" rel="dofollow" target="_blank" title="blogger tricks"><img src="https://bitly.com/haakblog" alt="blogger tricks" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://www.haakblog.com/2014/02/download-best-blogger-templates-of-2014.html" rel="dofollow" target="_blank" title="blogger templates"><img src="https://bitly.com/haakblog" alt="blogger templates" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a>
<div id="htmlcaption1" style="display: none;">
Code by <a href="http://www.haakblog.com" target="_blank">Haakblog</a>
</div>
<div id="htmlcaption2" style="display: none;">
<a href="http://www.haakblog.com/" target="_blank">CSS</a> <a href="http://www.haakblog.com/" target="_blank">JavaScript</a> Rocks.
</div>
</div>

Tips: You can change your width and height as you wish. You can also change image URL which is show in red color.

Step 5

Now click on save.

No comments

Posted at 03:54 |  by Unknown