How to add the Slideshow in blogger

So as every word press theme have a slide show and have many other advance features  as for blogger many people think that these features can't be done or be enjoyed in blogger so here is the process how to put Slide Show in blogger its very easy and simple just follow these steps.

• Go to Blogger >> Layout
• Then Add a Gadget 
• Select HTML/JAVA script 
• Then put the following code in it

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>

    <script src="http://nivo.dev7studios.com/scripts/nivo-slider/jquery.nivo.slider.pack.js" type="text/javascript"></script>

    <script type="text/javascript">
    $(window).load(function() {
        $('#slider').nivoSlider();
    });
    </script>

    <style>
    #slider {
        position:relative;
    }
    #slider img {
            position:absolute;
        top:0px;
        left:0px;
        display:none;
    }
    #slider a {
        border:0;
        display:block;
    }

    .nivo-controlNav {
        position:absolute;
        left:260px;
        bottom:-42px;
    }
    .nivo-controlNav a {
        display:block;
        width:22px;
        height:22px;
        background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEia1WOSDkeazuJyabaOWDPhAYM2HKXGvlYl9fHNAvTG0HXlVEac27v0quGqWdK1wl-3wKbbC05A-h9SJCvxykX9OO-vKUdR1bEYNpCU_pZ4VDfFORfWkGZtrtCrEBRzCfMhV0w-jaYHDPA/s400/bullets.png) no-repeat;
        text-indent:-9999px;
        border:0;
        margin-right:3px;
        float:left;
    }
    .nivo-controlNav a.active {
        background-position:0 -22px;
    }

    .nivo-directionNav a {
        display:block;
        width:30px;
        height:30px;
        background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSvKKEUA0k2MYnDAkN47s7UCRflbi9jRvcBeLgBQySCI4UyCsz7y3Qlyf_Frlsx5ZiX9071oKEAjHsjKnQ6Sols1aOj4vAcvJAsAHb-KDIA6j-sQM8Mc-XbRqxh_ZO194pK7vXSnBEnwE/s400/arrows.png) no-repeat;
        text-indent:-9999px;
        border:0;
    }
    a.nivo-nextNav {
        background-position:-30px 0;
        right:15px;
    }
    a.nivo-prevNav {
        left:15px;
    }

    .nivo-caption {
        text-shadow:none;
        font-family: Helvetica, Arial, sans-serif;
        font-size:16px;
        padding: 10px 0px;
    }
    .nivo-caption a {
        color:#efe9d1;
        text-decoration:underline;
    }

    .clear {
        clear:both;
    }

    .nivoSlider {
        position:relative;
    }
    .nivoSlider img {
        position:absolute;
        top:0px;
        left:0px;
    }
    .nivoSlider a.nivo-imageLink {
        position:absolute;
        top:0px;
        left:0px;
        width:100%;
        height:100%;
        border:0;
        padding:0;
        margin:0;
        z-index:60;
        display:none;
    }

    .nivo-slice {
        display:block;
        position:absolute;
        z-index:50;
        height:100%;
    }
    .nivo-caption {
        position:absolute;
        left:0px;
        bottom:0px;
        background:#000;
        color:#fff;
        opacity:0.7; /* Overridden by captionOpacity setting */
        width:100%;
        z-index:89;
    }
    .nivo-caption p {
        padding:5px;
        margin:0;
    }
    .nivo-caption a {
        display:inline !important;
    }
    .nivo-html-caption {
        display:none;
    }

    .nivo-directionNav a {
        position:absolute;
        top:45%;
        z-index:99;
        cursor:pointer;
    }
    .nivo-prevNav {
        left:0px;
    }
    .nivo-nextNav {
        right:0px;
    }
    .nivo-controlNav a {
        position:relative;
        z-index:99;
        cursor:pointer;
    }
    .nivo-controlNav a.active {
        font-weight:bold;
    }
    </style>

    <div id="slider">


    <img src="Image Url" alt="" title="Description Goes Here" />

    <img src="Image Url" alt="" title="Description Goes Here" />

    <img src="Image Url" alt="" title="Description Goes Here" />

    <img src="Image Url" alt="" title="Description Goes Here" />

    <img src="Image Url" alt="" title="#htmlcaption" />

    </div>

    <!—Write Description With Links In this Part—>
    <div id="htmlcaption" class="nivo-html-caption">
    Cool na? :) Now Learn How to create one by <a href="http://chsaqlain.blogspot.com">Clicking here</a>
    </div>


    <br/>
    <br/>

How To Customize it?
You can edit Image Url by putting your image url in it then it will show your image in the Slide show
After that by editing Description Goes Here  you can put your description about the image its very easy also you can change style of the image by editing nivo-html-caption
 Please note that the image size must be 618*270 

If you want to add more images the by adding

<img src=" Image URL" alt="" title="Description" /> 

This before the  </div> in case of any query you can comment her and we will try our best to solve it.

Get paid to share your links!