How to Add Featured Content Slider Using jQuery / For Every Blogger !

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 above code with your own links.

* 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.