Create Slideshow In Blogger

The methods as usual are more easy than you can imagine. Follow up,

1. Go To Blogger > Design
2. Choose Add a Page Element
3. Then choose HTML/JavaScript widget
4. Inside the widget paste the code below,

<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/AVvXsEigDz5DiqyOMf9UrUumIO_Gk0BYNVemOe5qZaBPbYiKdDj0Ku60Cy3q8erle40YoumM2SmA2wy9RQdM2KfdnvfzTorjVVVfmFVPZeR2GY83z_KQ900uBU-GlRJyCxUAg5P4lbav4N3k6PA/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/AVvXsEgZMJTdTGAAlsoXdyko-jLi8OzSoXL_jAquD8S7QRSIiGZmG2FO0WWreqhyphenhyphenrwc23BHcM8aVZbjjXUhC9AvKG1PUOAMh1w7BFo89l-5sC-hSvQOAtfoVhOn_sFyE1Kpt3lEgUrWipkMFrjg/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="URL Of Image" alt="" title="Description Goes Here" />

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

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

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

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

</div>

<!—Write Descriptoon With Links In this Part—> 

<div id="htmlcaption" class="nivo-html-caption"> 

Cool na? :) Now Learn How to create one by <a href="http://wwww.mybloggertricks.com">Clicking here</a> 

</div>

<br/> 

<br/>

How To Customize the Slider?

Of course its fun to customize it first using MBT HTML Editor :)

Replace URL Of Image with image link and Description Goes Here with any stuff that you may write. If you want to show no caption/description then simply delete title="Description Goes Here"

If you wish to add effects to text or use a link then use title="#htmlcaption"  instead and then add your description as I have done after <div id="htmlcaption" class="nivo-html-caption"> . If you are finding this part difficult then let me know to which image do you want to add the effect. I will provide you with the code required.