Saturday, 18 August 2012

Now Jquery featured post slider in blogger blog with slide effect

Add this cool  Jquery featured post slider in blogger blog with slide effect so that your best post sliding below header.

 Follow simple and easy step to add this feature in your blog now----->>>>>>

* First go to your blogger DASHBOARD.

* Now click in design tab. and You are here ---->>>> Add new element.
* Click in add new gadget which is in sidebar.

* When open new window click in HTML/Javascript from list.

* When open new blank box copy below code and paste in blank box.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="http://yourjavascript.com/0031841174/effectjqeary.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="Post URL1"><img src="Image URL 1" alt="" title="Slide Description Here" /></a> 
 
<a href="Post URL 2"><img src="Image URL  2" alt="" title="Slide Description Here" /></a>

<a href="Post URL 3"><img src="Image URL  3" alt="" title="Slide Description Here" /></a>

<a href="Post URL 4"><img src="Image URL  4" alt="" title="Slide Description Here" /></a>

<a href="Post URL 5"><img src="Image URL  5" alt="" title="Slide Description Here" /></a>   


</div>


<br/> 
<br/>

NOTE:- Change Post url with your post URL and Change Image URL With your image URL and last Change Slide Description with your post Description.

* And now save your HTML/Javasript now and you are done easily.

No comments: