martes, 26 de julio de 2011

How To Add Cool Jquery Featured Post Slider to Blogger

12:33  Nobu  No comments

How To Add Cool Jquery Featured Slider to Blogger/Websites

1.Login to your blogger dashboard and go to Desing --> Page Elements.

2.Click on 'Add a Gadget' on the sidebar.

3.Select 'HTML/Javascript' and add the one of code given below and click save.














<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/AVvXsEhAbqgVQ43sIPkygEqCYWnD5EyMhSKKl4gjg6jganwxVsXjkthrbVXq67UbD4FtaygERvZklSxlMpqfJ-mp96P0dzaf-ykWAowWM1uBYSNvvLwRW1pXbvKlkWpaCFzeCfeLDdf8XJV-amU/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/AVvXsEgqlZl9_WicJK4l8LKVJfV_uX6JSABkBiVZwNbZjeywgMojKMpZD3mMA4jCANr4ubD1w0hOqlvKLQmLaGGq8xCGtKYeoSlj6Xqs2qVKkOlIVteHyn91meCrYBG0ZLggDRPr5pe6_NMlJEo/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">

<a href="URL-of-Post 1"><img src="Slide-X-Image-Address 1" alt="" title="Slide X Description [...] 1" /></a> 
 
<a href="URL-of-Post 2"><img src="Slide-X-Image-Address 2" alt="" title="Slide X Description [...] 2" /></a>

<a href="URL-of-Post 3"><img src="Slide-X-Image-Address 3" alt="" title="Slide X Description [...] 3" /></a>

<a href="URL-of-Post 4"><img src="Slide-X-Image-Address 4" alt="" title="Slide X Description [...] 4" /></a>

<a href="URL-of-Post 5"><img src="Slide-X-Image-Address 5" alt="" title="Slide X Description [...] 5" /></a>   


</div>


<br/> 
<br/>

Note : Replace URL-of-Post-X , Slide X Description [...] , Slide-X-Image-Address with your content.

Use width=300px and height=618px images for your slides.

Look at 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/AVvXsEhAbqgVQ43sIPkygEqCYWnD5EyMhSKKl4gjg6jganwxVsXjkthrbVXq67UbD4FtaygERvZklSxlMpqfJ-mp96P0dzaf-ykWAowWM1uBYSNvvLwRW1pXbvKlkWpaCFzeCfeLDdf8XJV-amU/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/AVvXsEgqlZl9_WicJK4l8LKVJfV_uX6JSABkBiVZwNbZjeywgMojKMpZD3mMA4jCANr4ubD1w0hOqlvKLQmLaGGq8xCGtKYeoSlj6Xqs2qVKkOlIVteHyn91meCrYBG0ZLggDRPr5pe6_NMlJEo/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">

<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbtUJugax347glYqhhmhJgFI9Iv_L8tct8XizgxqUmdVzZ0xSFiR2fUGnrWZeOwZJpreWF0RLhw44S22mK0-Gy-de3VZ3rcz6jg7cnUoL2QL69RRGCDZmTCiuqghDzxxXlzAfvvimyigvh/s800/Gazelle_-_antelope_%2528savanna.gif" alt="" title="Description Goes Here" /></a> 
 
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLjvi7QRQw6_NQsT6pj0mGnEdg2WRJmA-mK0n8Pqu3lJ3niVY6FkgWE63y4Ink2_M0F2CiGP5Y9P1em8N1qq2MWnb56R9A7V01Kt4rLHxYkMDdKI7vPaJ9yP8tG3_6xFsMdP-j7o5wLJdL/s800/Curious_Cat%252C_Siberian_Tiger.gif" alt="" title="You can add Description here or leave it blank as shown in the next image" /> 
 
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPWP7f_dp5dAsjxGvQJOM3MzoJEx7XIKmHDEQTFuSl8jXcfJXobLpzKvrcTkstvtGxUmtnyXaGu4CVFVo-hjNBQJTmc3dxazmRUtdjysEhGL1CQaRqw8p-zwVenuAMT6Hg9kP795oa_UiA/s800/Christmas_Cat.gif" alt="" /> 
 
 <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmUw-AYCP4EiWQAe0K8MCFXLsDQU-lJY6A4ujH_0Vz7djJi_MgrLBiale4qdTRwoQxQww1L0O22oo0a8Pl5y0ST8dcQEcTiZwr-aIzUxfut7f0e50LfyUhP0s1eLBYdDMxhRrMyErJ92nr/s800/Leopard%252C_Africa.gif" alt="" title="You Can Add Description Here" /> 
 
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgR-4hIo_vdYHNQd2yERLSU8MqIkLAQow74_g_VlQzXHxmL8JH7vjwdYYD9Xyec7XMqD7rwvcebjSRzDXIUCEuWAgh1U6BdQKoB43rnvuwP69IT7hyphenhyphenOE-alW-BAyHYXWcAvwweDSgV4nxL7/s800/Three_tickets_to_the_North_.gif" alt="" title="#htmlcaption" /> 


</div>


<br/> 
<br/>

Posted in: ,,,,

0 comentarios:

Publicar un comentario

Twitter Delicious Facebook Digg Stumbleupon Favorites More