Amazing Blogger Slider Widget for Blogger

Do you like the above slider? if yes, install this widget in your blog just by following these simple steps:

Download these files:

Style Sheet

Javascript

Steps for Installing the Slider Widget:
Steps 1:
Login to your Blogger Dashboard.
Click the Design Tab.  Now click the Edit HTML Tab. 
Click the Download Full Template , this will take backup of your current template.

Step 2:
Pres Ctrl+f(for search) and Search for "]]></b:skin>" .

Open the Stylesheet you download, copy the content and just place above ]]></b:skin> 

Step 3:
Now copy the Javascript code from the downloaded javascript file. Paste the code above </head>


Step 4:
Now search for  <div id='content-wrapper'>.
copy the following code above or before the <div id='content-wrapper'> :  
Download this Javascript 2:
<!--slider content starts-->
<script type='text/javascript'>
var $jx = jQuery.noConflict(); 
$jx(function() {
 $jx(&quot;.mygallery&quot;).jCarouselLite({
 btnNext: &quot;.nextb&quot;,
        btnPrev: &quot;.prevb&quot;,
    visible: 5,
    speed: 1000,

    easing: &quot;backout&quot;
        
    });

});
</script>

<div id='slidearea' style='height:242px;overflow:hidden;margin:0px 20px 0 20px;position:relative;width:950px;background:#F2F2F2;border:1px solid #E9E9E9;right:20px'>

<div id='gallerycover'>
<div class='mygallery'>
        <ul>

<li>
        <div class='mytext'>
        <a href='http://Your-Post-Link1'>
        <img class='sidim' src='http://Your-Image-Link1'/>
        </a>
        <div class='clear'/>  
        <h2><a href='http://Your-Post-Link1'>Post Title</a></h2>
        <p>Post content summary</p>
        </div>       
        </li>
     <li>
        <div class='mytext'>
        <a href='http://Your-Post-Link2'>
              <img class='sidim' src='http://Your-Image-Link2'/>
        </a>
        <div class='clear'/>  
        <h2><a href='http://Your-Post-Link2'>Post Title</a></h2>
        <p>Post content summary</p>
        </div>       
        </li>

        <li>
        <div class='mytext'>
        <a href='http://Your-Post-Link3'>
                <img class='sidim' src='http://Your-Image-Link3'/>
        </a>
        <div class='clear'/>  
        <h2><a href='http://Your-Post-Link3'>Post Title</a></h2>
        <p>Post content summary</p>
        </div>       
        </li>

        <li>
        <div class='mytext'>
        <a href='http://Your-Post-Link4'>
                <img class='sidim' src='http://Your-Image-Link4'/>
        </a>
        <div class='clear'/>  
        <h2><a href='http://Your-Post-Link4'>Post Title</a></h2>
        <p>Post content summary</p>
        </div>       
        </li>

        <li>
        <div class='mytext'>
        <a href='http://Your-Post-Link5'>
                <img class='sidim' src='http://Your-Image-Link5'/>
        </a>
        <div class='clear'/>  
        <h2><a href='http://Your-Post-Link5'>Post Title</a></h2>
        <p>Post content summary</p>
        </div>       
        </li>

  </ul>

    <div class='clear'/>  
   
</div>
</div>

   <a class='prevb' href='#'/>
   <a class='nextb' href='#'/>  

 </div>
<!--slider content from BreakTheSecurity ends-->

Save the Template.

Step 5:
Change the http://your-post-link1,2,3,4,5 with your links to your post.
Change the http://your-image-link1,2,3,4,5 with your post image link.
and change the Post content summary and post title with your post title and summary.