Add JavaScript Image Slider to Blogger Easily

November 07, 2021 Post a Comment

Let’s Install the Image Slider to your Blogger Blog
1. Go to Blogger Dashboard > Layout > Add a Gadget
2. Select HTML/Javascript
3. Copy the code below and paste on it.

#DEMO

#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/AVvXsEg2GB-kKFeYRjMSIIy-4gTJqG_WC3gQGLxmNwKUsey4utiGWrBgXtrRMj86Yi0WHRwSw_a0JUuvoymTuQ72CtSLlivyJZRJE4DfkO5E7ykJp_QfcS5Zx-L-5Nk5fWMy56uy-pDDXBusxgKq/s1600/loading.gif) no-repeat 50% 50%;
    position: relative;
    margin: 0 auto;
    /*make the image slider center-aligned */
    -webkit-box-shadow: 0px 1px 5px #999999;
    -moz-box-shadow: 0px 1px 5px #999999;
    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/AVvXsEgTzsxc9kTfv3R19HZ1tUQtb3luB9YhRabD0jL7Y6VRU5Qi5HkPL5hCFvWFUzo-X23cDIJs5HxBKvKm30GY7K2PKC1PxxU8xHNNbxgJq1fZgG7q7C6kEJF3C9g9BWlGvD2ys63fzoZgZiqU/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;
}

.intro {
    bottom: 0;
    color: rgba(0, 0, 0, 0.2);
    font-size: 16px;
    position: absolute;
    right: 0;
    text-decoration: none;
    z-index: 99999;
}

/* --------- Others ------- */

#slider {
    -webkit-transform: translate3d(0, 0, 0);
    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="https://www.masudcomputerbd.com/image-slider/js-image-slider.js" type="text/javascript"></script>
<script src="http://project.dimpost.com/image-slider/js-image-slider.js" type="text/javascript"></script>
<div id="sliderFrame">
    <div id="slider">

<a href="#"><img src="https://blogger.googleusercontent.com/img/a/AVvXsEjzNDSN41Ed4kdIr5IR4pNw92vFhhaObbzj8yzR9lmE_3speJ7po8Fa0amzYy8991oSCRK4CFJ43SxUYnqUt6qMqdzWu576I-hfiO0bhK2hfaTbGpP_gr0XrIxNUPdGEpw0-ObRVWblEy-GmlDXopB2zecdN7RlNUaYlnUFUgFySoj1Ee_x823HweAj=s700" alt="#htmlcaption1" /></a>
      
        <a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFdZ9YsWRUvUrBhqrrdcK9umBHZHMRgY-wAtSn8Ssf3WRjUOQRgTVvKMLX_VhGY9Gasm0rXOVJEMDfm99CB3IGs_T6C18GtWsBb3XPU_U5vVCDASMFXZgOUhbMSQnn414hZO3IiaUihit2/s1600/image-slider-2.jpg" alt="Go UP!" /></a>
      
        <a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhD3jxaWecIGaw_yR0bpeJzd2dZgnAJ3QYBxs7lWE7ga_YKNeDD1XnVnkhZ77zLMN79VKQplxj3GpiToPBnN6Ufsy-XUSOdcVUHOrVQBanrb3KsZyYw988r4QfKY-o6nJ2ibMDafg8g5J92/s1600/image-slider-3.jpg" alt="Pure Javascript. No jQuery. No flash." /></a>
      
        <a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOAzNmtfverMY53NFFuiQubjm_vam0Ldpoj8USDjDaIzxg2amaeenIJzwg0hMrAf_fYBIFSbnBMger7sSse55RWs8ldfAmLCN9mS9-AXHc11rgI-zNoprsSEbCtRbyfgmPjmdFkDBEv57P/s1600/image-slider-4.jpg" alt="#htmlcaption2" /></a>
      
        <a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYQh9knWwd7X0lW2RdWy0d_qlpQS4CJWThORN_RGsf1NA-uugX94y5mjvJb3wR4oastGLsPl0dS43rj3j2kJ1WblqmgptXddQCepZCF53WFhLTm3n662biywAkQvRypTXZ3OQul4wfe-gs/s1600/image-slider-5.jpg" alt="Stay Connected" /></a>
    </div>
    <div id="htmlcaption1" style="display: none;">
        Image Slider by <a href="https://www.masudcomputerbd.com" target="_blank">masudcomputerbd.com</a>
    </div>
    <div id="htmlcaption2" style="display: none;">
        <a href="https://www.masudcomputerbd.com" target="_blank">CSS</a> <a href="https://www.masudcomputerbd.com" target="_blank">JavaScript</a> Rocks.
    </div>
</div>

javascript image slider,image slider,javascript slider,css image slider,image slider javascript,image slider html and css,image slider html and css javascript,javascript,responsive image slider,image slider using javascript,image slider in javascript,responsive image slider javascript,responsive image slider html css javascript,full screen image slider,image slider in html,image slider tutorial,fullscreen image slider

Image Slider For Blogger

Add JavaScript Image Slider to Blogger Easily

#DEMO

Post a Comment for "Add JavaScript Image Slider to Blogger Easily"

Widget HTML #3