How to add a slider in your blog

• It will be attractive if you add a slider in your blog. First go to Dashboard, select Layout and then click on Add a Gadget.

A pop up window will appear. Scroll the window and click HTML/JavaScript.

Now copy the following code.

<style type="text/css">
.flex-container a:active,
.flexslider a:active,
.flex-container a:focus,
.flexslider a:focus{
outline:none;
}
.slides,
.flex-control-nav,
.flex-direction-nav{
margin:0;
padding:0;
list-style:none;
}

.flexslider{
margin:0;
padding:0;
}
.flexslider .slides > li{
display:none;
-webkit-backface-visibility:hidden;
-moz-backface-visibility:hidden;
-ms-backface-visibility:hidden;
-o-backface-visibility:hidden;
backface-visibility:hidden;
}

.flexslider .slides img{
width:100%;
display:block;
}
.flex-pauseplay span{
text-transform:capitalize;
}

.flexslider a.intro {
bottom:0;
color:rgba(0, 0, 0, 0.1);
font-size:14px;
position:absolute;
right:0;
text-decoration:none;
z-index:99999;
}
.slides:after{
content:".";
display:block;
clear:both;
visibility:hidden;
line-height:0;
height:0;
}
html[xmlns] .slides{
display:block;
}
* html .slides{
height:1%;
}

.no-js .slides > li:first-child{
display:block;
}

.flexslider{
margin:0 0 60px;
background:#fff;
border:4px solid #fff;
position:relative;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
-webkit-box-shadow:0 1px 4px rgba(0,0,0,.2);
-moz-box-shadow:0 1px 4px rgba(0,0,0,.2);
box-shadow:0 1px 4px rgba(0,0,0,.2);
zoom:1;
}
.flex-viewport{
max-height:2000px;
-webkit-transition:all 1s ease;
-moz-transition:all 1s ease;
-o-transition:all 1s ease;
transition:all 1s ease;
}
.loading .flex-viewport{
max-height:300px;
}
.flexslider .slides{
zoom:1;
}
.carousel li{
margin-right:5px;
}

.flexslider li {
border: 0 none !important;
padding: 0 !important;
text-indent: 0 !important;
}
.flex-direction-nav a{
width:30px;
height:30px;
margin:-20px 0 0;
display:block;
background:url(http://project.dimpost.com/flexslider-carousel/images/bg_direction_nav.png) no-repeat 0 0;
position:absolute;
top:50%;
cursor:pointer;
text-indent:-9999px;
opacity:0;
-webkit-transition:all .3s ease;
-moz-transition:all .3s ease;
-o-transition:all .3s ease;
transition:all .3s ease;
}
.flex-direction-nav .flex-next{
background-position:100% 0;
right:-36px;
}
.flex-direction-nav .flex-prev{
left:-36px;
}
.flexslider:hover .flex-next{
opacity:0.8;
right:5px;
}
.flexslider:hover .flex-prev{
opacity:0.8;
left:5px;
}
.flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover{
opacity:1;
}
.flex-direction-nav .disabled{
opacity:.3!important;
filter:alpha(opacity=30);
cursor:default;
}

.flex-control-nav{
width:100%;
position:absolute;
bottom:-40px;
text-align:center;
}
.flex-control-nav li{
margin:0 6px;
display:inline-block;
zoom:1;
*display:inline;
}
.flex-control-paging li a{
width:11px;
height:11px;
display:block;
background:#666;
background:rgba(0,0,0,0.5);
cursor:pointer;
text-indent:-9999px;
-webkit-border-radius:20px;
-moz-border-radius:20px;
border-radius:20px;
-webkit-box-shadow:inset 0 0 3px rgba(0,0,0,0.3);
-moz-box-shadow:inset 0 0 3px rgba(0,0,0,0.3);
box-shadow:inset 0 0 3px rgba(0,0,0,0.3);
}
.flex-control-paging li a:hover{
background:#333;
background:rgba(0,0,0,0.7);
}
.flex-control-paging li a.flex-active{
background:#000;
background:rgba(0,0,0,0.9);
cursor:default;
}
.flex-control-thumbs{
margin:5px 0 0;
position:static;
overflow:hidden;
}
.flex-control-thumbs li{
width:25%;
float:left;
margin:0;
}
.flex-control-thumbs img{
width:100%;
display:block;
opacity:.7;
cursor:pointer;
}
.flex-control-thumbs img:hover{
opacity:1;
}
.flex-control-thumbs .active{
opacity:1;
cursor:default;
}
</style>
<script type="text/javascript" src="http://project.dimpost.com/flexslider-carousel/jquery.js"></script>
<script type="text/javascript" src="http://project.dimpost.com/flexslider-carousel/jquery.flexslider-min.js"></script>
<script type="text/javascript">
 $(document).ready(function(){
$(window).load(function() {
  $('.flexslider').flexslider({
    animation: "slide",
    animationLoop: false,
    itemWidth: 210,
    itemMargin: 0,
    minItems: 1,
    maxItems: 4
  });
});
});
</script>
<div class="flexslider">
  <ul class="slides">
    <li>
      <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrawyBgjvsNqJkS_hLM074vA9JrMYV8674OZ-3XdGPuinQ57hMxNARdjqovYuenIO7E6TQUfs20GqoZgqGr3zgcs4rLuyLGVCtoLHoVSADdE4k0gVkH9Njj-SKL5xz_pUVj13dqygcdQ/s1600/beautiful-rose-flowers-30.jpg" height=250 width=300  />
    </li>
    <li>
      <img src="http://webneel.com/wallpaper/sites/default/files/images/01-2014/32-flower-wallpaper.preview.jpg" height=250 width=300  />
    </li>
    <li>
      <img src="http://2.bp.blogspot.com/-yMt7eZ3ENHI/T5XfCmcJ6fI/AAAAAAAAYpI/INwt9dRazTE/s1600/0.jpg" height=250 width=300 />
    </li>
    <li>
      <img src="http://3.bp.blogspot.com/-nssqeyWW1vc/Tm85hYxRhAI/AAAAAAAADvU/j_ORYNploFk/s1600/flowers_and_butterflies-277733-1251185295.jpeg" height=250 width=300 />
    </li>
    <li>
      <img src="http://i2.wp.com/www.wonderslist.com/wp-content/uploads/2013/01/Whitehaven-Beach_Australia.jpg?resize=550%2C309" height=250 width=300 />
    </li>
    <li>
      <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1VoKUbpcsSP8lmqLYmpKn4HQGPOzkcgHp_-7Cp-A92rtpUecU91Y9T4N9eLthsQkvD-pH0A92xUWvDFdqeYU87p4G_bOtBMtmGJkqtmLtaD9hPH4XHIZpLgQiFrTrXpxmdUwvzMd67clb/s1600/beautiful-places-nature-2.jpg" height=250 width=300 />
    </li>
    <li>
      <img src="http://planetden.com/wp-content/uploads/2014/03/taj11.jpg" height=250 width=300 />
    </li>
    <li>
      <img src="http://thefabweb.com/wp-content/uploads/2012/05/beautiful-swan-x.jpg?95073f" height=250 width=300 />
    </li>
    <li>
      <img src="http://media-cache-ak0.pinimg.com/736x/03/b3/c7/03b3c7348116c0e99e27a582691187fa.jpg" height=250 width=300 />
    </li>
    <li>
      <img src="http://wallpaperus.org/wallpapers/04/160/winter-season-1920x1080-wallpaper-1665400.jpg" height=250 width=300 />
    </li>
    <li>
      <img src="http://inspirefree.com/wp-content/uploads/2014/09/10086637516_fde6ccdaf9_z.jpg" height=250 width=300 />
    </li>
    <li>
      <img src="http://i01.i.aliimg.com/wsphoto/v1/562335951_1/Rose-of-Sharon-Beautiful-Purple-Rose-Colors-Flower-150-Seeds-Home-Decoration-5749.jpg" height=250 width=300 />
    </li>
  </ul>
</div>

Now, paste the above code in content field.Click save.