Ads

__________________________________________________________
Free Registered Softwares / Games and Technology 2011 - 2013. All Rights Reserved . Theme images by Storman. Powered by Blogger.

Services

__________________________________________________________

Featured
Featured
Zeeshan Shahbaz
256x125 Ads1

Translate

Recent Post

Follow

__________________________________________________________

Lables

Video of The Day

Videos

Saturday, January 19, 2013

How to add slideshow in blogger

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/AVvXsEijf1JZmeTiBjubeCPdDMa8bUhy2ZF7rETh5MGtAKHFxT4kAnURGUe0HhRCdIcilYw0Xm4N4OPo_DjNmSrGJ7oZm5No6Pyc69fZaPeXHJ_TJ0DpQqlusS_e1U8LDZEVkd7Nt1uShvqbfRQ/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/AVvXsEjxlG3A9MB54j27j3lOXLNsMRJhd_5QzeobWYeYww37br2jVDTvP9wTAQxVf4L8NiLX7BimctMx_D1uYxinq38JR1b68prMhdV5HJ9WL0BDfvYxemaF6Id9fGtWtQMHPaoZLQGiffBOOmA/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/>

END


0 on: "How to add slideshow in blogger"