Translate

1

How to add slideshow in blogger

Posted on Thursday 24 January 2013

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. Go To Blogger > Design Choose Add a Page Element Then choose HTML/JavaScript widget 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/AVvXsEhUbVjO2nZwFvL947mM1w79SdjCsFGvk8lE_54yGIKNKKVLjq02ke12o-Gwf_4rsQ8TTNoriIz3u2Ob07lc_BXnQLAG-kXzJmrir89RdxW-k2hDJWCQSn03vdqy9Rk5rJjB4E-99JLT554/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/AVvXsEiUEs4t9cEjv87gHNIr3TXV3YSKdlFMm8_sD_e1mRUQn-yuihyXyflXeifGNeibjrnwpMwoTD_PeoT0Syl7Ec2LW7ck6k69gijbaeYYpnnF3oV6AXtGJ1N1BKgG9qv19Kj3fMUlS3IElbQ/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 Comment

Discussion

  1. Using a slideshow you can attract your visitors to your hot and topmost posts. Besides, it makes your blog look professional and beautiful.Thanks for sharing good post.
    website design

    ReplyDelete