Get Featured Content Slider Using jQuery / For every Blogger !

Get Featured Content Slider Using jQuery

Follow  simple and easy step to adding this special slider to your blog ---->>>
* First Go to your blogger Dashboard.

* Now click in Design tab and EDIT HTML.

* Click in small box To Expand your blogger Template.

* Now find this code </head> by CTRL+F key

* Copy below code and paste before </head>

<link rel="stylesheet" type="text/css" href="http://demo.webdeveloperplus.com/featured-content-slider/style.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js" ></script>
<script type="text/javascript">
 $(document).ready(function(){
  $("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
 });
</script>

* Now click to save your blogger Template.

* Again go to your blogger Dashboard and click in Design tab and edit HTML.

* Now you are here ----->>>> Page Element.

* Click in Add Gadget which is in your blog sidebar .

* When open new window click in HTML/javascript from list.

* When open new blank box copy below code and paste in blank box.

<div id="featured" >
    <ul class="ui-tabs-nav">
         <li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1"><a href="FIRST POST URL HERE"><img src="http://demo.webdeveloperplus.com/featured-content-slider/images/image1-small.jpg" alt="" /><span>FIRST POST TITLE HERE</span></a></li>
         <li class="ui-tabs-nav-item" id="nav-fragment-2"><a href="SECOND POST URL HERE"><img src="http://demo.webdeveloperplus.com/featured-content-slider/images/image2-small.jpg" alt="" /><span>SECOND POST TITLE HERE</span></a></li>
         <li class="ui-tabs-nav-item" id="nav-fragment-3"><a href="THIRD POST URL HERE"><img src="http://demo.webdeveloperplus.com/featured-content-slider/images/image3-small.jpg" alt="" /><span>THIRD POST TITLE HERE</span></a></li>

         <li class="ui-tabs-nav-item" id="nav-fragment-4"><a href="FOURTH POST URL HERE"><img src="http://demo.webdeveloperplus.com/featured-content-sliderimages/image4-small.jpg" alt="" /><span>FOURTH POST TITLE HERE</span></a></li>
   
       </ul>

     <!-- First Content -->
     <div id="fragment-1" class="ui-tabs-panel" style="">
   <img src="http://demo.webdeveloperplus.com/featured-content-slider/images/image1.jpg" alt="" />
    <div class="info" >
    <h2><a href="FIRST POST URL HERE" >FIRST POST TITLE HERE</a></h2>

    <p>SHORT DESCRIPTION HERE....<a href="FIRST POST URL HERE" >read more</a></p>
    </div>
     </div>

     <!-- Second Content -->
     <div id="fragment-2" class="ui-tabs-panel ui-tabs-hide" style="">
   <img src="http://demo.webdeveloperplus.com/featured-content-slider/images/image2.jpg" alt="" />
    <div class="info" >

    <h2><a href="SECOND POST URL HERE" >SECOND POST TITLE HERE</a></h2>
    <p>SHORT DESCRIPTION HERE....<a href="SECOND POST URL HERE" >read more</a></p>
    </div>
     </div>

     <!-- Third Content -->
     <div id="fragment-3" class="ui-tabs-panel ui-tabs-hide" style="">
   <img src="http://demo.webdeveloperplus.com/featured-content-slider/images/image3.jpg" alt="" />

    <div class="info" >
    <h2><a href="THIRD POST URL HERE" >THIRD POST TITLE HERE</a></h2>
    <p>SHORT DESCRIPTION HERE....<a href="THIRD POST URL HERE" >read more</a></p>
          </div>
     </div>

     <!-- Fourth Content -->
     <div id="fragment-4" class="ui-tabs-panel ui-tabs-hide" style="">

   <img src="http://demo.webdeveloperplus.com/featured-content-slider/images/image4.jpg" alt="" />
    <div class="info" >
    <h2><a href="FOURTH POST URL HERE" >FOURTH POST TITLE HERE</a></h2>
    <p>SHORT DESCRIPTION HERE....<a href="FOURTH POST URL HERE" >read more</a></p>
          </div>
     </div>
  
  

  </div>

 </div>

NOTE:- Remove all Highlighted Text From abve code with your own ok.

* Now click To save your HTML/javascript and after saving this element  drag and drop this element below your blog header and again click to save.

* Now you are done.