How to add slideshow in blogger

12:07 AM By Anonymous , , 1 comment

Blogger-Slideshow
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="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/AVvXsEhU3089irKTjW1Csii4-gop3p17vnVr-MO4lE66pIO7TNrxRow5mLHQP1EdOn_PMjUOKjo704Nk9TKhMR2Us8vbF8yTuHRcw_Qu1KAbcLwBbtRTNgMaDeeTbx_KdT5lTjK88Tqrw96i6dQ/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/AVvXsEgpHcpztLUJIDDwWC7wkFNvVyQ0iq-vEvi3Xdn41QnLcj8wD_WP3auITvhwMmQ_7oElz9keFT7VWW60QlCXkMm3yJSsp2SA4IiaFlUf32MuJw6Rj7PrniCR4kCN4N4MhG9I99BgRIPA4PU/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://www.technologyraise.com/">Clicking here</a> </div>
<br/> <br/>

1 comments: