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/>
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.
ReplyDeletewebsite design