Thursday, 23 August 2012

How to add Featured Content Slider for Blogger Using jQuery.

Learn how to add  Featured Content Slider for Blogger Using jQuery.
Follow simple step to add this trick in your blogger/ blogspot now---->>>>


* First go to your blogger Dashboard.

* Now click in design tab and edit HTML.

* Now click small box to expand your blogger template.

* Now find this code <head> and copy below code and paste after <head>

<link href='https://sites.google.com/site/mauganj1/home/style1.css' rel='stylesheet' type='text/css'/>
 
* Now  again find ]]></b:skin> by CTRL+F key and copy below code and paste before ]]></b:skin>


#featured{
width:400px;
padding-right:250px;
position:relative;
border:5px solid #ccc;
height:250px;
background:#fff;
}
#featured ul.ui-tabs-nav{
position:absolute;
top:0; left:400px;
list-style:none;
padding:0; margin:0;
width:250px;
}
#featured ul.ui-tabs-nav li{
padding:1px 0; padding-left:13px;
font-size:12px;
color:#666;
}
#featured ul.ui-tabs-nav li img{
float:left; margin:2px 5px;
background:#fff;
padding:2px;
border:1px solid #eee;
}
#featured ul.ui-tabs-nav li span{
font-size:11px; font-family:Verdana;
line-height:18px;
}
#featured li.ui-tabs-nav-item a{
display:block;
height:60px;
color:#333;  background:#fff;
line-height:20px;
}
#featured li.ui-tabs-nav-item a:hover{
background:#f2f2f2;
}
#featured li.ui-tabs-selected{
background:url('http://i47.tinypic.com/6jojr4.jpg') top left no-repeat;
}
#featured ul.ui-tabs-nav li.ui-tabs-selected a{
background:#ccc;
}
#featured .ui-tabs-panel{
width:400px; height:250px;
background:#999; position:relative;
}
#featured .ui-tabs-panel .info{
position:absolute;
top:180px; left:0;
height:70px;
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjAJwk1NnpEdyuAJzAQwr6y9aLcQ4oFXL0KdxjmFhIo5_rGhoJWjoAiIJ6hs-28noN1wjiR_SUUJuiv0P8VACGs2K4cRd3U6inQySo8WTT4_Bo7_6tyx6p0A6iGkRAwjf6-6LzqduqRoI/s1600/transparent-bg.png');
}
#featured .info h2{
font-size:18px; font-family:Georgia, serif;
color:#fff; padding:5px; margin:0;
overflow:hidden;
}
#featured .info p{
margin:0 5px;
font-family:Verdana; font-size:11px;
line-height:15px; color:#f0f0f0;
}
#featured .info a{
text-decoration:none;
color:#fff;
}
#featured .info a:hover{
text-decoration:underline;
}
#featured .ui-tabs-hide{
display:none;
}

* Now again find <div id=’content-wrapper’> and copy below code and paste before  <div id=’content-wrapper’>

<div id='featured'>
      <ul class='ui-tabs-nav'>
          <li class='ui-tabs-nav-item ui-tabs-selected' id='nav-fragment-1'><a href='#fragment-1'><img alt='pic1' src='http://i49.tinypic.com/e1aohv.jpg'/><span>Install Mac OS X on Intel/AMD PC using iATKOS v7</span></a></li>
          <li class='ui-tabs-nav-item' id='nav-fragment-2'><a href='#fragment-2'><img alt='blogger' src='http://i438.photobucket.com/albums/qq108/fooble11/image2-small.jpg'/><span>How to remove &quot;showing post with label&quot; in Blogger</span></a></li>
          <li class='ui-tabs-nav-item' id='nav-fragment-3'><a href='#fragment-3'><img alt='buzz' src='http://i438.photobucket.com/albums/qq108/fooble11/new1.jpg'/><span>How to add Google Buzz to Blogspot blog</span></a></li>
         <li class='ui-tabs-nav-item' id='nav-fragment-4'><a href='#fragment-4'><img alt='chat' src='http://i50.tinypic.com/34xfg4m.jpg'/><span>Chat live with your blog visitors using Yahoo Pingbox</span></a></li>
      </ul>
      <!-- First Content -->
      <div class='ui-tabs-panel' id='fragment-1' style=''>
         <img alt='mac' src='http://i47.tinypic.com/rsbi80.jpg'/>
 <div class='info'>
          <h3><a href='Link here '>Post title here</a></h3>
          <p>Description goes here, this is just a test description....<a href='http://www.bloggermint.com/2010/02/install-mac-os-x-on-intelamd-pc-using.html'>read more</a></p>
          </div>
      </div>
      <!-- Second Content -->
      <div class='ui-tabs-panel ui-tabs-hide' id='fragment-2' style=''>
          <img alt='' src='http://i50.tinypic.com/33kprh5.jpg'/>
          <div class='info'>
          <h3><a href='Link here'>Post title here</a></h3>
          <p>Description goes here, this is just a test description....<a href='#'>read more</a></p>
         </div>
     </div>
      <!-- Third Content -->
      <div class='ui-tabs-panel ui-tabs-hide' id='fragment-3' style=''>
          <img alt='' src='http://i47.tinypic.com/2191lqt.jpg'/>
          <div class='info'>
          <h3><a href='Link Here'>Post title here</a></h3>
          <p>Description goes here, this is just a test description....<a href='#'>read more</a></p>
          </div>
      </div>
      <!-- Fourth Content -->
      <div class='ui-tabs-panel ui-tabs-hide' id='fragment-4' style=''>
          <img alt='' src='http://i48.tinypic.com/10pwp3o.jpg'/>
          <div class='info'>
          <h3><a href='link here'>Post title here</a></h3>
          <p>Description goes here, this is just a test description....<a href='#'>read more</a></p>
          </div>
      </div>  </div>

Note:- Add your post title and description and their link  ok

* Now save your blogger template now you are done.

* This is an optional step, if your blog already includes the jQuery and jQuery UI libraries. If not, follow this instructions. Copy the code below and paste it after <head>

 
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
 <script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js' type='text/javascript'/>

No comments: