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:


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.

2 comments :

Elizabeth J. Neal said...

You have raised an important issue..Thanks for sharing..I would like to read more current affairs from this blog..keep posting.. vitoka.com

dipali sharma said...

These competitors entails lot lots of competitions that are hung on regular basis or occasionally as well as to gain them you require to rack up greatest facebook likes on your ID. buy usa facebook fans

Post a Comment