JQUERY IMAGE SLIDER FOR BLOGGER

Moving jquery image slider for featured content in Blogger

How to Install This Widget on Blogger?

Steps...

A. Adding CSS Theme Code

B. Adding Script Code

C. Adding HTML Code

Adding CSS Theme Code

In old layout: Go to Dashboard - Design - Edit HTML - Expand Widget Templates.

In new layout: Go to Dashboard - Template - Edit Template HTML - Expand Widget Templates.

Now find (CTRL+F) this code in the template:

]]></b:skin>

And immediately before it, paste this code:

#myslides{

background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3TaGS_En0AmTcv7Vemw3P2Phih960coABLz3YkRrsVoDnmCYjFST3wjV3NZ_gd4omBzF_aje6E3nQNjJRKYCliffTTDRUUX_NSF3h9ALnLG3ZMFga9bNV0ask8zx4xctXTMzaHb29LA/s1600/mslid.jpg) repeat-x;

width: 650px;

height:165px;

margin-bottom:5px;

}

.stepcarousel{

position: relative; /*leave this value alone*/

overflow: scroll; /*leave this value alone*/

width: 554px; /*Width of Carousel Viewer itself*/

height: 160px; /*Height should enough to fit largest content's height*/

margin: 0px 48px 5px 48px;

}

.stepcarousel .belt{

position: absolute; /*leave this value alone*/

left: 0;

top: 0;

}

.stepcarousel .panel{

float: left; /*leave this value alone*/

overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/

margin: 20px 10px ; /*margin around each panel*/

width:170px;  /*Width of each panel holding each content. If removed, widths should  be individually defined on each content DIV then. */

background:#0e1829;

height:120px;

border:1px solid #1d2c44;

}

.stepcarousel .panel p{

text-align: left; /*leave this value alone*/

overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/

margin: 5px 5px ; /*margin around each panel*/

}

.stepcarousel .panel h2{

text-align: left; /*leave this value alone*/

height:20px;

overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/

margin: 2px 5px ; /*margin around each panel*/

font-size:16px;

font-weight:bold;

text-align:center;

font-family:Georgia,century gothic,Arial,verdana, sans-serif;

}

.stepcarousel .panel img{

float: left; /*leave this value alone*/

background:#0E1829; /*clip content that go outside dimensions of holding panel DIV*/

margin: 5px 5px 5px 5px; /*margin around each panel*/

padding:0px 0px;

}

Adding Script Code

Now find (CTRL+F) this code in the template:

Step 2:And find the code </head>
Step 3: Now add the following code just before the </head> tag.

<a href="http://24work.blogspot.com" target="_blank" title="Blogger  Widgets"><img  src="http://safir85.ucoz.com/24work-blogspot/cursor-24work-10.png"  border="0" alt="Blogger Widgets" style="position:absolute; top: 0px;  right: 0px;" /></a><!-- JavaScript Slider -->

<script src='http://safir85.ucoz.com/24work-blogspot/featured-post-s/jquery-1.3.2.min.js' type='text/javascript'/>

<script src='http://safir85.ucoz.com/24work-blogspot/featured-post-s/30111191622-slider.js' type='text/javascript'/>

<!-- End JavaScript Slider -->

<script type='text/javascript'>

stepcarousel.setup({

galleryid: &#39;mygallery&#39;, //id of carousel DIV

beltclass: &#39;belt&#39;, //class of inner &quot;belt&quot; DIV containing all the panel DIVs

panelclass: &#39;panel&#39;, //class of panel DIVs each holding content

panelbehavior: {speed:1500, wraparound:true, persist:true},

autostep: {enable:true, moveby:1, pause:1000},

defaultbuttons: {enable: true, moveby: 4, leftnav: [&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmNilYQ_QyoW_XH2RcgUJlP4IpQ5PKI7JJk6QBuJygkbis_DhaYgwUgI-D2b22gMogzUuk4VHgov9wsun17h6HEYyNs45jDRLYfANW3AmiW9_NA_67MQUQZTGM1SDegAYQ8Y03vaTrX88/s400/left.jpg&#39;, -48, 0], rightnav: [&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVYN7EM1vcJj4T1r4AJ7geZlTYni7hIblWay0gxjlDGYl9CGUJgGBWy9i7XyOVgn0iVFEGP9bhnbY3HfSgncduXJzjbdvk9zvW3eweCOwgrP5_RdQS4cn-4B3V5QURAbie9YEhbeknfkU/s400/right.jpg&#39;, 0, 0]},

statusvars:  [&#39;statusA&#39;, &#39;statusB&#39;,  &#39;statusC&#39;], //register 3 variables that contain current  panel (start), current panel (last), and total panels

contenttype:  [&#39;external&#39;] //content setting  [&#39;inline&#39;] or [&#39;external&#39;,  &#39;path_to_external_file&#39;]

})

</script>

And now click Save Template

Adding HTML Code

So, let's see how to install this cool widget in your blog..

1. Sign into Blogger dashboard

old Blogger interface: Go to Dashboard - Design - Page Elements - Add a Gadget.If you're using the new Blogger interface: Go to Dashboard - Layout - Add a Gadget.Select 'HTML/Javascript' and add the one of code given below.Just copy and paste this code..

<div id="myslides">

<div id="mygallery" class="stepcarousel">

<div class="belt">

<!-- 1st Template -->

<div class='panel'>

<a  href='http://bdlab.blogspot.com/' target='blank' title='made in  spain'> <img alt='made in spain' height='135'  src='http://safir85.ucoz.com/bdlab-blogspot/24work/falling-text/8.gif'  width='185'/> </a>

</div>

<!--end code of 1st Template -->

<!-- 2nd Template -->

<div class='panel'>

<a  href='http://bdlab.blogspot.com/' target='blank' title='fashion  press'> <img alt='fashion press' height='135'  src='http://safir85.ucoz.com/bdlab-blogspot/24work/falling-text/8.gif'  width='185'/> </a>

</div>

<!--end code of 2nd Template -->

<!-- 3rd Template -->

<div class='panel'>

<a  href='http://bdlab.blogspot.com/' target='blank' title='techlure'>  <img alt='techlure' height='135'  src='http://safir85.ucoz.com/bdlab-blogspot/24work/falling-text/8.gif'  title='techlure' width='185'/> </a>

</div>

<!--end code of 3rd Template -->

<!-- 4th Template -->

<div class='panel'>

<a  href='http://bdlab.blogspot.com/' target='blank' title='woodmag'>  <img alt='woodmag' height='135'  src='http://safir85.ucoz.com/bdlab-blogspot/24work/falling-text/8.gif'  title='techlure' width='185'/> </a>

</div>

<!--end code of 4th Template -->

<!-- 5th Template -->

<div class='panel'>

<a  href='http://bdlab.blogspot.com/' target='blank' title='showcase'>  <img alt='showcase' height='135'  src='http://safir85.ucoz.com/bdlab-blogspot/24work/falling-text/8.gif'  title='showcase' width='185'/> </a>

</div>

<!--end code of 5th Template -->

<!-- 6th Template -->

<div class='panel'>

<a  href='http://bdlab.blogspot.com/' target='blank' title='versatile'>  <img alt='versatile' height='135'  src='http://safir85.ucoz.com/bdlab-blogspot/24work/falling-text/8.gif'  title='versatile' width='185'/> </a>

</div>

<!--end code of 6th Template -->

</div></div></div>

And now click Save

Make A Simple Featured Content SlideShow Using JQuery

]]></b:skin>

And immediately before it, paste this code:

#contentSlide {
background : #ddd; -moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-webkit-border-top-left-radius:5px;
-webkit-border-top-right-radius:5px;
-webkit-border-bottom-left-radius:5px;
-webkit-border-bottom-right-radius:5px;
height : 228px; margin-bottom: 10px;
padding : 10px 0px 10px;
}
#slideshow {
margin : 0 auto;
width : 953px;
height : 230px;
background : #eeeeee none repeat scroll 0 0;
position : relative;
}
#slideshow #slidesContainer {
margin : 0 auto;
width : 845px;
height : 228px;
overflow : auto;
position : relative;
}
#slideshow #slidesContainer .slide {
margin : 0 auto;
width : 845px;
height : 228px;
}
.control {
display : block;
width : 39px;
height : 228px;
text-indent : -10000px;
position : absolute;
cursor : pointer;
}
#leftControl {
top : 0;
left : 0;
width : 55px;
background  : transparent  url(http://lh6.ggpht.com/_9b1traaMESE/Sms_Pg_IsqI/AAAAAAAAAXU/tTxdiIsFY4g/previous%20gray.jpg)no-repeat  scroll 0 0;
}
#rightControl {
top : 0;
right : 0;
background  : transparent  url(http://lh6.ggpht.com/_9b1traaMESE/Sms-s5qb9iI/AAAAAAAAAXQ/edpXAZIaxCI/next%20gray.jpg)  no-repeat scroll 0 0;
width : 55px;
}
.slide h2, .slide p {
margin : 15px;
}
.slide h2 {
font : italic 24px Georgia, "Times New Roman", Times, serif;
color : #212421;
letter-spacing : -1px;
}
.slide img {
float : right;
margin : 0 15px;
padding : 1px;
}

Adding Script Code

Now find (CTRL+F) this code in the template:

Step 2:And find the code </head>
Step 3: Now add the following code just before the </head> tag.

<a href="http://24work.blogspot.com" target="_blank" title="Blogger  Widgets"><img  src="http://safir85.ucoz.com/24work-blogspot/cursor-24work-10.png"  border="0" alt="Blogger Widgets" style="position:absolute; top: 0px;  right: 0px;" /></a><script  src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'  type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){var  currentPosition=0;var slideWidth=845;var slides=$('.slide');var  numberOfSlides=slides.length;$('#slidesContainer').css('overflow','hidden');slides.wrapAll('<div   id="slideInner"></div>').css({'float':'left','width':slideWidth});$('#slideInner').css('width',slideWidth*numberOfSlides);$('#slideshow').prepend('<span  class="control" id="leftControl">Clicking moves  left</span>').append('<span class="control"  id="rightControl">Clicking moves  right</span>');manageControls(currentPosition);$('.control').bind('click',function(){currentPosition=($(this).attr('id')=='rightControl')?currentPosition+1:currentPosition-1;manageControls(currentPosition);$('#slideInner').animate({'marginLeft':slideWidth*(-currentPosition)})});function   manageControls(position){if(position==0){$('#leftControl').hide()}else{$('#leftControl').show()}if(position==numberOfSlides-1){$('#rightControl').hide()}else{$('#rightControl').show()}}
});
//]]>
</script>

SlideShow Featured Content Using JQuery
<!-- Slideshow HTML -->
<div id='contentslide'><div id='slideshow'>
<div id='slidescontainer'>
<div class='slide'>
<h2>Featured Content Slider Using JQuery!</h2>
<p><a  href='http://bdlab.blogspot.com/'><img alt='external links -  jquery' height='115'  src='http://safir85.ucoz.com/bdlab-blogspot/24work/falling-text/8.gif'  width='215'/></a> TEXT-OF-THE-SLIDE-1.
<a href="http://bdlab.blogspot.com/"><br /><b> Read More &#187;</b></a>

</p></div>
<div class='slide'>
<h2>Thumbnail With Caption Using Simple JQuery</h2>
<p><a  href='http://bdlab.blogspot.com/'><img alt='external links -  jquery' height='115'  src='http://safir85.ucoz.com/bdlab-blogspot/24work/falling-text/8.gif'  width='215'/></a> TEXT-OF-THE-SLIDE-1.
<a href="http://bdlab.blogspot.com/"><br /><b> Read More &#187;</b></a>

</p></div>
<div class='slide'>
<h2>Multi Level Drop-Down Menu Dengan CSS dan JQuery!</h2>
<p><a  href='http://bdlab.blogspot.com/'><img alt='external links -  jquery' height='115'  src='http://safir85.ucoz.com/bdlab-blogspot/24work/falling-text/8.gif'  width='215'/></a> TEXT-OF-THE-SLIDE-1.
<a href="http://bdlab.blogspot.com/"><br /><b> Read More &#187;</b></a>
</p></div>
<div class='slide'>
<h2>Super Sexy Bookmarks Widget for Blogger !</h2>
<p><a  href='http://bdlab.blogspot.com/'><img alt='thumbnail image that  says sleek button using photoshop that links to a photoshop tutoril.'  height='115'  src='http://safir85.ucoz.com/bdlab-blogspot/24work/falling-text/8.gif'  width='215'/></a> TEXT-OF-THE-SLIDE-1.
<a href="http://bdlab.blogspot.com/"><br /><b> Read More &#187;</b></a>
</p></div>
</div>
</div></div>
<!-- Slideshow HTML -->

And now click Save

Note: Please edit the title of the content buddy, description and link content.

New And Stylish JQuery Featured Post Widget for Blogger Blogs

New And Stylish JQuery Featured Post Widget for Blogger Blogs

]]></b:skin>

And immediately before it, paste this code:

#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: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 span{
font-size:11px; font-family:Verdana;
line-height:18px;
}
#featured .ui-tabs-panel{
width:400px; 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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFZ7sNdAdmvqgxLfmnPoCC896XP-iWrKGWaNZpPecvXFinsLtB-oHoKxH0OZJy7aOBZmUdW8_MJaIhnugHpvTbFKJmGdbc0gmdfA6bcZ3Vr6qJ-bF6fvQphuOOg9dt5iCnFmxY20_18Tg/s320/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://i47.tinypic.com/117s1g9.jpg') ;
}
#featured .info h2{
font-size:14px; 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;
}

Adding Script Code

Now find (CTRL+F) this code in the template:

Step 2:And find the code </head>
Step 3: Now add the following code just before the </head> tag.

<a href="http://24work.blogspot.com" target="_blank" title="Blogger  Widgets"><img  src="http://safir85.ucoz.com/24work-blogspot/cursor-24work-10.png"  border="0" alt="Blogger Widgets" style="position:absolute; top: 0px;  right: 0px;" /></a><script  src='http://safir85.ucoz.com/24work-blogspot/featured-post-s/jquery-1.3.2.min.js'  type='text/javascript'/>
<script src='http://safir85.ucoz.com/24work-blogspot/featured-post-s/jquery-1.5.3-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>

<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 src="http://i49.tinypic.com/qpncrq.jpg"  alt="" /><span>Kerinduan Pada  Baitullah</span></a></li>
<li  class="ui-tabs-nav-item" id="nav-fragment-2"><a  href="#fragment-2"><img src="http://i49.tinypic.com/sqh9cl.jpg"  alt="" /><span>6 Kerusakan Valentine day's  </span></a></li>
<li class="ui-tabs-nav-item"  id="nav-fragment-3"><a href="#fragment-3"><img  src="http://i45.tinypic.com/sy6p3k.jpg" alt=""  /><span>Keajaiban Do'a</span></a></li>
<li  class="ui-tabs-nav-item" id="nav-fragment-4"><a  href="#fragment-4"><img src="http://i50.tinypic.com/14jn30n.jpg"  alt="" /><span>Wanita yang Lisannya  Al-Qur'an</span></a></li>
</ul>
<!-- First Content -->
<div id="fragment-1" class="ui-tabs-panel" style="">
<img src="http://i45.tinypic.com/33ue3yo.jpg" alt="" />
<div class="info" >
<h2><a href="#" >Kerinduan Pada Baitullah</a></h2>
<p>Lorem ipsum dolor sit amet, to cancel reply. Used Cars. ....<a href="#" >read more</a></p>
</div>
</div>
<!-- Second Content -->
<div id="fragment-2" class="ui-tabs-panel ui-tabs-hide" style="">
<img src="http://i48.tinypic.com/mts5sg.jpg" alt="" />
<div class="info" >
<h2><a href="#" >6 Kerusakan Valentine days </a></h2>
<p>Vestibulum  leo quam, accumsan nec porttitor a, euismod ac tortor. Sed ipsum lorem,  sagittis...<a href="#" >read more</a></p>
</div>
</div>
<!-- Third Content -->
<div id="fragment-3" class="ui-tabs-panel ui-tabs-hide" style="">
<img src="http://i50.tinypic.com/av23bm.jpg" alt="" />
<div class="info" >
<h2><a href="#" >Keajaiban Do'a</a></h2>
<p>liquam  erat volutpat. Proin id volutpat nisi. Nulla facilisi. Curabitur  facilisis sollicitudin ornare....<a href="#" >read  more</a></p>
</div>
</div>
<!-- Fourth Content -->
<div id="fragment-4" class="ui-tabs-panel ui-tabs-hide" style="">
<img src="http://i47.tinypic.com/212h1qt.jpg" alt="" />
<div class="info" >
<h2><a href="#" >Wanita yang lisannya al-qur'an</a></h2>
<p>Quisque  sed orci ut lacus viverra interdum ornare sed est. Donec porta, erat eu  pretium luctus ....<a href="#" >read more</a></p>
</div>
</div>
</div>

And now click Save

Note: Please edit the above code by replacing the title, description and link content

Awesome Automatic Content Slider for Blogger using jQuery

Awesome Automatic Content Slider for Blogger using jQuery

]]></b:skin>

And immediately before it, paste this code:

/* START
--------------------------------------------------------------------
Awesome Automatic Content Sliders for Blogger using jQuery


http://css-tricks.com/889-creating-a-slick-auto-playing-featured-content-slider/

--------------------------------------------------------------------
Featured Content Slider
*/
#slider-wrap  { width: 500px; margin: 25px auto; position: relative; min-height:  500px;font-size: 10px; background:  url(http://i1133.photobucket.com/albums/m596/abu-farhan/featuredcontentslider-bg.png)  top center; }
.slider-wrap{ font-family: Arial, Helvetica, sans-serif; width: 419px; position: absolute; top: 87px; left: 40px; }
.stripViewer .panelContainer
.panel ul{ text-align: left; margin: 0 15px 0 30px; }
.stripViewer{ position: relative; overflow: hidden; width: 419px; height: 285px; }
.stripViewer .panelContainer{ position: relative; left: 0; top: 0; }
.stripViewer .panelContainer .panel { float: left; height: 100%; position: relative; width: 419px; }
.stripNavL, .stripNavR, .stripNav{ display: none; }
.nav-thumb { border: 1px solid black; margin-right: 5px; }
#movers-row { margin: -46px 0 0 62px; }
#movers-row div { width: 20%; float: left; }
#movers-row div a.cross-link { float: right; }
.photo-meta-data{  background:  url(http://i1133.photobucket.com/albums/m596/abu-farhan/featuredcontentslider-transpBlack.png);  padding: 10px; height: 40px; margin-top: -50px; position: relative;  z-index: 9999; color: white; }
.photo-meta-data span { font-size: 13px; }
.cross-link { display: block; width: 62px; margin-top: -10px; position: relative; padding-top: 10px; z-index: 9999; }
.active-thumb  { background: transparent  url(http://i1133.photobucket.com/albums/m596/abu-farhan/featuredcontentslider-icon-uparrowsmallwhite.png)  top center no-repeat; }
/* END
--------------------------------------------------------------------
Awesome Automatic Content Sliders for Blogger using jQuery

--------------------------------------------------------------------
Featured Content Slider
*/

Adding Script Code

Now find (CTRL+F) this code in the template:

Step 2:And find the code </head>
Step 3: Now add the following code just before the </head> tag.

<!-- jQuery -->
<a href="http://24work.blogspot.com"  target="_blank" title="Blogger Widgets"><img  src="http://safir85.ucoz.com/24work-blogspot/cursor-24work-10.png"  border="0" alt="Blogger Widgets" style="position:absolute; top: 0px;  right: 0px;" /></a><script  src='http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js'  type='text/javascript'/>
<script  src='http://safir85.ucoz.com/24work-blogspot/featured-post-s/FeaturedContentSlider-01.pack.js'  type='text/javascript'/>
<script type='text/javascript'>
var theInt = null;
var $crosslink, $navthumb;
var curclicked = 0;
theInterval = function(cur){
clearInterval(theInt);
if( typeof cur != &#39;undefined&#39; )
curclicked = cur;
$crosslink.removeClass(&quot;active-thumb&quot;);
$navthumb.eq(curclicked).parent().addClass(&quot;active-thumb&quot;);
$(&quot;.stripNav ul li a&quot;).eq(curclicked).trigger(&#39;click&#39;);
theInt = setInterval(function(){
$crosslink.removeClass(&quot;active-thumb&quot;);
$navthumb.eq(curclicked).parent().addClass(&quot;active-thumb&quot;);
$(&quot;.stripNav ul li a&quot;).eq(curclicked).trigger(&#39;click&#39;);
curclicked++;
if( 6 == curclicked )
curclicked = 0;
}, 3000);
};
$(function(){
$(&quot;#main-photo-slider&quot;).codaSlider();
$navthumb = $(&quot;.nav-thumb&quot;);
$crosslink = $(&quot;.cross-link&quot;);
$navthumb
.click(function() {
var $this = $(this);
theInterval($this.parent().attr(&#39;href&#39;).slice(1) - 1);
return false;
});
theInterval();
});
</script>

<div id="slider-wrap">
<script style="text/javascript"  src="http://safir85.ucoz.com/24work-blogspot/featured-post-s/galleryposts-FeaturedContentSlider.js"></script>
<script style="text/javascript">
var numposts_gal = 6; //recommended
var numchars_gal = 150;
var random_posts = false; // random posts
</script>
<script src="http://24works.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts&max-results=999999"></script>
</div>

And now click Save

credit by abu-farhan

Using jQuery Slider Featured Posts (glory)

]]></b:skin>

And immediately before it, paste this code:

/* featured fade */
#wrapper-featured{
padding:10px 0 ;
width:650px;
height: 326px;
margin:0 ;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgI-kT1bC8uiNgNVmQfOuaMZ645k2fhqgplFkTD-LmYtL-wnq2s1f5JUY3PYP0c3d7fP0AIBbvOcigHFrxxQWKizVBw7bIWXIcIJyISarp1Vl3Q39nGUJT5V6a-ipgQGPJAa2cVvD6jqZpt/s1600/bg_featured.jpg) no-repeat;
position:relative;
}
#wrapper-myslides {
width:550px;
height:210px;
padding: 0 0 ;
margin: 3px 0 0 10px;
position:relative;
float:left;
}
#myslides {
width:550px;
height:210px;
padding: 0 0 50px;
margin: 0 18px ;
overflow:hidden;
}
.panel{
width:550px;
height:210px;
}
#myslides img.crop-foto {
margin:8px 10px 10px 9px;
border:1px solid #fff;
display:block;
position:absolute;
right:3px;
top:0;
}
.featured-entry {
text-align:left;
line-height:1.5em;
font-style:italic;
font-size:12px;
font-family: georgia,Arial,Verdana, Helvetica, sans-serif;
padding: 20px 10px 0;
width:280px;
color:#fff;
position:absolute;
top:0;
left:0;
}
h3.featured-title {
font-size:22px;
text-align:left;
font-family:Georgia, Arial,Verdana, Helvetica, sans-serif;
margin:10px 0 5px;
padding:0 0 5px;
font-weight:normal;
line-height:1em;
font-style:normal;
}
h3.featured-title a:link, h3.featured-title a:visited{
color:#fff;
}
h3.featured-title a:hover {
color:#b1e1ff;
}
#nav-slides a#prev {
position:absolute;
bottom:105px;
left:135px;
z-index:1;
color:#800;
width:14px;
height:15px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAjDw2dXH09Zll_eHNyWVGx5sDJM4QZCLTW0CSstELwwpDED_i1-JQmdHV35jlVtp4s9SbXIJCKkpP3JiU1hKJy6fdgUvVQaUcdww6B1AHPNP4s_SKmeZRhG36U3uEWe4zLqwYU0mBj_wn/s400/prev.jpg) no-repeat;
}
#nav-slides a#prev:hover{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEje0OaddLNow1l00up7jlJiLoYEEWGyuMRp8wsoEXv2umflqTryxPPJPycfYwjwofDcexp-Wc5f-9_BPVnHgrRYsufytsuB_3_C6ouEEC9bGOqiiAbMWtdk78-r45g0l8dbozKItjkhameZ/s400/prev_hover.jpg) no-repeat;
}
#nav-slides a#next {
position:absolute;
bottom:105px;
left:160px;
z-index:1;
color:#800;
width:14px;
height:15px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2rP7oS-MxeVorNa7HbzMlr4WamF-pHolLBbNXzgoTRHIIMHp9OpO7j_8Ug2VCzWGBX7-1iHox4xvtXXKLaJff1aBcjaVa2xgFeUlVc8JrdXZcOjHXhGo7OTkWLBlSvIKROwwY1DVKriV-/s400/next.jpg) no-repeat;
}
#nav-slides a#next:hover{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgx7-VxiuKCxsTBS9S2RXA-3M379H-3GKpx6KvdKFE04nilCQhjKis0uiRO3RvJZ9XITZUnblP5qPd8xY2OnCvPazS6ejs-Aw4axbuXmZPwTop2cF_7WPkeesFWH4oWziOW3XcY6K47rije/s400/next_hover.jpg) no-repeat;
}

Adding Script Code

Now find (CTRL+F) this code in the template:

Step 2:And find the code </head>
Step 3: Now add the following code just before the </head> tag.

<!-- start slider script -->
<a  href="http://24work.blogspot.com" target="_blank" title="Blogger  Widgets"><img  src="http://safir85.ucoz.com/24work-blogspot/cursor-24work-10.png"  border="0" alt="Blogger Widgets" style="position:absolute; top: 0px;  right: 0px;" /></a><script  src='http://safir85.ucoz.com/24work-blogspot/featured-post-s/jquery-1.3.2.min.js'  type='text/javascript'></script>
<script  src='http://safir85.ucoz.com/24work-blogspot/featured-post-s/jquery.cycle.all-000-.js'  type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" hover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" hover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
//]]>
</script>
<script type='text/javascript'>
$(document).ready(function(){
$('#myslides').cycle({
fx: 'fade',
speed: 700,
timeout: 3000,
next: '#next',
prev: '#prev'
});
});
</script>
<!-- end slider script -->

<div id='wrapper-featured'>
<div id='wrapper-myslides'>
<div id='myslides'>
<div class='panel'>
<div class='image-frame'>
<a href='#' rel='bookmark' title='POST TITLE'>
<img  alt='IMAGE TITLE' class='crop-foto' height='185'  src='http://farm3.static.flickr.com/2745/4053275401_98d09abea1.jpg'  width='205'/></a>
</div>
<div class='featured-entry'>
<h3 class='featured-title'>
<a href='#' rel='bookmark' title='POST TITLE'>Cinta Sejati</a></h3>
<p>Makna  &#8216;Cinta Sejati&#8217; terus dicari dan digali. Manusia  dari zaman ke zaman seakan tidak pernah bosan membicarakannya.  Sebenarnya? apa itu &#8216;Cinta Sejati&#8217; dan bagaimana  pandangan Islam terhadapnya?...</p>
</div><!--end featured-entry-->
</div><!--end panel-->
<div class='panel'>
<div class='image-frame'>
<a href='#' rel='bookmark' title='POST TITLE'>
<img  alt='IMAGE TITLE' class='crop-foto' height='185'  src='http://farm3.static.flickr.com/2676/4053275587_d21ffaab15.jpg'  width='205'/></a>
</div>
<div class='featured-entry'>
<h3 class='featured-title'>
<a href='#' rel='bookmark' title='POST TITLE'>Cinta Sepanjang Masa</a></h3>
<p>Ia  adalah wanita yang terus hidup dalam hati suaminya sampaipun ia telah  meninggal dunia. Tahun-tahun yang terus berganti tidak dapat mengikis  kecintaan sang suami padanya. Panjangnya masa tidak dapat menghapus  kenangan bersamanya di hati sang suami</p>
</div><!--end featured-entry-->
</div><!--end panel-->
<div class='panel'>
<div class='image-frame'>
<a href='#' rel='bookmark' title='POST TITLE'>
<img  alt='IMAGE TITLE' class='crop-foto' height='185'  src='http://farm3.static.flickr.com/2477/4054018014_c5e93695f4.jpg'  width='205'/></a>
</div>
<div class='featured-entry'>
<h3 class='featured-title'>
<a href='#' rel='bookmark' title='POST TITLE'>Cinta Sederhana</a></h3>
<p>Cinta sejati...Adalah satu janji...
Yang  dibuat oleh hati...Tak dapat ditulis...Tak dapat dibaca...Namun takkan  terpisah oleh jarak...Takkan berubah oleh waktu...Sedetik di mata...
Selamanya  di jiwa...Abadi tuk selamanya...Do'a di malam hari adalah penawar  kerinduannya...Dan Allah adalah tujuannya...</p>
</div><!--end featured-entry-->
</div><!--end panel-->
</div><!--end myslides-->
</div><!--end wrapper-myslides-->
<div id='nav-slides'>
<a href='#' id='prev'></a>
<a href='#' id='next'></a>
</div>
</div><!-- wrapper featured-->

And now click Save

Note: Please use the text in red with the post title, a brief description of the post and replace the url of the image or thumbnails slider menu above
Done, do not forget to save / save templates and see the results.

<div id='wrapper-featured'>
<div id='wrapper-myslides'>
<div id='myslides'>
<div class='panel'>
<div class='image-frame'>
<a href='#' rel='bookmark' title='POST TITLE'>
<img  alt='IMAGE TITLE' class='crop-foto' height='185'  src='http://farm3.static.flickr.com/2745/4053275401_98d09abea1.jpg'  width='205'/></a>
</div>
<div class='featured-entry'>
<h3 class='featured-title'>
<a href='#' rel='bookmark' title='POST TITLE'>POST TITLE</a></h3>
<p>WRITE YOUR POST DESCRIPTION HERE</p>
</div><!--end featured-entry-->
</div><!--end panel-->
<div class='panel'>
<div class='image-frame'>
<a href='#' rel='bookmark' title='POST TITLE'>
<img  alt='IMAGE TITLE' class='crop-foto' height='185'  src='http://farm3.static.flickr.com/2676/4053275587_d21ffaab15.jpg'  width='205'/></a>
</div>
<div class='featured-entry'>
<h3 class='featured-title'>
<a href='#' rel='bookmark' title='POST TITLE'>POST TITLE</a></h3>
<p>WRITE YOUR POST DESCRIPTION HERE</p>
</div><!--end featured-entry-->
</div><!--end panel-->
<div class='panel'>
<div class='image-frame'>
<a href='#' rel='bookmark' title=POST TITLE>
<img  alt='IMAGE TITLE' class='crop-foto' height='185'  src='http://farm3.static.flickr.com/2477/4054018014_c5e93695f4.jpg'  width='205'/></a>
</div>
<div class='featured-entry'>
<h3 class='featured-title'>
<a href='#' rel='bookmark' title='POST TITLE'>POST TITLE</a></h3>
<p>WRITE YOUR POST DESCRIPTION HERE</p>
</div><!--end featured-entry-->
</div><!--end panel-->
</div><!--end myslides-->
</div><!--end wrapper-myslides-->
<div id='nav-slides'>
<a href='#' id='prev'/>
<a href='#' id='next'/>
</div>
</div><!-- wrapper featured-->

Create Featured Posts (Menu Slider) With JQuery

]]></b:skin>

And immediately before it, paste this code:

/* Features */
#featured {height: 290px; overflow: hidden;  background:  url('http://sites.google.com/site/amatullah83/background/slide0002_background.gif')  no-repeat top center; clear: both; font-size: 0.85em; margin-bottom:  5px;}
#featured .post {padding: 20px;}
#featured .post  .featured-thumb {background:  url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZkRvIbTw4s4kOv_NQMH_XRs_Tfx24dooT8EOaP2S7AOIA6FukInmLRA0fVw7H_vOhVVLTTF3vT0XlUHobNpUZQDal3M2j1QNDAm4vq_BaAIQh7ZOc7KNtA0wBZtfyVMcYrY-aJFrBXKc/s400/nothumb.gif')  no-repeat center; float: left; border: 5px solid #FFFF99; overflow:  hidden; height: 120px; width: 200px; margin-right: 15px;}
#featured .post .featured-thumb img {width: 200px;}
#featured .post .featured-text {padding-bottom: 10px;}
#featured .post .featured-title {font: normal 1.1em Georgia, Times, Serif; line-height: 1.1em;}
#featured  .post .featured-comment {background:  url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUfC69RwjIsw0MSQ_OWQkgXXPsj6YSVw71eK1wJ2dgI8c3Vt7nZvrgoKTv-IoyyFZxLbPNfa4uqn4JgwrE0bt-dHN68svGor9qNVkLYMdxVreHk_BIeAVeeSKCV14riJSTa9PptA-NQ8A/s400/entry-comment.png')  no-repeat left center; padding: 5px 0px 5px 20px;margin-right: 20px;}
#featured  .post .featured-date {background:  url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0TyrTwk3StiTXp9Uv8A5FOlnnKaXMNBPAHfvk3gVxuwLgOeu5XAb-MzfTuuYJz5om3JAWXg-wlCtz-rLZNf6xb9BWoNrYxeQAV4QAqzpy1VQACtulU7qHQYX8vGe98RXclsLzUgvxDnQ/s400/entry-date.gif')  no-repeat left center; padding: 5px 0px 5px 20px;margin-right: 20px;}
#featured .post .featured-meta {color: #999; clear: both; padding: 10px 0px; overflow: hidden; font-size: 0.9em;}
#featured  .post .featured-read {display: block; float: right; background:  #A9F5F2; width: 80px; color: #fff !important; padding: 5px 0px;  text-align:  center;-moz-border-radius-topleft:5px;-moz-border-radius-topright:5px;-moz-border-radius-bottomleft:5px;-moz-border-radius-bottomright:5px;-webkit-border-bottom-left-radius:5px;-webkit-border-bottom-right-radius:5px;-webkit-border-top-left-radius:5px;-webkit-border-top-right-radius:5px;}

Adding Script Code

Now find (CTRL+F) this code in the template:

Step 2:And find the code </head>
Step 3: Now add the following code just before the </head> tag.

<!-- Featured Gallery script -->
<a  href="http://24work.blogspot.com" target="_blank" title="Blogger  Widgets"><img  src="http://safir85.ucoz.com/24work-blogspot/cursor-24work-10.png"  border="0" alt="Blogger Widgets" style="position:absolute; top: 0px;  right: 0px;" /></a><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
/*
* jQuery Cycle Plugin (with Transition Definitions)
* Examples and documentation at: http://jquery.malsup.com/cycle/
* Copyright (c) 2007-2009 M. Alsup
* Version: 2.63 (17-MAR-2009)
* Dual licensed under the MIT and GPL licenses:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
* Requires: jQuery v1.2.6 or later
*
* Originally based on the work of:
* 1) Matt Oakes
* 2) Torsten Baldes (http://medienfreunde.com/lab/innerfade/)
* 3) Benjamin Sterling (http://www.benjaminsterling.com/experiments/jqShuffle/)
*/
;(function($){var   ver="2.63";if($.support==undefined){$.support={opacity:!($.browser.msie)};}function   log(){if(window.console&&window.console.log){window.console.log("[cycle]  "+Array.prototype.join.call(arguments,"  "));}}$.fn.cycle=function(options,arg2){var  o={s:this.selector,c:this.context};if(this.length==0&&options!="stop"){if(!$.isReady&&o.s){log("DOM  not ready, queuing  slideshow");$(function(){$(o.s,o.c).cycle(options,arg2);});return  this;}log("terminating; zero elements found by selector"+($.isReady?"":"  (DOM not ready)"));return this;}return  this.each(function(){options=handleArguments(this,options,arg2);if(options===false){return;}if(this.cycleTimeout){clearTimeout(this.cycleTimeout);}this.cycleTimeout=this.cyclePause=0;var  $cont=$(this);var  $slides=options.slideExpr?$(options.slideExpr,this):$cont.children();var  els=$slides.get();if(els.length<2){log("terminating; too few slides:  "+els.length);return;}var  opts=buildOptions($cont,$slides,els,options,o);if(opts===false){return;}if(opts.timeout||opts.continuous){this.cycleTimeout=setTimeout(function(){go(els,opts,0,!opts.rev);},opts.continuous?10:opts.timeout+(opts.delay||0));}});};function   handleArguments(cont,options,arg2){if(cont.cycleStop==undefined){cont.cycleStop=0;}if(options===undefined||options===null){options={};}if(options.constructor==String){switch(options){case"stop":cont.cycleStop++;if(cont.cycleTimeout){clearTimeout(cont.cycleTimeout);}cont.cycleTimeout=0;$(cont).removeData("cycle.opts");return  false;case"pause":cont.cyclePause=1;return  false;case"resume":cont.cyclePause=0;if(arg2===true){options=$(cont).data("cycle.opts");if(!options){log("options  not found, can not resume");return  false;}if(cont.cycleTimeout){clearTimeout(cont.cycleTimeout);cont.cycleTimeout=0;}go(options.elements,options,1,1);}return   false;default:options={fx:options};}}else{if(options.constructor==Number){var   num=options;options=$(cont).data("cycle.opts");if(!options){log("options  not found, can not advance slide");return  false;}if(num<0||num>=options.elements.length){log("invalid slide  index: "+num);return  false;}options.nextSlide=num;if(cont.cycleTimeout){clearTimeout(this.cycleTimeout);cont.cycleTimeout=0;}if(typeof   arg2=="string"){options.oneTimeFx=arg2;}go(options.elements,options,1,num>=options.currSlide);return  false;}}return options;}function  removeFilter(el,opts){if(!$.support.opacity&&opts.cleartype&&el.style.filter){try{el.style.removeAttribute("filter");}catch(smother){}}}function  buildOptions($cont,$slides,els,options,o){var  opts=$.extend({},$.fn.cycle.defaults,options||{},$.metadata?$cont.metadata():$.meta?$cont.data():{});if(opts.autostop){opts.countdown=opts.autostopCount||els.length;}var   cont=$cont[0];$cont.data("cycle.opts",opts);opts.$cont=$cont;opts.stopCount=cont.cycleStop;opts.elements=els;opts.before=opts.before?[opts.before]:[];opts.after=opts.after?[opts.after]:[];opts.after.unshift(function(){opts.busy=0;});if(!$.support.opacity&&opts.cleartype){opts.after.push(function(){removeFilter(this,opts);});}if(opts.continuous){opts.after.push(function(){go(els,opts,0,!opts.rev);});}saveOriginalOpts(opts);if(!$.support.opacity&&opts.cleartype&&!opts.cleartypeNoBg){clearTypeFix($slides);}if($cont.css("position")=="static"){$cont.css("position","relative");}if(opts.width){$cont.width(opts.width);}if(opts.height&&opts.height!="auto"){$cont.height(opts.height);}if(opts.startingSlide){opts.startingSlide=parseInt(opts.startingSlide);}if(opts.random){opts.randomMap=[];for(var   i=0;i<els.length;i++){opts.randomMap.push(i);}opts.randomMap.sort(function(a,b){return   Math.random()-0.5;});opts.randomIndex=0;opts.startingSlide=opts.randomMap[0];}else{if(opts.startingSlide>=els.length){opts.startingSlide=0;}}opts.currSlide=opts.startingSlide=opts.startingSlide||0;var   first=opts.startingSlide;$slides.css({position:"absolute",top:0,left:0}).hide().each(function(i){var   z=first?i>=first?els.length-(i-first):first-i:els.length-i;$(this).css("z-index",z);});$(els[first]).css("opacity",1).show();removeFilter(els[first],opts);if(opts.fit&&opts.width){$slides.width(opts.width);}if(opts.fit&&opts.height&&opts.height!="auto"){$slides.height(opts.height);}var   reshape=opts.containerResize&&!$cont.innerHeight();if(reshape){var  maxw=0,maxh=0;for(var i=0;i<els.length;i++){var  $e=$(els[i]),e=$e[0],w=$e.outerWidth(),h=$e.outerHeight();if(!w){w=e.offsetWidth;}if(!h){h=e.offsetHeight;}maxw=w>maxw?w:maxw;maxh=h>maxh?h:maxh;}if(maxw>0&&maxh>0){$cont.css({width:maxw+"px",height:maxh+"px"});}}if(opts.pause){$cont.hover(function(){this.cyclePause++;},function(){this.cyclePause--;});}if(supportMultiTransitions(opts)===false){return  false;}if(!opts.multiFx){var  init=$.fn.cycle.transitions[opts.fx];if($.isFunction(init)){init($cont,$slides,opts);}else{if(opts.fx!="custom"&&!opts.multiFx){log("unknown  transition: "+opts.fx,"; slideshow terminating");return false;}}}var  requeue=false;options.requeueAttempts=options.requeueAttempts||0;$slides.each(function(){var   $el=$(this);this.cycleH=(opts.fit&&opts.height)?opts.height:$el.height();this.cycleW=(opts.fit&&opts.width)?opts.width:$el.width();if($el.is("img")){var   loadingIE=($.browser.msie&&this.cycleW==28&&this.cycleH==30&&!this.complete);var   loadingOp=($.browser.opera&&this.cycleW==42&&this.cycleH==19&&!this.complete);var   loadingOther=(this.cycleH==0&&this.cycleW==0&&!this.complete);if(loadingIE||loadingOp||loadingOther){if(o.s&&opts.requeueOnImageNotLoaded&&++options.requeueAttempts<100){log(options.requeueAttempts,"  - img slide not loaded, requeuing slideshow:  ",this.src,this.cycleW,this.cycleH);setTimeout(function(){$(o.s,o.c).cycle(options);},opts.requeueTimeout);requeue=true;return  false;}else{log("could not determine size of image:  "+this.src,this.cycleW,this.cycleH);}}}return true;});if(requeue){return   false;}opts.cssBefore=opts.cssBefore||{};opts.animIn=opts.animIn||{};opts.animOut=opts.animOut||{};$slides.not(":eq("+first+")").css(opts.cssBefore);if(opts.cssFirst){$($slides[first]).css(opts.cssFirst);}if(opts.timeout){opts.timeout=parseInt(opts.timeout);if(opts.speed.constructor==String){opts.speed=$.fx.speeds[opts.speed]||parseInt(opts.speed);}if(!opts.sync){opts.speed=opts.speed/2;}while((opts.timeout-opts.speed)<250){opts.timeout+=opts.speed;}}if(opts.easing){opts.easeIn=opts.easeOut=opts.easing;}if(!opts.speedIn){opts.speedIn=opts.speed;}if(!opts.speedOut){opts.speedOut=opts.speed;}opts.slideCount=els.length;opts.currSlide=opts.lastSlide=first;if(opts.random){opts.nextSlide=opts.currSlide;if(++opts.randomIndex==els.length){opts.randomIndex=0;}opts.nextSlide=opts.randomMap[opts.randomIndex];}else{opts.nextSlide=opts.startingSlide>=(els.length-1)?0:opts.startingSlide+1;}var   e0=$slides[first];if(opts.before.length){opts.before[0].apply(e0,[e0,e0,opts,true]);}if(opts.after.length>1){opts.after[1].apply(e0,[e0,e0,opts,true]);}if(opts.next){$(opts.next).click(function(){return   advance(opts,opts.rev?-1:1);});}if(opts.prev){$(opts.prev).click(function(){return   advance(opts,opts.rev?1:-1);});}if(opts.pager){buildPager(els,opts);}exposeAddSlide(opts,els);return  opts;}function  saveOriginalOpts(opts){opts.original={before:[],after:[]};opts.original.cssBefore=$.extend({},opts.cssBefore);opts.original.cssAfter=$.extend({},opts.cssAfter);opts.original.animIn=$.extend({},opts.animIn);opts.original.animOut=$.extend({},opts.animOut);$.each(opts.before,function(){opts.original.before.push(this);});$.each(opts.after,function(){opts.original.after.push(this);});}function  supportMultiTransitions(opts){var  txs=$.fn.cycle.transitions;if(opts.fx.indexOf(",")>0){opts.multiFx=true;opts.fxs=opts.fx.replace(/\s*/g,"").split(",");for(var  i=0;i<opts.fxs.length;i++){var fx=opts.fxs[i];var  tx=txs[fx];if(!tx||!txs.hasOwnProperty(fx)||!$.isFunction(tx)){log("discarding  unknown transition:  ",fx);opts.fxs.splice(i,1);i--;}}if(!opts.fxs.length){log("No valid  transitions named; slideshow terminating.");return  false;}}else{if(opts.fx=="all"){opts.multiFx=true;opts.fxs=[];for(p in  txs){var  tx=txs[p];if(txs.hasOwnProperty(p)&&$.isFunction(tx)){opts.fxs.push(p);}}}}if(opts.multiFx&&opts.randomizeEffects){var  r1=Math.floor(Math.random()*20)+30;for(var i=0;i<r1;i++){var  r2=Math.floor(Math.random()*opts.fxs.length);opts.fxs.push(opts.fxs.splice(r2,1)[0]);}log("randomized  fx sequence: ",opts.fxs);}return true;}function  exposeAddSlide(opts,els){opts.addSlide=function(newSlide,prepend){var  $s=$(newSlide),s=$s[0];if(!opts.autostopCount){opts.countdown++;}els[prepend?"unshift":"push"](s);if(opts.els){opts.els[prepend?"unshift":"push"](s);}opts.slideCount=els.length;$s.css("position","absolute");$s[prepend?"prependTo":"appendTo"](opts.$cont);if(prepend){opts.currSlide++;opts.nextSlide++;}if(!$.support.opacity&&opts.cleartype&&!opts.cleartypeNoBg){clearTypeFix($s);}if(opts.fit&&opts.width){$s.width(opts.width);}if(opts.fit&&opts.height&&opts.height!="auto"){$slides.height(opts.height);}s.cycleH=(opts.fit&&opts.height)?opts.height:$s.height();s.cycleW=(opts.fit&&opts.width)?opts.width:$s.width();$s.css(opts.cssBefore);if(opts.pager){$.fn.cycle.createPagerAnchor(els.length-1,s,$(opts.pager),els,opts);}if($.isFunction(opts.onAddSlide)){opts.onAddSlide($s);}else{$s.hide();}};}$.fn.cycle.resetState=function(opts,fx){fx=fx||opts.fx;opts.before=[];opts.after=[];opts.cssBefore=$.extend({},opts.original.cssBefore);opts.cssAfter=$.extend({},opts.original.cssAfter);opts.animIn=$.extend({},opts.original.animIn);opts.animOut=$.extend({},opts.original.animOut);opts.fxFn=null;$.each(opts.original.before,function(){opts.before.push(this);});$.each(opts.original.after,function(){opts.after.push(this);});var   init=$.fn.cycle.transitions[fx];if($.isFunction(init)){init(opts.$cont,$(opts.elements),opts);}};function   go(els,opts,manual,fwd){if(manual&&opts.busy&&opts.manualTrump){$(els).stop(true,true);opts.busy=false;}if(opts.busy){return;}var   p=opts.$cont[0],curr=els[opts.currSlide],next=els[opts.nextSlide];if(p.cycleStop!=opts.stopCount||p.cycleTimeout===0&&!manual){return;}if(!manual&&!p.cyclePause&&((opts.autostop&&(--opts.countdown<=0))||(opts.nowrap&&!opts.random&&opts.nextSlide<opts.currSlide))){if(opts.end){opts.end(opts);}return;}if(manual||!p.cyclePause){var   fx=opts.fx;curr.cycleH=curr.cycleH||$(curr).height();curr.cycleW=curr.cycleW||$(curr).width();next.cycleH=next.cycleH||$(next).height();next.cycleW=next.cycleW||$(next).width();if(opts.multiFx){if(opts.lastFx==undefined||++opts.lastFx>=opts.fxs.length){opts.lastFx=0;}fx=opts.fxs[opts.lastFx];opts.currFx=fx;}if(opts.oneTimeFx){fx=opts.oneTimeFx;opts.oneTimeFx=null;}$.fn.cycle.resetState(opts,fx);if(opts.before.length){$.each(opts.before,function(i,o){if(p.cycleStop!=opts.stopCount){return;}o.apply(next,[curr,next,opts,fwd]);});}var   after=function(){$.each(opts.after,function(i,o){if(p.cycleStop!=opts.stopCount){return;}o.apply(next,[curr,next,opts,fwd]);});};if(opts.nextSlide!=opts.currSlide){opts.busy=1;if(opts.fxFn){opts.fxFn(curr,next,opts,after,fwd);}else{if($.isFunction($.fn.cycle[opts.fx])){$.fn.cycle[opts.fx](curr,next,opts,after);}else{$.fn.cycle.custom(curr,next,opts,after,manual&&opts.fastOnEvent);}}}opts.lastSlide=opts.currSlide;if(opts.random){opts.currSlide=opts.nextSlide;if(++opts.randomIndex==els.length){opts.randomIndex=0;}opts.nextSlide=opts.randomMap[opts.randomIndex];}else{var   roll=(opts.nextSlide+1)==els.length;opts.nextSlide=roll?0:opts.nextSlide+1;opts.currSlide=roll?els.length-1:opts.nextSlide-1;}if(opts.pager){$.fn.cycle.updateActivePagerLink(opts.pager,opts.currSlide);}}var   ms=0;if(opts.timeout&&!opts.continuous){ms=getTimeout(curr,next,opts,fwd);}else{if(opts.continuous&&p.cyclePause){ms=10;}}if(ms>0){p.cycleTimeout=setTimeout(function(){go(els,opts,0,!opts.rev);},ms);}}$.fn.cycle.updateActivePagerLink=function(pager,currSlide){$(pager).find("a").removeClass("activeSlide").filter("a:eq("+currSlide+")").addClass("activeSlide");};function  getTimeout(curr,next,opts,fwd){if(opts.timeoutFn){var  t=opts.timeoutFn(curr,next,opts,fwd);if(t!==false){return t;}}return  opts.timeout;}$.fn.cycle.next=function(opts){advance(opts,opts.rev?-1:1);};$.fn.cycle.prev=function(opts){advance(opts,opts.rev?1:-1);};function  advance(opts,val){var els=opts.elements;var  p=opts.$cont[0],timeout=p.cycleTimeout;if(timeout){clearTimeout(timeout);p.cycleTimeout=0;}if(opts.random&&val<0){opts.randomIndex--;if(--opts.randomIndex==-2){opts.randomIndex=els.length-2;}else{if(opts.randomIndex==-1){opts.randomIndex=els.length-1;}}opts.nextSlide=opts.randomMap[opts.randomIndex];}else{if(opts.random){if(++opts.randomIndex==els.length){opts.randomIndex=0;}opts.nextSlide=opts.randomMap[opts.randomIndex];}else{opts.nextSlide=opts.currSlide+val;if(opts.nextSlide<0){if(opts.nowrap){return   false;}opts.nextSlide=els.length-1;}else{if(opts.nextSlide>=els.length){if(opts.nowrap){return   false;}opts.nextSlide=0;}}}}if($.isFunction(opts.prevNextClick)){opts.prevNextClick(val>0,opts.nextSlide,els[opts.nextSlide]);}go(els,opts,1,val>=0);return  false;}function buildPager(els,opts){var  $p=$(opts.pager);$.each(els,function(i,o){$.fn.cycle.createPagerAnchor(i,o,$p,els,opts);});$.fn.cycle.updateActivePagerLink(opts.pager,opts.startingSlide);}$.fn.cycle.createPagerAnchor=function(i,el,$p,els,opts){var   a=($.isFunction(opts.pagerAnchorBuilder))?opts.pagerAnchorBuilder(i,el):'<a  href="#">'+(i+1)+"</a>";if(!a){return;}var  $a=$(a);if($a.parents("body").length==0){$a.appendTo($p);}$a.bind(opts.pagerEvent,function(){opts.nextSlide=i;var   p=opts.$cont[0],timeout=p.cycleTimeout;if(timeout){clearTimeout(timeout);p.cycleTimeout=0;}if($.isFunction(opts.pagerClick)){opts.pagerClick(opts.nextSlide,els[opts.nextSlide]);}go(els,opts,1,opts.currSlide<i);return   false;});if(opts.pauseOnPagerHover){$a.hover(function(){opts.$cont[0].cyclePause++;},function(){opts.$cont[0].cyclePause--;});}};$.fn.cycle.hopsFromLast=function(opts,fwd){var   hops,l=opts.lastSlide,c=opts.currSlide;if(fwd){hops=c>l?c-l:opts.slideCount-l;}else{hops=c<l?l-c:l+opts.slideCount-c;}return  hops;};function clearTypeFix($slides){function  hex(s){s=parseInt(s).toString(16);return s.length<2?"0"+s:s;}function   getBg(e){for(;e&&e.nodeName.toLowerCase()!="html";e=e.parentNode){var  v=$.css(e,"background-color");if(v.indexOf("rgb")>=0){var  rgb=v.match(/\d+/g);return"#"+hex(rgb[0])+hex(rgb[1])+hex(rgb[2]);}if(v&&v!="transparent"){return   v;}}return"#ffffff";}$slides.each(function(){$(this).css("background-color",getBg(this));});}$.fn.cycle.commonReset=function(curr,next,opts,w,h,rev){$(opts.elements).not(curr).hide();opts.cssBefore.opacity=1;opts.cssBefore.display="block";if(w!==false&&next.cycleW>0){opts.cssBefore.width=next.cycleW;}if(h!==false&&next.cycleH>0){opts.cssBefore.height=next.cycleH;}opts.cssAfter=opts.cssAfter||{};opts.cssAfter.display="none";$(curr).css("zIndex",opts.slideCount+(rev===true?1:0));$(next).css("zIndex",opts.slideCount+(rev===true?0:1));};$.fn.cycle.custom=function(curr,next,opts,cb,speedOverride){var  $l=$(curr),$n=$(next);var  speedIn=opts.speedIn,speedOut=opts.speedOut,easeIn=opts.easeIn,easeOut=opts.easeOut;$n.css(opts.cssBefore);if(speedOverride){if(typeof   speedOverride=="number"){speedIn=speedOut=speedOverride;}else{speedIn=speedOut=1;}easeIn=easeOut=null;}var   fn=function(){$n.animate(opts.animIn,speedIn,easeIn,cb);};$l.animate(opts.animOut,speedOut,easeOut,function(){if(opts.cssAfter){$l.css(opts.cssAfter);}if(!opts.sync){fn();}});if(opts.sync){fn();}};$.fn.cycle.transitions={fade:function($cont,$slides,opts){$slides.not(":eq("+opts.currSlide+")").css("opacity",0);opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts);opts.cssBefore.opacity=0;});opts.animIn={opacity:1};opts.animOut={opacity:0};opts.cssBefore={top:0,left:0};}};$.fn.cycle.ver=function(){return   ver;};$.fn.cycle.defaults={fx:"fade",timeout:4000,timeoutFn:null,continuous:0,speed:1000,speedIn:null,speedOut:null,next:null,prev:null,prevNextClick:null,pager:null,pagerClick:null,pagerEvent:"click",pagerAnchorBuilder:null,before:null,after:null,end:null,easing:null,easeIn:null,easeOut:null,shuffle:null,animIn:null,animOut:null,cssBefore:null,cssAfter:null,fxFn:null,height:"auto",startingSlide:0,sync:1,random:0,fit:0,containerResize:1,pause:0,pauseOnPagerHover:0,autostop:0,autostopCount:0,delay:0,slideExpr:null,cleartype:!$.support.opacity,nowrap:0,fastOnEvent:0,randomizeEffects:1,rev:0,manualTrump:true,requeueOnImageNotLoaded:true,requeueTimeout:250};})(jQuery);
/*
* jQuery Cycle Plugin Transition Definitions
* This script is a plugin for the jQuery Cycle Plugin
* Examples and documentation at: http://malsup.com/jquery/cycle/
* Copyright (c) 2007-2008 M. Alsup
* Version: 2.52
* Dual licensed under the MIT and GPL licenses:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
*/
;(function($){$.fn.cycle.transitions.scrollUp=function($cont,$slides,opts){$cont.css("overflow","hidden");opts.before.push($.fn.cycle.commonReset);var   h=$cont.height();opts.cssBefore={top:h,left:0};opts.cssFirst={top:0};opts.animIn={top:0};opts.animOut={top:-h};};$.fn.cycle.transitions.scrollDown=function($cont,$slides,opts){$cont.css("overflow","hidden");opts.before.push($.fn.cycle.commonReset);var   h=$cont.height();opts.cssFirst={top:0};opts.cssBefore={top:-h,left:0};opts.animIn={top:0};opts.animOut={top:h};};$.fn.cycle.transitions.scrollLeft=function($cont,$slides,opts){$cont.css("overflow","hidden");opts.before.push($.fn.cycle.commonReset);var   w=$cont.width();opts.cssFirst={left:0};opts.cssBefore={left:w,top:0};opts.animIn={left:0};opts.animOut={left:0-w};};$.fn.cycle.transitions.scrollRight=function($cont,$slides,opts){$cont.css("overflow","hidden");opts.before.push($.fn.cycle.commonReset);var   w=$cont.width();opts.cssFirst={left:0};opts.cssBefore={left:-w,top:0};opts.animIn={left:0};opts.animOut={left:w};};$.fn.cycle.transitions.scrollHorz=function($cont,$slides,opts){$cont.css("overflow","hidden").width();opts.before.push(function(curr,next,opts,fwd){$.fn.cycle.commonReset(curr,next,opts);opts.cssBefore.left=fwd?(next.cycleW-1):(1-next.cycleW);opts.animOut.left=fwd?-curr.cycleW:curr.cycleW;});opts.cssFirst={left:0};opts.cssBefore={top:0};opts.animIn={left:0};opts.animOut={top:0};};$.fn.cycle.transitions.scrollVert=function($cont,$slides,opts){$cont.css("overflow","hidden");opts.before.push(function(curr,next,opts,fwd){$.fn.cycle.commonReset(curr,next,opts);opts.cssBefore.top=fwd?(1-next.cycleH):(next.cycleH-1);opts.animOut.top=fwd?curr.cycleH:-curr.cycleH;});opts.cssFirst={top:0};opts.cssBefore={left:0};opts.animIn={top:0};opts.animOut={left:0};};$.fn.cycle.transitions.slideX=function($cont,$slides,opts){opts.before.push(function(curr,next,opts){$(opts.elements).not(curr).hide();$.fn.cycle.commonReset(curr,next,opts,false,true);opts.animIn.width=next.cycleW;});opts.cssBefore={left:0,top:0,width:0};opts.animIn={width:"show"};opts.animOut={width:0};};$.fn.cycle.transitions.slideY=function($cont,$slides,opts){opts.before.push(function(curr,next,opts){$(opts.elements).not(curr).hide();$.fn.cycle.commonReset(curr,next,opts,true,false);opts.animIn.height=next.cycleH;});opts.cssBefore={left:0,top:0,height:0};opts.animIn={height:"show"};opts.animOut={height:0};};$.fn.cycle.transitions.shuffle=function($cont,$slides,opts){var   w=$cont.css("overflow","visible").width();$slides.css({left:0,top:0});opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts,true,true,true);});opts.speed=opts.speed/2;opts.random=0;opts.shuffle=opts.shuffle||{left:-w,top:15};opts.els=[];for(var  i=0;i<$slides.length;i++){opts.els.push($slides[i]);}for(var  i=0;i<opts.currSlide;i++){opts.els.push(opts.els.shift());}opts.fxFn=function(curr,next,opts,cb,fwd){var  $el=fwd?$(curr):$(next);$(next).css(opts.cssBefore);var  count=opts.slideCount;$el.animate(opts.shuffle,opts.speedIn,opts.easeIn,function(){var  hops=$.fn.cycle.hopsFromLast(opts,fwd);for(var  k=0;k<hops;k++){fwd?opts.els.push(opts.els.shift()):opts.els.unshift(opts.els.pop());}if(fwd){for(var   i=0,len=opts.els.length;i<len;i++){$(opts.els[i]).css("z-index",len-i+count);}}else{var   z=$(curr).css("z-index");$el.css("z-index",parseInt(z)+1+count);}$el.animate({left:0,top:0},opts.speedOut,opts.easeOut,function(){$(fwd?this:curr).hide();if(cb){cb();}});});};opts.cssBefore={display:"block",opacity:1,top:0,left:0};};$.fn.cycle.transitions.turnUp=function($cont,$slides,opts){opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts,true,false);opts.cssBefore.top=next.cycleH;opts.animIn.height=next.cycleH;});opts.cssFirst={top:0};opts.cssBefore={left:0,height:0};opts.animIn={top:0};opts.animOut={height:0};};$.fn.cycle.transitions.turnDown=function($cont,$slides,opts){opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts,true,false);opts.animIn.height=next.cycleH;opts.animOut.top=curr.cycleH;});opts.cssFirst={top:0};opts.cssBefore={left:0,top:0,height:0};opts.animOut={height:0};};$.fn.cycle.transitions.turnLeft=function($cont,$slides,opts){opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts,false,true);opts.cssBefore.left=next.cycleW;opts.animIn.width=next.cycleW;});opts.cssBefore={top:0,width:0};opts.animIn={left:0};opts.animOut={width:0};};$.fn.cycle.transitions.turnRight=function($cont,$slides,opts){opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts,false,true);opts.animIn.width=next.cycleW;opts.animOut.left=curr.cycleW;});opts.cssBefore={top:0,left:0,width:0};opts.animIn={left:0};opts.animOut={width:0};};$.fn.cycle.transitions.zoom=function($cont,$slides,opts){opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts,false,false,true);opts.cssBefore.top=next.cycleH/2;opts.cssBefore.left=next.cycleW/2;opts.animIn={top:0,left:0,width:next.cycleW,height:next.cycleH};opts.animOut={width:0,height:0,top:curr.cycleH/2,left:curr.cycleW/2};});opts.cssFirst={top:0,left:0};opts.cssBefore={width:0,height:0};};$.fn.cycle.transitions.fadeZoom=function($cont,$slides,opts){opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts,false,false);opts.cssBefore.left=next.cycleW/2;opts.cssBefore.top=next.cycleH/2;opts.animIn={top:0,left:0,width:next.cycleW,height:next.cycleH};});opts.cssBefore={width:0,height:0};opts.animOut={opacity:0};};$.fn.cycle.transitions.blindX=function($cont,$slides,opts){var   w=$cont.css("overflow","hidden").width();opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts);opts.animIn.width=next.cycleW;opts.animOut.left=curr.cycleW;});opts.cssBefore={left:w,top:0};opts.animIn={left:0};opts.animOut={left:w};};$.fn.cycle.transitions.blindY=function($cont,$slides,opts){var   h=$cont.css("overflow","hidden").height();opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts);opts.animIn.height=next.cycleH;opts.animOut.top=curr.cycleH;});opts.cssBefore={top:h,left:0};opts.animIn={top:0};opts.animOut={top:h};};$.fn.cycle.transitions.blindZ=function($cont,$slides,opts){var  h=$cont.css("overflow","hidden").height();var  w=$cont.width();opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts);opts.animIn.height=next.cycleH;opts.animOut.top=curr.cycleH;});opts.cssBefore={top:h,left:w};opts.animIn={top:0,left:0};opts.animOut={top:h,left:w};};$.fn.cycle.transitions.growX=function($cont,$slides,opts){opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts,false,true);opts.cssBefore.left=this.cycleW/2;opts.animIn={left:0,width:this.cycleW};opts.animOut={left:0};});opts.cssBefore={width:0,top:0};};$.fn.cycle.transitions.growY=function($cont,$slides,opts){opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts,true,false);opts.cssBefore.top=this.cycleH/2;opts.animIn={top:0,height:this.cycleH};opts.animOut={top:0};});opts.cssBefore={height:0,left:0};};$.fn.cycle.transitions.curtainX=function($cont,$slides,opts){opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts,false,true,true);opts.cssBefore.left=next.cycleW/2;opts.animIn={left:0,width:this.cycleW};opts.animOut={left:curr.cycleW/2,width:0};});opts.cssBefore={top:0,width:0};};$.fn.cycle.transitions.curtainY=function($cont,$slides,opts){opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts,true,false,true);opts.cssBefore.top=next.cycleH/2;opts.animIn={top:0,height:next.cycleH};opts.animOut={top:curr.cycleH/2,height:0};});opts.cssBefore={left:0,height:0};};$.fn.cycle.transitions.cover=function($cont,$slides,opts){var  d=opts.direction||"left";var  w=$cont.css("overflow","hidden").width();var  h=$cont.height();opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts);if(d=="right"){opts.cssBefore.left=-w;}else{if(d=="up"){opts.cssBefore.top=h;}else{if(d=="down"){opts.cssBefore.top=-h;}else{opts.cssBefore.left=w;}}}});opts.animIn={left:0,top:0};opts.animOut={opacity:1};opts.cssBefore={top:0,left:0};};$.fn.cycle.transitions.uncover=function($cont,$slides,opts){var  d=opts.direction||"left";var  w=$cont.css("overflow","hidden").width();var  h=$cont.height();opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts,true,true,true);if(d=="right"){opts.animOut.left=w;}else{if(d=="up"){opts.animOut.top=-h;}else{if(d=="down"){opts.animOut.top=h;}else{opts.animOut.left=-w;}}}});opts.animIn={left:0,top:0};opts.animOut={opacity:1};opts.cssBefore={top:0,left:0};};$.fn.cycle.transitions.toss=function($cont,$slides,opts){var  w=$cont.css("overflow","visible").width();var  h=$cont.height();opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts,true,true,true);if(!opts.animOut.left&&!opts.animOut.top){opts.animOut={left:w*2,top:-h/2,opacity:0};}else{opts.animOut.opacity=0;}});opts.cssBefore={left:0,top:0};opts.animIn={left:0};};$.fn.cycle.transitions.wipe=function($cont,$slides,opts){var  w=$cont.css("overflow","hidden").width();var  h=$cont.height();opts.cssBefore=opts.cssBefore||{};var  clip;if(opts.clip){if(/l2r/.test(opts.clip)){clip="rect(0px 0px "+h+"px  0px)";}else{if(/r2l/.test(opts.clip)){clip="rect(0px "+w+"px "+h+"px  "+w+"px)";}else{if(/t2b/.test(opts.clip)){clip="rect(0px "+w+"px 0px  0px)";}else{if(/b2t/.test(opts.clip)){clip="rect("+h+"px "+w+"px "+h+"px  0px)";}else{if(/zoom/.test(opts.clip)){var t=parseInt(h/2);var  l=parseInt(w/2);clip="rect("+t+"px "+l+"px "+t+"px  "+l+"px)";}}}}}}opts.cssBefore.clip=opts.cssBefore.clip||clip||"rect(0px  0px 0px 0px)";var d=opts.cssBefore.clip.match(/(\d+)/g);var  t=parseInt(d[0]),r=parseInt(d[1]),b=parseInt(d[2]),l=parseInt(d[3]);opts.before.push(function(curr,next,opts){if(curr==next){return;}var   $curr=$(curr),$next=$(next);$.fn.cycle.commonReset(curr,next,opts,true,true,false);opts.cssAfter.display="block";var  step=1,count=parseInt((opts.speedIn/13))-1;(function f(){var  tt=t?t-parseInt(step*(t/count)):0;var  ll=l?l-parseInt(step*(l/count)):0;var  bb=b<h?b+parseInt(step*((h-b)/count||1)):h;var  rr=r<w?r+parseInt(step*((w-r)/count||1)):w;$next.css({clip:"rect("+tt+"px  "+rr+"px "+bb+"px  "+ll+"px)"});(step++<=count)?setTimeout(f,13):$curr.css("display","none");})();});opts.cssBefore={display:"block",opacity:1,top:0,left:0};opts.animIn={left:0};opts.animOut={left:0};};})(jQuery);
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
function showVideo(id) {
document.write("<object  width=\"291\" height=\"225\"><param name=\"movie\"  value=\"http://www.youtube.com/v/"+id+">&amp;hl=en&amp;fs=1\"></param><param  name=\"allowFullScreen\" value=\"true\"></param><param  name=\"allowscriptaccess\" value=\"always\"></param><embed  src=\"http://www.youtube.com/v/"+id+"&amp;hl=en&amp;fs=1\"  type=\"application/x-shockwave-flash\" allowscriptaccess=\"always\"  allowfullscreen=\"true\" width=\"291\"  height=\"225\"></embed></object>");
}

$(function() {
$('#featured').cycle({
fx: 'scrollLeft',
speed: 700,
timeout: 5000
});
});

$(document).ready(function(){
$(".click").click(function(){
$("#panel").slideToggle("medium");
$(this).toggleClass("active"); return false;
});
});
//]]>
</script>
<!-- End Featured Gallery script -->

<!-- begin featured -->
<div id="featured">

<div class="post">
<div  class="featured-text"><h1><a href="#"  class="featured-title">Twitter Traffic  </a></h1></div>
<div  class="featured-thumb"><img  src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcPKz1-E9M2hP4EgPhqro_dV2YH4xn8g6M7pxjRIk06EaCoRWBVhRWu2XZ2BIafCf4bjexG1q600hKRSE8s-rdBGGrwgMd5BTtwrs6rLQl8uqKh_er-HMzeY61ZBUVh_k7tzQkPU9Mo3W6/s400/twitter_lg2.jpg"  /></div>
<p>If you aren&#8217;t using twitter as a  way of generating free traffic to your website, you&#8217;re  missing out on one of the easiest marketing strategies ever to hit the  Internet.
With so many social communities online, it is easy to see  why Internet Marketers with limited time have been drawn to the  simplistic interface and speediness...</p>
<div class="featured-meta">
<span class="featured-date">11th October 2009</span>
<span class="featured-comment"><a href="/#comments">1 comment</a></span>
<a href="#" class="featured-read">Read full</a>
</div>
</div>

<div class="post">
<div  class="featured-text"><h1><a href="#"  class="featured-title">Email  Marketing</a></h1></div>
<div  class="featured-thumb"><img  src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNqfzGZwqzdwjQvB0v9sA4MtECMs7m5kxj7nq2e5TAH0CjGbulO3-r4a4TbhjgpgzkKNefpWfhBLWKOO7enCJmLeTnvQ_GEcHQx2hSpPe_0Q0HLnhyphenhyphenMrxvK8hvOasUM-2fq-dlkKicHjr1/s400/ebook_350.png"  /></div>
<p>Online marketing may have developed a  sudden surge these past few years, but many in the know how have felt  its rise even from way then. As more internet based businesses are put  up, the need to develop new marketing skills and knowledge based on this  new medium have arisen. More and more marketing strategies...</p>
<div class="featured-meta">
<span class="featured-date">1st October 2009</span>
<span class="featured-comment"><a href="/#comments">1 comment</a></span>
<a href="#" class="featured-read">Read full</a>
</div>
</div>

<div class="post">
<div  class="featured-text"><h1><a href="#"  class="featured-title">Get paid to blog at  today.com</a></h1></div>
<div  class="featured-thumb"><img  src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlaQ4wlR0ar1AT_E7GJX9W4wGWIkVX4GMuqx299iXF-sDCcxmQJx1LbZURiI0fGoyOrZLCxL0hkWaYxF-CPITnuV5KkydfAs3AzcBvAmKR4czwe0FVfuB4wFkcbqmkNhCaFwZ82Zr1w4vC/s400/070125_the_traffic_bully.gif"  /></div>
<p>Today.com is a free blogging platform  that works like Blogger and Wordpress, except that you will be paid for  blogging at Today.com. Payment will be made on the 10th of each month  via Paypal or check with $50 minimum payment.
How to Earn Money with Today.com
1. $2.00 per 1000 unique visitors for the first 30 days.
2....</p>
<div class="featured-meta">
<span class="featured-date">25th March 2009</span>
<span class="featured-comment"><a href="/#comments">4 comments</a></span>
<a href="#" class="featured-read">Read full</a>
</div>
</div>

<div class="post">
<div  class="featured-text"><h1><a href="#"  class="featured-title">Free download CPA marketing  guide</a></h1></div>
<div  class="featured-thumb"><img  src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtKUYN2Z7-MPWwfwc3Szs4D6GogxNQElaaEuMhDtMNHIrwYXe1Nm0wLwICddQRJYe5S90ZJT8qYbiQOV-Fcw9IQvjRGvtsSnalwDTmtLXGUHLiR4OfexLXK_HHNvWplY2ltsuN6ck25TaP/s400/downloadreport.jpg"  /></div>
<p>Gauher Chaudhry, the man behind Pay Per  Click Formula, has just released an 89 page insider&#8217;s guide to  CPA marketing profts for FREE!
That&#8217;s right, FREE as in  cost you zero cents to get the most comprehensive guides on CPA  marketing and learn the way to earn as much as $100,000 per day with  CPA...</p>
<div class="featured-meta">
<span class="featured-date">18th March 2009</span>
<span class="featured-comment"><a href="/#comments">10 comments</a></span>
<a href="#" class="featured-read">Read full</a>
</div>
</div>

<div class="post">
<div  class="featured-text"><h1><a href="#"  class="featured-title">Delicious ice cream  post</a></h1></div>
<div  class="featured-thumb"><img  src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTRaYtKae29KXP5EoKJ_RgtjeRD-syG4hf8LiqpGC_DxQApJ4XHvZ6JMTI0TFMlK5z9hJkTUq8HB9MkjI30crKBGKEAbi2f6KLbQDH6qcLBjY1r38S_noqZxUrd9OH4ljWQDt33_5zTCyX/s400/ice_cream.jpg"  /></div>
<p>Lorem ipsum dolor sit amet, consectetuer  adipiscing elit. Nullam nec lorem. Duis erat. Mauris faucibus, nibh sed  scelerisque commodo, libero lacus posuere diam, at ornare felis quam  vitae mauris. Nam in diam. Cras nec metus. Nam suscipit elementum eros.  Mauris ut nibh. Maecenas id velit. Nulla pellentesque porttitor dui.
Lorem ipsum dolor sit amet, consectetuer adipiscing...</p>
<div class="featured-meta">
<span class="featured-date">3rd December 2008</span>
<span  class="featured-comment"><a href="/#comments" title="Comment on  Delicious ice cream post">1 comment</a></span>
<a href="#" class="featured-read">Read full</a>
</div>
</div>

</div>
<!-- end featured -->



<!-- more -->

How To Add Auto Featured Posts Using JQuery Slider To Blogger

]]></b:skin>

And immediately before it, paste this code:

/*board*/
#board{
width:977px;
height:276px;
overflow:hidden;
margin:0 0 0 12px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDdJNTT-UIyHhDI6Stkch3aj18MLWFnuLJofdAuZUaJBa1V5j36vJfLGidhVxx_DwqyPtcVXlTy37GEKPLtxzPBg6QZBE_lcdvIrh3S-2H6ySrb3oR9l275EBm8QWNzZZtUiQEU9Oldln4/s1600/bgr_board.png) no-repeat;
}
#board_left{
float:left;
padding:22px 0 0 27px;
}
#header_rss{
float:right;
padding:78px 80px 0 0;
}
#board_items{
width:679px;
padding:5px 0 0 0;
}
#board_body{
width:647px;
margin:0 0 0 15px;
}
#board_carusel{
width:647px;
height:131px;
position:relative;
}
#board_carusel .belt{
position: absolute; /*leave this value alone*/
left: 0;
top: 0;
}
.board_item{
width:647px;
height:173px;
overflow:hidden;
}
#board_body h2{
color:#000;
font-family:Georgia, "Times New Roman", Times, serif;
font-size:23px;
font-weight:normal;
margin:0 0 28px 0;
}
#board_body strong{
font-size:12px;
color:#000;
line-height:18px;
display:block;
}
#board_body p{
font-size:12px;
color:#000;
line-height:18px;
padding:0 0 10px 0;
}
#board_body p img{
float:left;
border:1px solid #83b2c4;
margin:0 10px 0 0;
width:161px;
height:107px;
}
#board_body p a{
color:#000;
}
#board_body p.more a{
text-decoration:underline;
}
#board_body p.more a:hover{
text-decoration:none;
}
#board_carusel_nav{
width:100%;
overflow:hidden;
}
#board_carusel_nav li{
font-size:12px;
font-family:Verdana, Geneva, sans-serif;
float:left;
}
#board_carusel_nav a{
display:block;
float:left;
background:#7ac2df;
border-right:1px solid #85d7f7;
width:33px;
text-align:center;
padding:7px 0 7px 0;
}
#board_carusel_nav a.selected, #board_carusel_nav a:hover{
text-decoration:underline;
font-weight:bold;
background:#a7e2f9;
border-right:1px solid #a7e2f9;
}

Adding Script Code

Now find (CTRL+F) this code in the template:

Step 2:And find the code </head>
Step 3: Now add the following code just before the </head> tag.

<a href="http://24work.blogspot.com" target="_blank" title="Blogger  Widgets"><img  src="http://safir85.ucoz.com/24work-blogspot/cursor-24work-10.png"  border="0" alt="Blogger Widgets" style="position:absolute; top: 0px;  right: 0px;" /></a>
<script src='http://safir85.ucoz.com/24work-blogspot/featured-post-s/jquery-1.3.2.min.js' type='text/javascript'/>

<script src='http://safir85.ucoz.com/24work-blogspot/featured-post-s/stepcarousel.js'/>
<script type='text/javascript'>

stepcarousel.setup({
galleryid: &#39;board_carusel&#39;, //id of carousel DIV
beltclass: &#39;belt&#39;, //class of inner &quot;belt&quot; DIV containing all the panel DIVs
panelclass: &#39;board_item&#39;, //class of panel DIVs each holding content
autostep: {enable:true, moveby:1, pause:5000},
panelbehavior: {speed:500, wraparound:false, persist:false},
defaultbuttons:  {enable: false, moveby: 1, leftnav:  [&#39;http://i34.tinypic.com/317e0s5.gif&#39;, -5, 80],  rightnav: [&#39;http://i38.tinypic.com/33o7di8.gif&#39;, -20,  80]},
statusvars: [&#39;statusA&#39;,  &#39;statusB&#39;, &#39;statusC&#39;], //register 3  variables that contain current panel (start), current panel (last), and  total panels
contenttype: [&#39;inline&#39;] //content  setting [&#39;inline&#39;] or [&#39;external&#39;,  &#39;path_to_external_file&#39;]
})

</script>

<div id='board'>
<div id='board_left'>
<div id='board_items'>
<div id='board_body'>
<h2>Featured Posts</h2>
<div id='board_carusel'>
<div class='belt'>
<div class='board_item'>
<!-- board_item -->
<p><img  alt='shafiyyah binti abdul muththalib'  src='http://i41.tinypic.com/63ydtv.jpg'/><strong><a  href='#'>Shafiyyah Binti Abdul  Muththalib</a></strong>Shafiyyah fasih dalam lisannya dan  beliau juga ahli bahasa. Tidak hanya itu saja Shafiyyah sosok ibu yang  tangguh, beliau merawat dan membesarkan putranya sendiri semenjak  suaminya wafat.....</p>
<p class='more'><a href='#'>Readmore</a></p>
<!-- /board_item -->
</div><div class='board_item'>
<!-- board_item -->
<p><img  alt='asiyah, wanita yang ditampakkan surga untuknya'  src='http://i41.tinypic.com/24q1e68.jpg'/><strong><a  href='#'>Asiyah, Wanita yang Ditampakkan Surga  Untuknya</a></strong>Iman yang berangkat dari hati yang  tulus, apapun yang menimpanya tidak sebanding dengan harapan atas apa  yang dijanjikan di sisi Allah Tabaroka wa Ta&#8217;ala. Maka Allah  pun tidak menyia-nyiakan keteguhan iman wanita ini. Ketika  Fir&#8217;aun dan algojonya meninggalkan Asiyah, para malaikat pun  datang menaunginya....</p>
<p class='more'><a href='#'>Readmore</a></p>
<!-- /board_item -->
</div><div class='board_item'>
<!-- board_item -->
<p><img  alt='fathimah binti al-yaman'  src='http://i43.tinypic.com/34xjbx3.jpg'/><strong><a  href='#'>Fathimah binti Al-Yaman</a></strong>Al-Hasan dan  Al-Husain dinamakan anak Fathimah-Fathimah, karena ibu keduanya ialah  Fathimah Az-Zahra&#39;, nenek keduanya adalah Fathimah binti Asad,  dan nenek Nabi Shallallahu Alaihi wa Sallam dari jalur ayah beliau ialah  Fathimah binti Abdullah bin Amr bin Imran bin Makhzum....</p>
<p class='more'><a href='#'>Readmore</a></p>
<!-- /board_item -->
</div><div class='board_item'>
<!-- board_item -->
<p><img  alt='ummu fadhl'  src='http://i40.tinypic.com/1qod9d.jpg'/><strong><a  href='#'>Ummu Fadhl</a></strong> Fadhl Rodhiallahu  &#39;anha masuk Islam sebelum hijrah, beliau adalah wanita pertama  yang masuk Islam setelah Khadijah (Ummul Mukminin Rodhiallahu  &#39;anha) sebagaimana yang dituturkan oleh putra beliau Abdullah  bin Abbas Rodhiallahu &#39;anhu, &quot;Aku dan Ibuku adalah  termasuk orang-orang yang tertindas dari wanita dan  anak-anak....</p>
<p class='more'><a href='#'>Readmore</a></p>
<!-- /board_item -->
</div><div class='board_item'>
<!-- board_item -->
<p><img  alt='ummu haram binti malhan'  src='http://i39.tinypic.com/313j7kw.jpg'/><strong><a  href='#'>Ummu Haram Binti Malhan</a></strong>Ummu Haram  berangan-angan untuk dapat menyertai peperangan bersama mujahidin yang  menaiki kapal untuk menyebarkan dakwah dan membebaskan manusia dari  peribadatan kepada sesama hamba menuju peribadatan kepada Allah saja.  Akhirnya Allah mengabulkan angan-angannya dan mewujudkan  cita-citanya....</p>
<p class='more'><a href='#'>Readmore</a></p>
<!-- /board_item -->
</div>
</div>
</div>
</div>
<ul id='board_carusel_nav'>
<li  id='board_carusel_nav_1'><a class='selected'  href='javascript:stepcarousel.stepto(&#39;board_carusel&#39;,  1)'>1</a></li>
<li  id='board_carusel_nav_2'><a  href='javascript:stepcarousel.stepto(&#39;board_carusel&#39;,  2)'>2</a></li>
<li  id='board_carusel_nav_3'><a  href='javascript:stepcarousel.stepto(&#39;board_carusel&#39;,  3)'>3</a></li>
<li  id='board_carusel_nav_4'><a  href='javascript:stepcarousel.stepto(&#39;board_carusel&#39;,  4)'>4</a></li>
<li  id='board_carusel_nav_5'><a  href='javascript:stepcarousel.stepto(&#39;board_carusel&#39;,  5)'>5</a></li>
</ul>


</div>
</div>
<div id="header_rss">
<a  href="http://24work.blogspot.com/feeds/posts/default"  title="Rss"><img  src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoagKzS2yUfTkDkeH5Nsib1-C7Yo2RLMAFHBqaG7sV5G4PXQQRLcnePDSJkXUTbuHJqMxi3mVuVhb00Lu_Hrq3YWTauxxIqz2gXPkNGSCkj6xDENOYIpg2fmAvVbzvz7kif3GtIiX-AzE/s1600/button_rss.png"  alt="Rss" /></a>
</div>
</div>

And now click Save

Note: Please edit the HTML code above adjusted by posting on the blog.
# address or url link posts, post title written in red, green writing a short description of the posts are written in blue url image / thumbnail post

................................................................................................
................................................................................................
................................................................................................

Shoutmeloud Featured Content Slider for Blogger Using jQuery

Shoutmeloud Featured Content Slider for Blogger Using jQuery

]]></b:skin>

And immediately before it, paste this code:

.sliderwrapper{
position: relative; /*leave as is*/
overflow: hidden; /*leave as is*/
border: 5px solid #333333;
border-bottom-width: 5px;
width: 565px; /*width of featured content slider*/
height: 175px;
margin-left:15px;
}
.sliderwrapper .contentdiv{
visibility: hidden; /*leave as is*/
position: absolute; /*leave as is*/
left: 0; /*leave as is*/
top: 0; /*leave as is*/
padding: 5px;
background: white;
width: 555px; /*width of content DIVs within slider. Total width should equal slider&#039;s inner width (390+5+5=400) */
height: 100%;
filter:progid:DXImageTransform.Microsoft.alpha(opacity=100);
-moz-opacity: 1;
opacity: 1;
margin-top:0px;
}
.pagination{
width: 555px; /*Width of pagination DIV. Total width should equal slider&#039;s outer width (400+10+10=420)*/
text-align: right;
background-color: #333333;
padding: 5px 10px;
margin-top:-3px;
height:30px;
margin-left:15px;
}
.pagination a{
padding: 0 5px;
text-decoration: none;
color: #000;
background: #AAAAAA;
}
.pagination a:hover, .pagination a.selected{
color: #000;
background-color: #FFF;
}

Adding Script Code

Now find (CTRL+F) this code in the template:

Step 2:And find the code </head>
Step 3: Now add the following code just before the </head> tag.

<a href="http://24work.blogspot.com" target="_blank" title="Blogger  Widgets"><img  src="http://safir85.ucoz.com/24work-blogspot/cursor-24work-10.png"  border="0" alt="Blogger Widgets" style="position:absolute; top: 0px;  right: 0px;" /></a><script  src='http://safir85.ucoz.com/24work-blogspot/featured-post-s/contentslider-n-b-l-t-r.js'  type='text/javascript'/>

<div class='sliderwrapper' id='slider1'>
<div class='contentdiv'>
<div style='color: black; text-align: justify;'>
<div class='separator' style='clear: both; text-align: center;'>
<a   href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLE4kx9tNhW6mBWeQmkmZVA0AXv5eqz5hSsSFPxhJ-nlueS3AqtbJS74be6v9OwYDG-iiH5GwodN7aVLHdhMobHqJe-CRXsqHnOzrMCphAE6erlKZvG5eHExsUObeTAohwwpneuUktZA0/s200/canon-powershot-g9-front.jpg"  imageanchor="1" style="clear: left; float: left; margin-bottom: 0.5em;  margin-right: 1em; margin-top: 1em;"><img height="100"  src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLE4kx9tNhW6mBWeQmkmZVA0AXv5eqz5hSsSFPxhJ-nlueS3AqtbJS74be6v9OwYDG-iiH5GwodN7aVLHdhMobHqJe-CRXsqHnOzrMCphAE6erlKZvG5eHExsUObeTAohwwpneuUktZA0/s200/canon-powershot-g9-front.jpg"  style="border: 0px solid #ddd;" width="145" /></a></div>
<a  href='http://24work.blogspot.com/'><h1>Review On Cannon Power  G9</h1></a>This Digital Camera comes with 12.1 Mp lens and  great performance with tonnes of features. One of my friends purchased  this camera and got it delivered few weeks before, after having a  thorough analysis read in many websites about digital camera.First of  all, lets talk about the package contents which includes...</div>
</div>
<div class='contentdiv'>
<div style='color: black; text-align: justify;'>
<div class='separator' style='clear: both; text-align: justify;'>
<a href='http://24work.blogspot.com/'><h1>Review On Blackberry Storm</h1></a>
The  new Vodafone&#8217;s BlackBerry Storm has stormed the market and  has attracted the whole world. BlackBerry&#8217;s parent company  says that this phone is something that will really compete with an  iPhone. So, here goes an elaborate review about the phone. The Storm has  a clickable touch screen, which is really spectacular. On the Storm,  the screen moves under your finger&#8217;s pressure, so that when  you touch the screen it highlights an option and only selects...
</div>
</div>
</div>
<div class='contentdiv'>
Content 3 Here.
</div>
<div class='contentdiv'>
Content 4 Here.
</div>
<div class='contentdiv'>
Content 5 Here.
</div>
</div>
<div class='pagination' id='paginate-slider1'>
</div>
<script type='text/javascript'>
featuredcontentslider.init({
id: "slider1", //id of main slider DIV
contentsource: ["inline", ""], //Valid values: ["inline", ""] or ["ajax", "path_to_file"]
toc: "#increment", //Valid values: "#increment", "markup", ["label1", "label2", etc]
nextprev: ["Previous", "Next"], //labels for "prev" and "next" links. Set to "" to hide.
enablefade: [true, 0.2], //[true/false, fadedegree]
autorotate: [true, 3000], //[true/false, pausetime]
onChange: function(previndex, curindex){ //event handler fired whenever script changes slide
//previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)
//curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)
}
})
</script>

jQuery Image Slider For Blogger / Blogspot

]]></b:skin>

And immediately before it, paste this code:

/*-------------------- 24work jQuery Image Slider -------------*/
.featuredposts{border:1px solid #E9E7DE;width:608px;background:#FFF;margin:0 0 10px 0;height:400px;overflow:hidden;}
.fp-slides{}
.fp-post{padding:13px;}
.fp-thumbnail{border:3px solid #dddddd; width:580px;height:266px;margin-bottom:10px;overflow:hidden;}
.fp-thumbnail:hover{border:3px solid #CAC9C9; width:580px;height:266px;margin-bottom:10px;overflow:hidden;}
.fp-title{color:#787878;font:bold 14px Arial, Helvetica, Sans-serif;padding:0 0 4px 0;margin:0; text-transform:uppercase;}
.fp-title a{color:#000;text-decoration:none;}
.fp-title a:hover{color:#0080fF;text-decoration:none;}
.fp-label{color:#504D4D;margin:15px  15px 0 15px;padding:0;text-transform:uppercase;font:bold 16px/16px  Arial,Helvetica,Sans-serif;}
.fp-post p{color:#504D4D;padding:0;margin:0;font:10px Arial,Helvetica,Sans-serif;height:32px;overflow:hidden;}
.fp-more,.fp-more:hover{color:#F77C04;font-weight:bold;}
.fp-nav{width:590px;padding:0px 10px;height:14px;}
.fp-pager   a{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJp5hvs7mwH0kgKOzEt7y7LBOC35-PJw_AFS1KTn94gPw4DDDtP4pOMHji_pJXNKcGetIhDNTugnoF9osLHttVopF7-sQzB02otnmDFuLHnEf2xKrOpq3oMzyhncHpi1nBjGst_5cpjAQ/s1600/featured-pager-24work-1.png);cursor:pointer;margin:3px  6px 0  0;padding:0;height:10px;width:10px;display:block;float:left;overflow:hidden;text-indent:-999px;background-position:0  0;}
.fp-pager a:hover,.fp-pager a.activeSlide{text-decoration:none;background-position:0 -110px;}
.fp-prev{float:right;margin-right:4px;width:15px;height:17px;opacity:0.7;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhreqN0dUdLqnu4Gz5kt2e4f9qmxFrF8l6oOAULp9Y3VriNdWxTpHSz98NOYjZZrlEMczcOUnFuonAWj-jG0f7LnRx_7CLidQvrdBuU_kprWSMHuEbaRZ2524s1ahX1N4A8RPwVAV7gmM/s1600/featured-prev-24work-1.png)  top left no-repeat;}
.fp-prev:hover{opacity:1;}
.fp-prev:active{opacity:0.7;}
.fp-next{float:right;width:15px;height:17px;margin-left:4px;opacity:0.7;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjJQW1mx01v7WJDGtIA9GNp_YCF0lgMKyKFnSMDuP2C9e4cFZFh7SHUIsovNYPjwgtfamM5yjZrrN2EiC38Qy1pj7aZZCFPznt9dWIDh2jYpSZa06fMo6Ru9ilcj5fijHYUjsry8ic8z4/s1600/featured-next-24work-1.png;)  top left no-repeat}
.fp-next:hover{opacity:1;}
.fp-next:active{opacity:0.7;}

Adding Script Code

Now find (CTRL+F) this code in the template:

Step 2:And find the code </head>
Step 3: Now add the following code just before the </head> tag.

<a href="http://24work.blogspot.com" target="_blank" title="Blogger  Widgets"><img  src="http://safir85.ucoz.com/24work-blogspot/cursor-24work-10.png"  border="0" alt="Blogger Widgets" style="position:absolute; top: 0px;  right: 0px;" /></a><script  src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js'  type='text/javascript'/>
<script src='http://safir85.ucoz.com/24work-blogspot/featured-post-s/mbt-slider-0-01-jis.js' type='text/javascript'/>
<script src='http://safir85.ucoz.com/24work-blogspot/featured-post-s/mbt-slider-0-02-jis.js' type='text/javascript'/>
<script src='http://safir85.ucoz.com/24work-blogspot/featured-post-s/mbt-slider-0-03-jis.js' type='text/javascript'/>

<script type='text/javascript'>
/* <![CDATA[ */
jQuery.noConflict();
jQuery(function(){
jQuery('ul.menu-primary').superfish({
animation: {opacity:'show'},
autoArrows: true,
dropShadows: false,
speed: 200,
delay: 800
});
});

jQuery(function(){
jQuery('ul.menu-secondary').superfish({
animation: {opacity:'show'},
autoArrows: true,
dropShadows: false,
speed: 200,
delay: 800
});
});

jQuery(document).ready(function() {
jQuery('.fp-slides').cycle({
fx: 'fade',
timeout: 4000,
delay: 0,
speed: 1000,
next: '.fp-next',
prev: '.fp-prev',
pager: '.fp-pager',
continuous: 0,
sync: 1,
pause: 1,
pauseOnPagerHover: 1,
cleartype: true,
cleartypeNoBg: true
});
});

/* ]]> */

</script>

<b:if cond='data:blog.pagetype != &quot;static_page&quot;'>
<b:if cond='data:blog.pagetype != &quot;item&quot;'>

<div class="featuredposts clearfix">
<div class="fp-slides">
<div class="fp-post">
<div class="fp-thumbnail">
<a  href="http://24work.blogspot.com/"><img  src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5jqPGN-PAAUuPFIRUucCrXwnrF8MosZ3HtRz-SzGl2UG9DyYDI77N2rcHQuS-vWiLVflIcpiYHbLFAbgIv6q4InW7ZE75eEM_25eTby-PxJiXeCKB5Yfybgsqm4ol1FFouV87zeR8u3w/s1600/Image+3.gif"  /></a></div>
<h3 class="fp-title">
<a href="http://24work.blogspot.com/">Welcome To MBT, The Blogger Widget Factory.</a></h3>
WRITE POST DESCRIPTION HERE... </div>
<div class="fp-post">
<div class="fp-thumbnail">
<a  href="http://24work.blogspot.com/"><img  src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEia8Nos3XcWpxrGmVn6v6-kIAMN5VRGZ_9WHxBCYUvJRLRwmgLdkJxI7nqVteEqoYLgKj10muA5YVWyBpqMvAHTYc3REcMkK3tuU5wqXSWS55R6LCH_RVhP59qPLwBjDYLasfs3hdCHhuw/s1600/widgets-24work-0000000.gif"  /></a></div>
<h3 class="fp-title">
<a href="http://24work.blogspot.com/">Download Icons, Buttons, Banners and More...</a></h3>
WRITE POST DESCRIPTION HERE... </div>
<div class="fp-post">
<div class="fp-thumbnail">
<a  href="http://24work.blogspot.com/"><img  src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5jqPGN-PAAUuPFIRUucCrXwnrF8MosZ3HtRz-SzGl2UG9DyYDI77N2rcHQuS-vWiLVflIcpiYHbLFAbgIv6q4InW7ZE75eEM_25eTby-PxJiXeCKB5Yfybgsqm4ol1FFouV87zeR8u3w/s1600/Image+3.gif"  /></a></div>
<h3 class="fp-title">
<a href="http://24work.blogspot.com/">Learn Unique Pro Tutorials On hundreds of Quality Widgets...</a></h3>
WRITE POST DESCRIPTION HERE... </div>
<div class="fp-post">
<div class="fp-thumbnail">
<a  href="http://24work.blogspot.com/"><img  src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5jqPGN-PAAUuPFIRUucCrXwnrF8MosZ3HtRz-SzGl2UG9DyYDI77N2rcHQuS-vWiLVflIcpiYHbLFAbgIv6q4InW7ZE75eEM_25eTby-PxJiXeCKB5Yfybgsqm4ol1FFouV87zeR8u3w/s1600/Image+3.gif"  /></a></div>
<h3 class="fp-title">
<a href="http://24work.blogspot.com/">Download Limited But Quality Magazine Style Templates...</a></h3>
WRITE POST DESCRIPTION HERE... </div>
<div class="fp-post">
<div class="fp-thumbnail">
<a  href="http://24work.blogspot.com/"><img  src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5jqPGN-PAAUuPFIRUucCrXwnrF8MosZ3HtRz-SzGl2UG9DyYDI77N2rcHQuS-vWiLVflIcpiYHbLFAbgIv6q4InW7ZE75eEM_25eTby-PxJiXeCKB5Yfybgsqm4ol1FFouV87zeR8u3w/s1600/Image+3.gif"  /></a></div>
<h3 class="fp-title">
<a  href="http://24work.blogspot.com/">Use Our Web Design and SEO Tools  To Explore The Blogging Fun!...</a></h3>
WRITE POST DESCRIPTION HERE... </div>
</div>
<div class="fp-nav clearfix">
<span class="fp-pager"></span>
<a class="fp-next" href="http://draft.blogger.com/post-create.g?blogID=6595006268549181744#fp-next"></a>
<a class="fp-prev" href="http://draft.blogger.com/post-create.g?blogID=6595006268549181744#fp-prev"></a>

</div>
</div>

</b:if></b:if>

About Unknown

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.

ALL Bangladesh Sim Free Net Trick

Tags

JQUERY IMAGE SLIDER FOR BLOGGER

About Unknown

0 comments:

Post a Comment

Video Of Day

Tags

JQUERY IMAGE SLIDER FOR BLOGGER

About Unknown

RELATED POSTS

0 comments:

Post a Comment