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>
* 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.
* 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.
* 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.
No comments:
Post a Comment