Blogging Trainings: CONTENT SLIDER

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/AVvXsEhwMejKqxR2ZMuX62BkagAE0huSaKpKtekS6u_tjK7BkNA84jOtg4LEvDDnfDMeyMUZYFAifOe8UJjP-LZ0okXCgXNHATiktPvbSq5VpKpShLouX6nq0zH9IhNcBGb0RTEUa8qnVErl2w/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/AVvXsEiJ_nVUBiOx2R5hqlY6h2nNdj3Om6aqVgfdB7sPT3BW_InGKVuVCTh8eLz2-AHZjzj16L-Ox1wCN21p-R7Yaz1LN1UQRMo0-G1h4fLPMjEvu2v-88I1s1K1lRH85czSHgtsepUxl5hMc_A/s400/left.jpg&#39;, -48, 0], rightnav: [&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8YjM_02ePAtaE4a77fSPWBUrrnUkpNwi4uCSBr-MqhCCb1XI3jldlUoGchqUbo8qhJ9kW-hPNLExXj6IWYSSudpEY2pJxqzWLt-poq4syJTkHQLM3lRKUaLlzuHJ-Nn6QUpVip5y8jYg/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/AVvXsEjcgK_u4gOjJ8sQb37Iar0FM2cepOeBmiyTfk4xZz6K_wgzmSvfwJPlV0CIfGtPzOFW03xPmmfdM940t7NGEOD4lQrjyX78P-a7WlFJxl-rinPhE2m1SvPclO56YCT2uSvqohclm3Z1x9Q/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/AVvXsEga1zQdh_FX3TpusgPsErQFPgDrbCKqEfUBUdLByz84QHEbluXwrHIRglrWWBQH7jKTLHWzqlHPPc-0_oxkjUaspOOoJjUjzhyRlYCStahS2iH4W1hBqSTpYn-t0IA9Xt8mHxpvn_phyScR/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/AVvXsEiDnaiYNeAJylWtb2p7LQGy-hc_qy3NpYx9Dw_V-6zhK8nBn-EmDpIuGfdrZL3Gxs6bK-9UsATWVVNr8V2YVuDHFSutjvMYzOzZi22hi-GFPPbHcuIJTjWtl5BSc_F5UD9f_F3ScfEmGfpw/s400/prev.jpg) no-repeat;
}
#nav-slides a#prev:hover{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfBNLOmzS8JrPyb6EjrAuzE_3aKpSyzj8Vul8mmLUce6NEiN_B-00UvQS-sf9ZNj8U32jMHn-AXYkjGHWETQn9zwljFZeZLfqmOtOWZjNSG1-DZIZD4tnAt8NOptuZld-_OzQLgHZnYZ1w/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/AVvXsEjjoySz6PSDRKAJHiAqZalyKGsQnHyiHwEtYeHsvnjJhnTqLaROiiyBJLp2kvEjGt_HSDN0HDuV0wX81XaoHKy_Acae0RrqiVyiRiCW8UuOz4eqwNToat4ivN-8_NNIyFI7sO4L-4VmChyphenhyphenn/s400/next.jpg) no-repeat;
}
#nav-slides a#next:hover{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRAbdZtjUtQz1irroqBpOsXdkXECCglF3537Dgu8NFP-0mOmtYo4w_EtwYWAmEEvNQvnn1PARQ0jiPU0tdlEWoEy8qDO11Rd1nCkJ86Hk3cdJaRgYu9oKSDDGtZl0PpGJKxpUwzkwSZ81_/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/AVvXsEjL_MP6LC4p-udpMu4vje09zNLGOsV-6Nh-fqDQWmGBbxnsTR6j4SqiX5jCsSVbXfmQSXUT4aDpsIvrNF1MNor6a-vEp3EHJzOY40AZw-oMjTdv4HInonLhtnicdDJyR0wwRI45DwZsZW0/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/AVvXsEhqOPfTLtpUlW_6AJXnZC0CQuez31FQgY06-FEWz0Ts0DWwmdfRME1CUoc6He5cD-CpkelVOSa7-DbGg1uD-wgX3DqQ5ttoMpdODECXaQuWzxZr6yWXTlp63hyphenhyphenp-d_RBhXaL_-DNRBD96Y/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/AVvXsEgS8PcFeHmvBPmG45HkQrwJ77A0jr5rRjxMOdUUX-jmrtdEn9M1qMTyUXiczCUc0Wayp5YU4NgNlC797icuIWvROPWmEe5eDpEVyx-2d6Q61ZpZX4DAYp9UdwINBU1PUzQXg6unbmPrBos/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/AVvXsEiEY9Y1MY5NfEzT_mU5XP1_wgnGXIXEJlIzfLS0oOWYZixkfEwwp4maceRqORgfnkmENi0fy6WAQCw6RuhUgxLvN8YVTxluQQnbRMLPBINUh4abw8Q5XQRvVYaiZsP1-yAhH8BC8QXRmR6I/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/AVvXsEjo5KJIHOlg74hqeg0WVUhMGYezVh-n_-3WY52zZLDkvk_1VKl2jcV6ApNjPuukRH1mmrMqU-Qna1TTlWA-AqcEI8NE-TKSlhfmaEf0UlScalsXpUaW2Tth2jcfqxNIw7UeGyjAiMFpKl-z/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/AVvXsEh1EdftroxiQKHJiNsojDgu_p2Bd_t60_aTgz4zIxdvc6fyQsJ5owaN9qhAvuKtKXj2-rB7iNSI0YCRBt20FVKDJT1CxOBGG54R1-hp08OnEwrNn9JUaGVfVx2EINSnYTTz3_LQcasJCX5V/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/AVvXsEiaqYNZotlk_LGqSF7Asp4eyIsZa6w-G3G20B0Mrpuqchyzn-qazuppdSNYZoHI0loEFWxo8X6RtQ50f0dQumICj9eF5gElgdFJNVlQngzdSANeGsUhBWNs7LT262pCTL7eL23UMF-2SUkb/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/AVvXsEjAqrN-J9yssyh3Da6Ziie06ibICtSJ6fEGQQE3aQgRj1VsHpz9d-iTHwRQlY6ibO6X92w7Vzw0V0U0LE6qjOKC6K8ONzazNbXFqTmNIFtMcbOgm8tau3VdBheAp9-czZkxfvuEWLtYvbwk/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/AVvXsEh2iUSpA4_euQbwsjoF4_3lK2ykdHaXmbWKBD9imrfhntknj8Yo7O9FrTVBVG2omD1akPDHUt4MMvrNjqCUMe99T9hN1ZWoXM7yDB7VbJD5y5plvl1KHYJVxKCuDYRTQCYJuCDJU3TsvTss/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/AVvXsEjiNJclWnGgiaXh95hzGVFDdBZPkna7pmJckKec-BPRkkxT3FBtsqE8WeewPbRnfOhatWJzxAznKAfayDeqcZyl8YLOc20LCBhPSfwakOWpkWseeZbK2FflNCjn7hOFxL3dY9JeFPHvTxs/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/AVvXsEiPH8tzo8YB4gkCHO_HQly4tvH82lMvjQE3FqKUnLw3dwWcOQqfWLlVtIBtiJNd5_OHk0swYBLd0VRBfiKL8ysRKQT6W19uVmKci03Ojf-uDsF2mzIr8LMr8CwhVct3jjn9jmKMDmt_4q8/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/AVvXsEiPH8tzo8YB4gkCHO_HQly4tvH82lMvjQE3FqKUnLw3dwWcOQqfWLlVtIBtiJNd5_OHk0swYBLd0VRBfiKL8ysRKQT6W19uVmKci03Ojf-uDsF2mzIr8LMr8CwhVct3jjn9jmKMDmt_4q8/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/AVvXsEjKrmf5Aa37gcomJ_KqHuzizk29JWtxjug61VktaPc96UdrQMQTpprsV6lb-BX2Yv4KzSMjnqP2jh-Zd2c-215fFJkzbHS1ED2LfvemEjVdtlXAUdcYoNdTsn1XJBn7mO8FGIONwE21n7M/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/AVvXsEgOsLU63qkSKqSBJNKX-fRIzCKrI_A8AvWK6KSKjjkLM_whpAa4pAsWn2WaRC0UgFqZ5emgaNJHTzyQbdZ6OcSRGA2LC3QBdJDcBBQaz9EM6bMpYQegHVCAKw31xfmPvPPfJER9e5JbvdA/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/AVvXsEjFnRjWuyvKmSLHYNTPWBlqANUF7t1CVFFja4Q2Tf4zfoe_D8zXQ9edX_VnGFsrEqXQXIIXZkTWsMXBmpUTzISsHwP8h4fgxlO000eczZAlqQa7pry638KAeQGV3T_UwYPtHjqwTN-Zwj0/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/AVvXsEiFKNLQca8_JNGUazARvnMK5G77XyOGY2UjqoNlcUBaA5I8cxKagUlkDDx-hGsfnK4Y8UTPT7udpybShi2Y1Lrzjcv9tFNZ8WEwPFbVoLcJ0ICTTx0h-WgXyJ6H64sFC3AC72Rs0eU_lJ4/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/AVvXsEj46zMwjfvDR4SiqRnTEjxpIHkdhCPtxAj_Ps_AR3zlIllTZlBD2aIkSWalbbsdJVgigmZ1m3z9_jdOEicuD8lb1gsjHhrl-TRVCHd5B6RoohtPF4GZIcF39K4S6pzdEvEDECcz33-2smA/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/AVvXsEiFKNLQca8_JNGUazARvnMK5G77XyOGY2UjqoNlcUBaA5I8cxKagUlkDDx-hGsfnK4Y8UTPT7udpybShi2Y1Lrzjcv9tFNZ8WEwPFbVoLcJ0ICTTx0h-WgXyJ6H64sFC3AC72Rs0eU_lJ4/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/AVvXsEiFKNLQca8_JNGUazARvnMK5G77XyOGY2UjqoNlcUBaA5I8cxKagUlkDDx-hGsfnK4Y8UTPT7udpybShi2Y1Lrzjcv9tFNZ8WEwPFbVoLcJ0ICTTx0h-WgXyJ6H64sFC3AC72Rs0eU_lJ4/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/AVvXsEiFKNLQca8_JNGUazARvnMK5G77XyOGY2UjqoNlcUBaA5I8cxKagUlkDDx-hGsfnK4Y8UTPT7udpybShi2Y1Lrzjcv9tFNZ8WEwPFbVoLcJ0ICTTx0h-WgXyJ6H64sFC3AC72Rs0eU_lJ4/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>

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.

We have great collection of Best tricks and tutorials, Bloggingtrainings.blogpsot.com is a Blog Providing with Blogger widgets, help, blogger tips, blogger tricks, hacks, Blogger Gadgets,Plugins and Blogger resources with great skills and templates.practical SEO Tips and all things Blogging,is about Blog tricks & tips, Traffic generation, Backlinks, Search engine optimization, Web designing, E money, Social media, Facebook tricks,Blogging Discussion, Tips & Tricks,logging tips, tricks, how-tos, news, tools and resources, bloggingtrainings.blogspot presented in easy to understand tutorials.Keep visiting us if any links is not working or you want sme more help, then keep looging at bloggingtrainings.blogspot.com.or contact us 0323-7591466.

Blogging Trainings

JQUERY IMAGE SLIDER FOR BLOGGER

Advertisement

Labels

Popular Posts

Books Categories

Ad

visitors

Template Information

Test Footer 2

Template Information