JAVASCRIPT IMAGE SLIDER FOR BLOGGER

 

1. Go To Blogger Dashboard
2. Click On Layout tab.
3. Now Add Gadget>>HTML/Javascript
4. Paste below code in it.

<style type="text/css">
#mcis {
 display: none;
}
#sliderFrame {
 position: relative;
 width: 500px; margin: 0 auto;
        border:5px solid #000;
}
#ribbon {
 width: 111px;
 height: 111px;
 position: absolute;
 top: -4px;
 left: -4px;
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhedDL1d7v4oZXfOxxmEIqd_i2iVAVeM_7pUdPjc2Pe81-aDMSC5A1F3eet9jgW_rGM_KConTwRserFj77XyOHUkL9F_CfLlNZ8yvqkpffFmW8DQQo7NzC_3DT0df1OjtHCDtgSvVi3Dx4/s1600/lordhtml.blogspot.com-ribbon.png) no-repeat;
 z-index: 7;
}
#slider {
 width: 500px; height: 218px; background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6z_Xwb_Y9_ecfhe7lOQl4-MJH4zK43J0C-DiHYE3mluR7VwGArQjddoKaxseVozlvGh4A-4TfcivktOAgJ_7O1NWhz7dFpTlGRBJgxwThoz9PgUZg02Li0bxldolGZ5Jo_hZbaZdbwjU/s1600/lordhtml.blogspot.com-loading.gif) no-repeat 50% 50%;
 position: relative;
 margin: 0 auto;
 box-shadow: 0px 1px 5px #999999;
}
#slider img {
 position: absolute;
 border: none;
 display: none;
}
#slider a.imgLink {
 z-index: 2;
 display: none;
 position: absolute;
 top: 0px;
 left: 0px;
 border: 0;
 padding: 0;
 margin: 0;
 width: 100%;
 height: 100%;
}
div.mc-caption-bg, div.mc-caption-bg2 {
 position: absolute;
 width: 100%;
 height: auto;
 padding: 0;
 left: 0px;
 bottom: 0px;
 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;
}
div.navBulletsWrapper {
 top: 250px;
 left: 190px;
 width: 150px;
 background: none;
 padding-left: 20px;
 position: relative;
 z-index: 5;
 cursor: pointer;
}
div.navBulletsWrapper div {
 width: 11px;
 height: 11px;
 background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGpogM5WtCePoommuiTGJj9P_nFLyoQDvm6R_netbzhg1OpYlkUOCcSZhpnyo4x41LFPBLxnJmkZJ9J7Iwj1gAOdpKH6QjL8CcTkVlltA2r79ZjvXdv740JjdUVMnuozvZz4IUdimzO4I/s1600/lordhtml.blogspot.com-bullet.png) no-repeat 0 0;
 float: left;
 overflow: hidden;
 vertical-align: middle;
 cursor: pointer;
 margin-right: 11px;
 _position: relative;
}
div.navBulletsWrapper div.active {
 background-position: 0 -11px;
}
#slider {
 transform: translate3d(0,0,0);
 -ms-transform: translate3d(0,0,0);
 -moz-transform: translate3d(0,0,0);
 -o-transform: translate3d(0,0,0);
 -webkit-transform: translate3d(0,0,0);
}
 </style>
<script src="https://www.opendrive.com/files/MV8zMTIyMDE4X2FmeHVy/lordhtml-javascriptslider.js" type="text/javascript"></script>
<div id="sliderFrame">
     <div id="ribbon"></div>            <div id="slider">
<a href="www.yourlinkhere.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiapG9tpA-NlW3l9ZKRsTw11KNLm3uyOFMemynSDHKuIMAHOB_ni1hAkjKueSBQYAruuDBnyezZokFjdasTWXBVffhwyYA4Np16oHqbU97d-RvuaPpO_anWnWstBckP42FHfzJ9PE2b2vQ/s1600/lordhtml.blogspot.com-1.jpg" alt="Your Text Here"/></a>
<a href=" www.yourlinkhere.com "><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzVTc1zIEhkp_2JBLi-RDdluBDFlRtxuMha0eR01BEP3CQIlBJ-W5LT55yXIXw_AfHaLBs5QYJuPjyFUi1Kk1iPyXh1jqXVe77TYRvTp1pg2AvMc3BDzjqZ4dJUt0OwCpgdiT8f3DZ7wA/s1600/lordhtml.blogspot.com-2.jpg" alt=""/></a>
<a href=" www.yourlinkhere.com "><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPAK4Vo0ZkR83tICEv_k5-zaGFc_2xKVA-PKic1Ql-Qp8cCdWgnhRp3DfokmDH6WeJ0W_6FoOC13uJ7O8hD2BdC3KUVQ28zKU6RS3jWOcKzxGpo9scoSE9pT9ZSKe-QYoL6KCL_BpWA_k/s1600/lordhtml.blogspot.com-3.jpg" alt="The slide is a linking image"/></a>
<a href=" www.yourlinkhere.com "><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhk5Fie-OkEUVt3JsE07oNUwAqbOsTIyP_nN1bKX5PEbd_g6uOKKnRkja1PPxtWigW_5U7Hka5gfyr6cSHc-yhRg7zitugKtR1M8DIYX4P-yzKp9uppK5hyphenhyphens0kOj0SU2H1Iz_cHl8_W0s8/s1600/lordhtml.blogspot.com-4.jpg" alt="Pure Javascript. No jQuery. No flash."/></a>
<a href=" www.yourlinkhere.com "><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVorGA82KexzJrjlG46_eb6qlt_f1jZqYyEVvUQlvA8RdPIqLYiWQoZq5kcUFzP7mxZbp8uY3UiKKxkvyiSbxpoX6aAbMjpqloILm_xQqnlDrI9uM-kmfrf6yiJWwsSNCGmI5vEIDTsv4/s1600/lordhtml.blogspot.com-5.jpg" alt="#htmlcaption"/></a>
                </div></div>

Customize

Now we need to customize this slider according to you.

Width-To customize width Replace the orange color code which I highlighted with orange color.

Height-To customize height Replace the green color code which I highlighted with orange color.

Ribbon-To remove What's Hot ribbon from this slider remove red color highlighted code.

Links-You can see  www.yourlinkhere.com replace this If you want to add any link to image.

Image-Replace all highlighted image URL's with your own images URL.

After you finished customizing this image slider click on Save button and enjoy your awesome slider.If you face any problem then feel free to ask.