File Update

#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(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(transparent-bg.png); } #featured .info h2{ font-size:18px; font-family:Georgia, serif; color:#fff; padding:5px; margin:0; overflow:hidden; } #featured .info p{ margin:0 5px; font-family:Verdana; font-size:11px; line-height:15px; color:#f0f0f0; } #featured .info a{ text-decoration:none; color:#fff; } #featured .info a:hover{ text-decoration:underline; }

<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 alt=pic1 src=http://i49.tinypic.com/e1aohv.jpg/><span>Install Mac OS X on Intel/AMD PC using iATKOS v7</span></a></li>
<li class=ui-tabs-nav-item id=nav-fragment-2><a href=#fragment-2><img alt=blogger src=http://i438.photobucket.com/albums/qq108/fooble11/image2-small.jpg/><span>How to remove &quot;showing post with label&quot; in Blogger</span></a></li>
<li class=ui-tabs-nav-item id=nav-fragment-3><a href=#fragment-3><img alt=buzz src=http://i438.photobucket.com/albums/qq108/fooble11/new1.jpg/><span>How to add Google Buzz to Blogspot blog</span></a></li>
<li class=ui-tabs-nav-item id=nav-fragment-4><a href=#fragment-4><img alt=chat src=http://i50.tinypic.com/34xfg4m.jpg/><span>Chat live with your blog visitors using Yahoo Pingbox</span></a></li>
</ul>
<!-- First Content -->
<div class=ui-tabs-panel id=fragment-1 style=>
<img alt=mac src=http://i47.tinypic.com/rsbi80.jpg/>
<div class=info>
<h3><a href=#>Install Mac OS X on Intel/AMD PC using iATKOS v7</a></h3>
<p>Description goes here, this is just a test description....<a href=http://www.bloggermint.com/2010/02/install-mac-os-x-on-intelamd-pc-using.html>read more</a></p>
</div>
</div>
<!-- Second Content -->
<div class=ui-tabs-panel ui-tabs-hide id=fragment-2 style=>
<img alt= src=http://i50.tinypic.com/33kprh5.jpg/>
<div class=info>
<h3><a href=#>How to remove &quot;showing post with label&quot; in Blogger</a></h3>
<p>Description goes here, this is just a test description....<a href=#>read more</a></p>
</div>
</div>
<!-- Third Content -->
<div class=ui-tabs-panel ui-tabs-hide id=fragment-3 style=>
<img alt= src=http://i47.tinypic.com/2191lqt.jpg/>
<div class=info>
<h3><a href=#>How to add Google Buzz to Blogspot blog</a></h3>
<p>Description goes here, this is just a test description....<a href=#>read more</a></p>
</div>
</div>
<!-- Fourth Content -->
<div class=ui-tabs-panel ui-tabs-hide id=fragment-4 style=>
<img alt= src=http://i48.tinypic.com/10pwp3o.jpg/>
<div class=info>
<h3><a href=#>Chat live with your blog visitors using yahoo</a></h3>
<p>Description goes here, this is just a test description....<a href=#>read more</a></p>
</div>
</div> </div>

<script language=javascript src=http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js type=text/javascript/>
<script language=javascript src=http://sites.google.com/site/freebloggerhelpbiz/freebloggerhelp/jquery.flow.1.2.auto.js type=text/javascript/>
<script type=text/javascript>
$(document).ready(function(){
$(&quot;#myController&quot;).jFlow({
slides: &quot;#slides&quot;,
controller: &quot;.jFlowControl&quot;, // must be class, use . sign
slideWrapper : &quot;#jFlowSlide&quot;, // must be id, use # sign
selectedWrapper: &quot;jFlowSelected&quot;, // just pure text, no sign
auto: true, //auto change slide, default true
width: &quot;610px&quot;,
height: &quot;235px&quot;,
duration: 100,
prev: &quot;.jFlowPrev&quot;, // must be class, use . sign
next: &quot;.jFlowNext&quot; // must be class, use . sign
});
});
</script>

<div class="jflow-content-slider">
<div id="slides">
<-! Slide #1 Starts-->
<div class="slide-wrapper">
<div class="slide-thumbnail">
<img alt="" src="IMAGE-LINK"/>
</div>
<div class="slide-details">
<span style="font-size: large;"><b> TITLE-OF-THE-SLIDE </b></span>
<div class="description">
TEXT-OF-THE-SLIDE
</div>
</div>
<div class="clear"></div>
</div>
<!-- Slide # 1 Ends -->
<-! Slide #2 Starts-->
<div class="slide-wrapper">
<div class="slide-thumbnail">
<img alt="" src="IMAGE-LINK"/>
</div>
<div class="slide-details">
<span style="font-size: large;"><b> TITLE-OF-THE-SLIDE </b></span>
<div class="description">
TEXT-OF-THE-SLIDE
</div>
</div>
<div class="clear"></div>
</div>
<!-- Slide # 2 Ends -->
<-! Slide #3 Starts-->
<div class="slide-wrapper">
<div class="slide-thumbnail">
<img alt="" src="IMAGE-LINK"/>
</div>
<div class="slide-details">
<span style="font-size: large;"><b> TITLE-OF-THE-SLIDE </b></span>
<div class="description">
TEXT-OF-THE-SLIDE
</div>
</div>
<div class="clear"></div>
</div>
<!-- Slide # 3 Ends -->
<!-- You can add as many slides as you want above this line -->
</div>
<div id="myController">
<span class="jFlowPrev">Prev</span>
<span class="jFlowControl">1</span>
<span class="jFlowControl">2</span>
<span class="jFlowControl">3</span>
<!-- Increase these numbers as with the increase in your number of slides above -->
<span class="jFlowNext">Next</span>
</div>
<div class="clear"></div>
</div>

<script src=http://bnote.googlecode.com/files/jquery-1.2.6.min.js type=text/javascript></script>
<script src=http://bnote.googlecode.com/files/jquery.jcarousel.pack.js type=text/javascript></script>
<script src=http://bnote.googlecode.com/files/jquery-ui-personalized-1.5.2.packed.js type=text/javascript></script>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery(#mycarousel).jcarousel({
wrap:"both",
scroll:2,
animation:"slow"
});
function mycarousel_initCallback(carousel) {
jQuery(#featured-next-button).bind(click, function() {
carousel.next();
return false;
});
jQuery(#featured-prev-button).bind(click, function() {
carousel.prev();
return false;
});
jQuery(.button-nav span).bind(click, function() {
carousel.scroll(jQuery.jcarousel.intval(jQuery(this).text()));
return false;
});
};
jQuery(#feature-carousel).jcarousel({
wrap:"both",
scroll:1,
auto:10,
initCallback: mycarousel_initCallback,
buttonNextHTML: null,
buttonPrevHTML: null
});
});
</script>
<style type="text/css">
.jcarousel-skin-tango .jcarousel-container {-moz-border-radius: 10px;}
.jcarousel-skin-tango .jcarousel-container-horizontal {width: 941px;margin: 0 auto;padding:0 20px;}
.jcarousel-skin-tango .jcarousel-clip-horizontal {width: 941px;height: 254px;}
.jcarousel-skin-tango .jcarousel-item {width: 307px;height: 254px;}
.jcarousel-skin-tango .jcarousel-item-horizontal {margin-right: 10px;}
.jcarousel-skin-tango .jcarousel-item-placeholder {background: #fff;color: #000;}
.jcarousel-skin-tango .jcarousel-next-horizontal {
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKk-0WZRwIFm55deYC5DMi_kh9zbdN3FA-lueDobjFI20mQ7HaU_3Jjm2Ia43rzgMUoGzPuEw9bVTZs9FdX4QYuxy3_h6PD_yPd9hK-ouLwm6LeJ0v7MY-29DvGRc4l6MSvuW62QKI0x1y/s1600/image-slider-button.png) no-repeat scroll -46px 0;
cursor:pointer;
height:254px;
right:20px;
position:absolute;
top:0;
width:46px;
}
.jcarousel-skin-tango .jcarousel-prev-horizontal {
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKk-0WZRwIFm55deYC5DMi_kh9zbdN3FA-lueDobjFI20mQ7HaU_3Jjm2Ia43rzgMUoGzPuEw9bVTZs9FdX4QYuxy3_h6PD_yPd9hK-ouLwm6LeJ0v7MY-29DvGRc4l6MSvuW62QKI0x1y/s1600/image-slider-button.png) no-repeat scroll 0 0;
cursor:pointer;
height:254px;
left:20px;
position:absolute;
top:0;
width:46px;
}
.jcarousel-container {position: relative;}
.jcarousel-clip {z-index: 2;padding: 0;margin: 0;overflow: hidden;position: relative;}
.jcarousel-list {z-index: 1;overflow: hidden;position: relative;top: 0;left: 0;margin: 0;padding: 0;}
.jcarousel-list li,.jcarousel-item {float: left;list-style: none;width: 75px;height: 75px;}
.jcarousel-next {z-index: 3;display: none;}
.jcarousel-prev {z-index: 3;display: none;}
#news-slider{background-color:#FFFFFF;padding:20px 0;}
#news-slider img{border:none;height:254px;width:307px;}
</style>

<div id=news-slider>
<ul class=jcarousel-skin-tango id=mycarousel>
<li><a href=#><img src=http://2.bp.blogspot.com/_pZaV-NlP_3s/TFAMLk05DMI/AAAAAAAAAF0/oH_Qd-mcS_I/s1600/slide1.jpg/></a></li>
<li><a href=#><img src=http://1.bp.blogspot.com/_pZaV-NlP_3s/TFAML-hfhII/AAAAAAAAAF8/5AsriuSPkxo/s1600/slide2.jpg/></a></li>
<li><a href=#><img src=http://4.bp.blogspot.com/_pZaV-NlP_3s/TFAMMcW4kII/AAAAAAAAAGE/Eg9gpRvlMAw/s1600/slide3.jpg/></a></li>
<li><a href=#><img src=http://2.bp.blogspot.com/_pZaV-NlP_3s/TFAMMm7N3xI/AAAAAAAAAGM/Bm4RX6kvhhs/s1600/slide4.jpg/></a></li>
<li><a href=#><img src=http://3.bp.blogspot.com/_pZaV-NlP_3s/TFAMNIVEm-I/AAAAAAAAAGU/Hp5RUvKX78U/s1600/slide5.jpg/></a></li>
</ul>
</div>

<script src=http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js type=text/javascript></script>
<script type=text/javascript>
//<![CDATA[
$(document).ready(function() {
//Execute the slideShow, set 6 seconds for each images
slideShow(3000);
});
function slideShow(speed) {
//append a LI item to the UL list for displaying caption
$(ul.slideshow).append(<li id="slideshow-caption" class="caption"><div class="slideshow-caption-container"><h3></h3><p></p></div></li>);
//Set the opacity of all images to 0
$(ul.slideshow li).css({opacity: 0.0});
//Get the first image and display it (set it to full opacity)
$(ul.slideshow li:first).css({opacity: 1.0});
//Get the caption of the first image from REL attribute and display it
$(#slideshow-caption h3).html($(ul.slideshow a:first).find(img).attr(title));
$(#slideshow-caption p).html($(ul.slideshow a:first).find(img).attr(alt));
//Display the caption
$(#slideshow-caption).css({opacity: 0.7, bottom:0});
//Call the gallery function to run the slideshow
var timer = setInterval(gallery(),speed);
//pause the slideshow on mouse over
$(ul.slideshow).hover(
function () {
clearInterval(timer);
},
function () {
timer = setInterval(gallery(),speed);
}
);
}
function gallery() {
//if no IMGs have the show class, grab the first image
var current = ($(ul.slideshow li.show)? $(ul.slideshow li.show) : $(#ul.slideshow li:first));
//Get next image, if it reached the end of the slideshow, rotate it back to the first image
var next = ((current.next().length) ? ((current.next().attr(id) == slideshow-caption)? $(ul.slideshow li:first) :current.next()) : $(ul.slideshow li:first));
//Get next image caption
var title = next.find(img).attr(title);
var desc = next.find(img).attr(alt);
//Set the fade in effect for the next image, show class has higher z-index
next.css({opacity: 0.0}).addClass(show).animate({opacity: 1.0}, 1000);
//Hide the caption first, and then set and display the caption
$(#slideshow-caption).animate({bottom:-70}, 300, function () {
//Display the content
$(#slideshow-caption h3).html(title);
$(#slideshow-caption p).html(desc);
$(#slideshow-caption).animate({bottom:0}, 500);
});
//Hide the current image
current.animate({opacity: 0.0}, 1000).removeClass(show);
}
//]]>
</script>
<style type="text/css">
ul.slideshow {
list-style:none;
width:600px;
height:240px;
overflow:hidden;
position:relative;
margin:0;
padding:0;
font-family:Arial,Helvetica,Trebuchet MS,Verdana;
;
}
ul.slideshow li {
position:absolute;
left:0;
right:0;
}
ul.slideshow li.show {
z-index:500;
}
ul img {
width:600px;
height:240px;
border:none;
}
#slideshow-caption {
width:600px;
height:70px;
position:absolute;
bottom:0;
left:0;
color:#fff;
background:#000;
z-index:500;
}
#slideshow-caption .slideshow-caption-container {
padding:5px 10px;
z-index:1000;
}
#slideshow-caption h3 {
margin:0;
padding:0;
font-size:16px;
}
#slideshow-caption p {
margin:5px 0 0 0;
padding:0;
}
</style>

<ul class="slideshow">
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZOpw61JSDgehrFSC7V_Cf6UB4YywOGgz5Vh18R9_NfnVDotdIsU-Q_GgcCLsIDRi8jNZ4XQg17MA1F0RY-yL_IevTx08MyC4X-0UdT5cxcPFtMZ_OZktRRYRaNfFPoHCoT3EsfStP8lA/s1600/1.jpg" title="This is featured post 1 title" alt="Replace This Text With Your Featured Post 1 Description." /></a></li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmb12mBbrmsMCuoDad4rAoxN3dvj5WN-2RQRXipbH3mVlvSm5t-Jya0L6JIfxndHV3oTImzKL5KQi2pY_FhyenyPI0t6DDiTVVRKvCVNqvixW1G3sMPFm1GbQyXAAfrf14lZOFW6y7EC4/s1600/2.jpg" title="This is featured post 2 title" alt="Replace This Text With Your Featured Post 2 Description." /></a></li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhc3sLdJzd41psJrQ5FSZC_7be3dWDgzlLhmN0Fomm80OhMkxkbt60J23DpNOGY2qlkTlRlwkqpCY-PKgPWCvfZNEFTa5kxR1xhyzb3wPAcETYfk-0blyw4KAfOpqpuP4AXivOw-Omlp5A/s1600/3.jpg" title="This is featured post 3 title" alt="Replace This Text With Your Featured Post 3 Description." /></a></li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXTqlyDfUsXIo-GTpuTlG_5ibBdpWg9ofHPfaZeqtA_Px67FQo99jzoT8lXDT-V5CF5umocU4ANBt302P4bXhE5y154KKDI1CN8wMxgWAaq4vWoTn9WbV1ORhypP-Dhl9bcs1hu1ZNbeg/s1600/4.jpg" title="This is featured post 4 title" alt="Replace This Text With Your Featured Post 4 Description." /></a></li>
</ul>