Search this keyword

Sunday 19 August 2012

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.

0 comments :

Post a Comment