Special Featured content Slider for blogger / Style2 ! 0

Featured content Slider for blogger blog--->>>

Follow simple and easy step to adding this slider in your blog --->>>>

* First go to your blogger Dashboard.

* Now click in Design tab and edit HTML.

* Click in small box to expand your blogger Template.

* Now find this code ]]</b:skin> by CTRL+F key easily.

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

/* Styles for the slideshow */
ul.slideshow {border: 5px solid #555;
list-style:none;
width:600px;
height:280px;
overflow:hidden;
position:relative;
margin:0;
padding:0;
}
ul.slideshow li {
position:absolute;
left:0;
right:0;
}
ul.slideshow li.show {
z-index:500;
}
ul img {
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:20px;
}
#slideshow-caption p {
margin:5px 0 0 0;
padding:0;
font-size: 12px;
}

* Now again find this code </head> by CTRL+F key.

* Copy below code and paste before </head>

<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>

* Now click to save your blogger Template.

* Again go to your blogger Dashboard and click in design tab .

* Now you are here --->> Page element.

* Click in add gadget which is your blog sidebar.

* When open new window click in HTML/javascript from list.

* When open new blank box copy below code and paste in blank box.

<ul class='slideshow'>
<li><a href='YOUR POST1 URL HERE'><img alt='Enter here short description' height='280' src='http://tourcuatoi.com/uploads/Travel/1301391121.jpg' title='ADD HERE POST1 TITLE' width='600'/></a></li>
<li><a href='YOUR POST2 URL HERE'><img alt='Enter here short description' height='280' src='http://www.smiletravelvietnam.com/images/news/Ha-Noi-tourist-week-384.jpg' title='ADD HERE POST2 TITLE' width='600'/></a></li>
<li><a href='YOUR POST3 URL HERE'><img alt='Enter here short description' height='280' src='http://www.thanglonggroup.com.vn/Uploads/thanglonggroup.hoptac.net/cong%20trinh/cautrang%20tien.jpg' title='ADD HERE POST3 TITLE' width='600'/></a></li>
</ul>

Note:- Remove Highlighted text from above code with your own ok.

* Now click to save your HTML/javascript and after saving this element drag and drop below your blog header. and again click to save button.

* And now you are done. CHEERS

blogger tutorials Social Bookmarking Blogger Widget

I'm reading: Special Featured content Slider for blogger / Style2 ! ~