How To Add Cool Jquery Featured Post Slider to Blogger

Sunday, 12 August 2012

How To Add Cool Jquery Featured Post Slider to Blogger

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/AVvXsEgY7LRNDL1O8j9LYtdGLJh8ZaTUiA-VO3ymKlSW15D0vFtPDUHWeJWI-GHPDPnQXNU-89XJFd2PI3Hz9XyTjjP7oVCTeV6kBip_gdYhP7ygPUcnwzaPnGZvp03fizMUnARqDk0yjKHiaqs/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/AVvXsEjYZTilU3Z8xKpZtrBgYFKe6S6xArhDAeNUzx6nkOLARbbXpkpNdBw4BrPLhJm4jDJzNO8wPcBY1X5Nq5scOatJ3UhqO0vkfl5LP4W4KyiFJgaWzwLpoDZozO9R7mGXCH3Y1n8YIwz-FoI/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/AVvXsEgY7LRNDL1O8j9LYtdGLJh8ZaTUiA-VO3ymKlSW15D0vFtPDUHWeJWI-GHPDPnQXNU-89XJFd2PI3Hz9XyTjjP7oVCTeV6kBip_gdYhP7ygPUcnwzaPnGZvp03fizMUnARqDk0yjKHiaqs/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/AVvXsEjYZTilU3Z8xKpZtrBgYFKe6S6xArhDAeNUzx6nkOLARbbXpkpNdBw4BrPLhJm4jDJzNO8wPcBY1X5Nq5scOatJ3UhqO0vkfl5LP4W4KyiFJgaWzwLpoDZozO9R7mGXCH3Y1n8YIwz-FoI/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/AVvXsEjG5XyRZxmrKhnAopylenjuEc_a4ZpimpD5UxxOQxBJCjwZhIQeRFSqEG0yZpPqJgBOe8qBwrYJrYCnBUbDHZr8aPcwiI_EEaGwam8m5C72Axm2Ie5wxJsp9eJgx_Ogu53wA0CvApFNun2s/s800/Gazelle_-_antelope_%2528savanna.gif" alt="" title="Description Goes Here" /></a> 
 
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLOB2EoMJQQyDDMmp0XWHIKKjGNQGBrLnf7cGTPFbAgfooAIUFjwDhOaq87RFe3Aeho98eyi75B0o0g-RsyaZlDlAb_uJGanbqmQeUS2f9SevvQLNkv6yVjjnemiqugDSTsw4SKzqMlpMP/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/AVvXsEh8FiG_oR8EbA61TZ4y9M1Fg0RrMQIKrgIKiKCEEYdxfnvRPRcbjoOYuKcxrMoR3CH4y8JFF_7rDNXn95iJtgwxD-8DY-PuqnR6OYI-SBWjnevde5fjmO5ZRM7OtqHxpbfL1XKdKzKcH3nV/s800/Christmas_Cat.gif" alt="" /> 
 
 <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFYpWPk2cVh7V2Qa3JOtjbmQvKD06PnTdNAypnjrv0DiSWlmh30rxdem9M3CBE_sXQs57ekqudp8eT0gpi9sATZujwF6YVY7Mm2Smfl1MC6uCvv1TL8VmJDO02hu55xDzsWiFMvVyG-pWE/s800/Leopard%252C_Africa.gif" alt="" title="You Can Add Description Here" /> 
 
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgshzTePO2QwJGjNMypNNqGVtpepp72_9mFeIwzBmhZPGj9GWQDy7rmk8CGMCOom5tuAU89OkgHEvytfCgI5ze10E8dmVF_OWd66VyR24cmpYQ97y3DcxLDEIeaeRQzK77OEiYoJNzTqa5f/s800/Three_tickets_to_the_North_.gif" alt="" title="#htmlcaption" /> 


</div>


<br/> 
<br/>

Now you are done.

Sohailjawaid.Blog

Pages

Sunday, 12 August 2012

How To Add Cool Jquery Featured Post Slider to Blogger

No comments: