jQuery Smooth SlideShow For Blogger

In this post im gonna explain how to add jQuery Smooth slideshow to your blogger.You can add this slideshow to top of your posts.Actually this is also very easy to add.  ts just widget.Few days ago i  posted about Attractive jQuery photo galley. Im  using Jquery and Css3 for this photo gallery.
Follow  these  step to  add to  your blog.

Demo

jQuery Smooth Featured SlideShow For Blogger

1. Log in to blogger account and Click drop down.

2. Now select "Layout" Like Below.

3. Click Add Gadget and select 'HTML/Javascript

4. Paste  below code.

<style>
.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;
}
/* The slices in the Slider */
.nivo-slice {
 display:block;
 position:absolute;
 z-index:50;
 height:100%;
}
/* Caption styles */
.nivo-caption {
 position:absolute;
 left:0px;
 bottom:0px;
 background:#000;
 color:#fff;
 opacity:0.8; /* 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;
}
/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a {
 position:absolute;
 top:45%;
 z-index:99;
 cursor:pointer;
}
.nivo-prevNav {
 left:0px;
}
.nivo-nextNav {
 right:0px;
}
/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav a {
 position:relative;
 z-index:99;
 cursor:pointer;
}
.nivo-controlNav a.active {
 font-weight:bold;
}
table {
 border-collapse:separate;
 border-spacing:0;
}
caption, th, td {
 text-align:left;
 font-weight:normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
 content:"";
}
blockquote, q {
 quotes:"" "";
}
/* HTML5 tags */
header, section, footer,
aside, nav, article, figure {
 display: block;
}
a, a:visited {
 color:#2d3536;
 text-decoration:none;
 border-bottom:1px dotted #826a4d;
}
a:hover, a:active {
 color:#9e805c;
 text-decoration:none;
}
#slider-wrapper {
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjs91V_EuMceD2r6aPy9M6Ncrd0qP9mGD8DZ63uNQfCkcyW1-ilsD17FRIt-cwfJ6hGfHxqwjKY1Z7Wi7W06Hr-9urI2CBj8-_d91zvQNtpPMMlirqmhN9DqaUgFnpXVYKXq0z1blNpDqc/s1600/slider.png) no-repeat;
    width:494px;
    height:310px;
    margin:0 auto;
    padding-top:23px;
    margin-top:50px;
}

#slider {
 position:relative;
    width:430px;
    height:250px;
    margin-left:32px;
 background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgFcN2wXCdhkt5vgv2D6Dz6xO0tjBl4E5mp9ryzSSZezLGxuLPLKgPtdt4_uEAZh4TMHc0MQzfo2KOqzE4SZYGOhYpL1kMHk6YEXUVqP98EjjAceZMvAydKfxIzE3k2oVHl1M3L8HJZgM/s1600/loading.gif) no-repeat 50% 50%;
}
#slider img {
 position:absolute;
 top:0px;
 left:0px;
 display:none;
}
#slider a {
 border:0;
 display:block;
}

.nivo-controlNav {
 position:absolute;
 left:163px;
 bottom:12px;
 background: #000000;
 -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    padding: 3px;
    border: 2px solid #CCC;
    opacity: 0.7;
    z-index: 99;
 }
 .nivo-controlNav:hover{opacity: 1;}
 
.nivo-controlNav a {
 display:block;
 width:22px;
 height:22px;
 background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNfvHTigZwP1k273QA25C_gk1X3XsBxlaNdii1gmiV5tE8P02r2qC_cUkW2qOYu2ddnwyU7DcaXhPHD8y2Tj45nQ1PwW_G_PQaNMDw4vkoLkcRMPrYOg8fIM5-HK8orWm8OWYrQMAG2K8/s1600/bullets.png) no-repeat;
 text-indent:-9999px;
 border:0;
 margin-right:0px;
 float:left;
}
.nivo-controlNav a.active {
 background-position:0 -22px;
}

.nivo-directionNav a {
 display:block;
 width:35px;
 height:65px;
 background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhRYhfshq-3-mqM5DTHfoJu1RVPQIBhQVo9sN2gP5nwX_70JJJSqaK8UtLJ_c-ip9-CZlHAUocNAD3Rk_EnC3iOXLgDB4n4MXlwy5d2cvPQoxYBXrChHGPobUTj_KFUGiWCusWYXx_Wu8/s1600/arrows.png) no-repeat;
 text-indent:-9999px;
 border:0;
}
a.nivo-nextNav {
 background-position:-35px 0;
 right: -40px;
}
a.nivo-nextNav:hover{right: -41px;}

a.nivo-prevNav {
 left:-40px;
}
a.nivo-prevNav:hover{left: -41px;}

.nivo-caption {
    text-shadow:none;
    font-family: Helvetica, Arial, sans-serif;
}
.nivo-caption a { 
    color:#efe9d1;
    text-decoration:underline;
}
.nivo-directionNav a{top: 40%;}

.clear {
 clear:both;
}
</style>

    <br />
<div id="wrapper">
<div id="slider-wrapper">
<div class="nivoSlider" id="slider">
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiB4zfwWrmnk3h9HEUbLSp9NkvhR7ykHzXDN0nhCl4-ZMvtMh8VSZEEZmy1l2cK_jtUjwWQ4_WGrOFoW_iaBlisGmK8wYPvwdcIYJ4FR3vgfJ31phcozvB7tv3gdx3zidNDOqJaKNCpjto/s1600/btrix-London_Barrier.jpg" />
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRqLmW-MojwCU6bwg3F2oCr3QRtIHMBb49MGhtUwrQsGOEnG2aMRbxcAGr6zn3x6CCY5cYwoFXK14SlA8LoNlB4UX7DHgS_r22M74AC24XuX9pSszcpjphjRwAP5HGCWRO2zA0uLEyMEk/s1600/btrix-sunset.jpg" />
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWm-I8vi1G4Xx79WBDXIPvT7kCEcHDTwc6fNlNfjV3AhXBNTAFuh9Yc_36W7Zpq3e7L-X5FipYSiiFZYyOjlKzo6E8s6ZMe2dkc95f4NA5p_fHytQPHZnTCJJ81yRmOsL76NXIph9rfd8/s1600/btrix-car-wallpapers.jpg" />
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipMnpv0y0qoVhYHM_eqg6Sj0oAVt_WSBiCi94rJ4tQlvEo8Z0seL0limLEoxQ2O8REXBG9P-dohdA-h66QExM5F9knvnD4Z_QkpN-TBHwZU1g_VMiSuKa9EMF67nfrvZyI4ZywqFFi6pM/s1600/btrix-spring-nature.jpg" />
</div>
</div>
</div>

<script src="http://bloggertrixcode.googlecode.com/files/jquery-1.4.3.min.js" type="text/javascript"></script>
<script src="http://bloggertrixcode.googlecode.com/files/jquery.nivo.slider.pack.js" type="text/javascript"></script>
<script type="text/javascript">
    $(window).load(function() {
        $('#slider').nivoSlider({directionNavHide:false});
    });
    </script>

You can change photos by changing Image URLs
You can change image discription by changing red color text.
5. Now save your HTML/Javascript'.You are done.
Hope this jQuery Smooth Featured SlideShow helps to make your blog attractive.