How to add slideshow in blogger

Sliders are very good ways to make your blog attractive.It not make your blog attractive but also provide more dynamic look to your blog. Here is a very simple way how to add slideshow in blogger.

  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="" type="text/javascript"></script> <script src="" 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( no-repeat;     text-indent:-9999px;     border:0;     margin-right:3px;     float:left; .nivo-controlNav {     background-position:0 -22px; .nivo-directionNav a {     display:block;     width:30px;     height:30px;     background:url( 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 {     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="">Clicking here</a> </div>
<br/> <br/>