Add diffrent JQuery Featured Post Widget for Your blogspot/blogger

Learn how to add Cool JQuery Featured Post Widget in your blospot blog . this blog tell you easy step[ to add this trick to your blog now.

Now follow simple step to add this widget to yor blog Now--->>>
* First go to your blogger Dashboard .

* Now click on Design tab and edit html.

* Now expand your template  and find this code ]]></b:skin>

* Now copy below code and paste before  ]]></b:skin>

<span class="data-post">#featured{
  width:400px;
  padding-right:250px;
  position:relative;
  height:250px;
  background:#fff;
  border:5px solid #ccc;
 }
   
 #featured ul.ui-tabs-nav{
     position:absolute;
     top:0; left:336px;
     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 span{
     font-size:11px; font-family:Verdana;
     line-height:18px;
 }
  
 #featured .ui-tabs-panel{
     width:336px; height:250px;
     background:#999; position:relative;
         overflow:hidden;
 }
 #featured .ui-tabs-hide{
     display:none;
 }
  
 #featured li.ui-tabs-nav-item a{/*On Hover Style*/
     display:block;
     height:60px;
     color:#333;  background:#fff;
     line-height:20px;
     outline:none;
 }
 #featured li.ui-tabs-nav-item a:hover{
     background:#f2f2f2;
 }
 #featured li.ui-tabs-selected{ /*Selected tab style*/
     background:url('http://demo.webdeveloperplus.com/featured-content-slider/images/selected-item.gif') top left no-repeat;
 }
 #featured ul.ui-tabs-nav li.ui-tabs-selected a{
     background:#ccc;
 }
  
 #featured ul.ui-tabs-nav li img{
     float:left; margin:2px 5px;
     background:#fff;
     padding:2px;
     border:1px solid #eee;
 }
 #featured .ui-tabs-panel .info{
     position:absolute;
     top:180px; left:0;
     height:70px; width: 400px;
     background: url('http://demo.webdeveloperplus.com/featured-content-slider/images/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;
 }</span>

* Now again find with ctrl+f  this code </head> and copy below code and paste it just before </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'/>
<script type='text/javascript'>
    $(document).ready(function(){
        $(&quot;#featured &gt; ul&quot;).tabs({fx:{opacity: &quot;toggle&quot;}}).tabs(&quot;rotate&quot;, 5000, true);
    });
</script> 

* Now again find this code <div id='main-wrapper'> and copy below code and paste it before <div id='main-wrapper'>

You can above code by adding by ADD ELEMENT

* Now save your template now you are done.