Important: All scripts hosted on widcraft.googlecode.com don't work anymore because Google has blocked that SVN repository.
Featured Content Slider is one of the best way to featured some of the best content from your blog to your users.....to add this just follow the following steps.....
- Go to your blogger > Template > Edit Html
- Just above the </head> paste this script
<script src="http://widcraft.googlecode.com/svn/jquery.js" type="text/javascript">
</script>
<script type="text/javascript">
$(document).ready(function() {
//Execute the slideShow
slideShow();
});
function slideShow() {
//Set the opacity of all images to 0
$('#gallery a').css({opacity: 0.0});
//Get the first image and display it (set it to full opacity)
$('#gallery a:first').css({opacity: 1.0});
//Set the caption background to semi-transparent
$('#gallery .caption').css({opacity: 0.7});
//Resize the width of the caption according to the image width
$('#gallery .caption').css({width: $('#gallery a').find('img').css('width')});
//Get the caption of the first image from REL attribute and display it
$('#gallery .content').html($('#gallery a:first').find('img').attr('rel'))
.animate({opacity: 0.7}, 400);
//Call the gallery function to run the slideshow, 6000 = change to next image after 6 seconds
setInterval('gallery()',6000);
}
function gallery() {
//if no IMGs have the show class, grab the first image
var current = ($('#gallery a.show')? $('#gallery a.show') : $('#gallery a: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().hasClass('caption'))? $('#gallery a:first') :current.next()) : $('#gallery a:first'));
//Get next image caption
var caption = next.find('img').attr('rel');
//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 current image
current.animate({opacity: 0.0}, 1000)
.removeClass('show');
//Set the opacity to 0 and height to 1px
$('#gallery .caption').animate({opacity: 0.0}, { queue:false, duration:50 }).animate({height: '1px'}, { queue:true, duration:300 });
//Animate the caption, opacity to 0.7 and heigth to 100px, a slide up effect
$('#gallery .caption').animate({opacity: 0.7},100 ).animate({height: '100px'},500 );
//Display the content
$('#gallery .content').html(caption);
}
</script>
- Now Save and after saving close that edit html window and click on Customise/Customize
- Click On Advance > Add CSS and paste the script from below
.clear{clear:both}
#gallery{position:relative;width:500px;height:400px}
#gallery a{float:left;position:absolute;}
#gallery a img{border:none;}
#gallery a.show{z-index:500}
#gallery .caption{z-index:600;background-color:#000;color:#ffffff;height:100px;width:100%;position:absolute;bottom:0;}
#gallery .caption .content{margin:5px}
#gallery .caption .content h3{margin:0;padding:0;color:#1DCCEF;}
- Click on Apply To Blog
- Now paste the script from below to where you want to add this widget example in template/posts/pages/gadget
<div id="gallery">
<a href="#" class="show">
<img src="IMAGE_URL" alt="Flowing Rock" width="580" height="360" title="" alt="" rel="<h3>TITLE 1</h3>Description 1 "/>
</a>
<a href="#">
<img src="IMAGE_URL" alt="Grass Blades" width="580" height="360" title="" alt="" rel="<h3>TITLE 2</h3>Description 2 "/>
</a>
<a href="#">
<img src="IMAGE_URL" alt="Ladybug" width="580" height="360" title="" alt="" rel="<h3>TITLE 3 3</h3>Description 3"/>
</a>
<a href="#">
<img src="IMAGE_URL" alt="Lightning" width="580" height="360" title="" alt="" rel="<h3>TITLE 4</h3>Description 4"/>
</a>
<div class="caption">
<div class="content">
</div>
</div>
<div style="clear: both;">
</div>
</div>
- Change IMAGE_URL with the url of your image and # with your post/page url and TITLE and Description with your content title and description and you're done :D
Important: Check our new website TricksPanda.com for WordPress tutorials, plugins and more.
