Wednesday, August 21, 2013

Amazing Blogger Slider Widget


When i start blogging, I have divide the blogging tips and tricks in my sub domain.  unfortunately i don't have time to maintain that blog.  So From now i am going to combine both of the topics in our main Doamin.

One of My Link partner asked for the slider widget code.  So i am starting the blogging tips from here.  You want demo of this slider?just press refresh, because you already seeing the slider. You want the screenshot? Just press Prt Scr button.

Do you like the above slider? if you say, then you may curious to know about installing this widget.  Ok let me start the tutorial now.

Download these files:
  1. Style Sheet
  2. 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 javascript file downloaded.  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'>.
<!--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