Actually slide show helps to show main ideas
of our blog. If we are doing some service via
blog. we can add images with description
which according to our service.So adding
slide show getting more eye contact.So,
there have more advantage of adding it.you
can check my earlier slideshow.How Add
Cool Jquery Slide Show For Blogger
Follow these simple steps to add it to your
blog. check below link for demo.
DEMO
1. Log in to your blogger account and Go to Design >> Edit HTML
2. Find this tag by using Ctrl+F </head>
3. Paste below code before </head> tag
6. Find this code by using Ctrl+F <div id="main-wrapper">
7. Paste below code before <div id="main-wrapper"> code
* Replace Post Title with your title
* Replace DESCRIPTION with your short description.
* You can change the images by changing links.
9. Now save your template
You are done.
of our blog. If we are doing some service via
blog. we can add images with description
which according to our service.So adding
slide show getting more eye contact.So,
there have more advantage of adding it.you
can check my earlier slideshow.How Add
Cool Jquery Slide Show For Blogger
Follow these simple steps to add it to your
blog. check below link for demo.
DEMO
1. Log in to your blogger account and Go to Design >> Edit HTML
2. Find this tag by using Ctrl+F </head>
3. Paste below code before </head> tag
<style type='text/css'>
#s3slider {
background: none repeat scroll 0 0 #FFFFFF;
border: 4px solid #149CD5;
height: 280px;
margin-bottom: 25px;
margin-top: 0;
overflow: hidden;
position: relative;
text-shadow: 0 1px 0 #000000;
width: 585px;
}
#s3sliderContent {
background: none repeat scroll 0 0 #FFFFFF;
height: 300px;
list-style: none outside none;
margin-left: 0;
overflow: hidden;
padding: 0;
position: absolute;
top: -14px;
width: 585px;
}
.s3sliderImage {
float: left;
position: relative;
width: 585px;
}
.s3sliderImage span {
background-color: #000000;
color: #FFFFFF;
display: none;
font-size: 12px;
height: 300px;
line-height: 16px;
opacity: 0.7;
overflow: hidden;
padding: 10px 13px;
position: absolute;
right: 0;
top: 0;
width: 180px;
}
.s3sliderImage strong a {
font-family: 'Myriad Pro',Helvetica,Arial,Sans-Serif;
font-size: 20px;
}
.s3sliderImage strong a:hover {
color: #FFFFFF;
}
</style>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
/* ------------------------------------------------------------------------
s3Slider
Developped By: Boban Karišik -> http://www.serie3.info/
CSS Help: Mészáros Róbert -> http://www.perspectived.com/
Version: 1.0
Copyright: Feel free to redistribute the script/modify it, as
long as you leave my infos at the top.
-------------------------------------------------------------------------- */
(function($){
$.fn.s3Slider = function(vars) {
var element = this;
var timeOut = (vars.timeOut != undefined) ? vars.timeOut : 4000;
var current = null;
var timeOutFn = null;
var faderStat = true;
var mOver = false;
var items = $("#" + element[0].id + "Content ." + element[0].id + "Image");
var itemsSpan = $("#" + element[0].id + "Content ." + element[0].id + "Image span");
items.each(function(i) {
$(items[i]).mouseover(function() {
mOver = true;
});
$(items[i]).mouseout(function() {
mOver = false;
fadeElement(true);
});
});
var fadeElement = function(isMouseOut) {
var thisTimeOut = (isMouseOut) ? (timeOut/2) : timeOut;
thisTimeOut = (faderStat) ? 10 : thisTimeOut;
if(items.length > 0) {
timeOutFn = setTimeout(makeSlider, thisTimeOut);
} else {
console.log("Poof..");
}
}
var makeSlider = function() {
current = (current != null) ? current : items[(items.length-1)];
var currNo = jQuery.inArray(current, items) + 1
currNo = (currNo == items.length) ? 0 : (currNo - 1);
var newMargin = $(element).width() * currNo;
if(faderStat == true) {
if(!mOver) {
$(items[currNo]).fadeIn((timeOut/6), function() {
if($(itemsSpan[currNo]).css('bottom') == 0) {
$(itemsSpan[currNo]).slideUp((timeOut/6), function() {
faderStat = false;
current = items[currNo];
if(!mOver) {
fadeElement(false);
}
});
} else {
$(itemsSpan[currNo]).slideDown((timeOut/6), function() {
faderStat = false;
current = items[currNo];
if(!mOver) {
fadeElement(false);
}
});
}
});
}
} else {
if(!mOver) {
if($(itemsSpan[currNo]).css('bottom') == 0) {
$(itemsSpan[currNo]).slideDown((timeOut/6), function() {
$(items[currNo]).fadeOut((timeOut/6), function() {
faderStat = true;
current = items[(currNo+1)];
if(!mOver) {
fadeElement(false);
}
});
});
} else {
$(itemsSpan[currNo]).slideUp((timeOut/6), function() {
$(items[currNo]).fadeOut((timeOut/6), function() {
faderStat = true;
current = items[(currNo+1)];
if(!mOver) {
fadeElement(false);
}
});
});
}
}
}
}
makeSlider();
};
})(jQuery);
//]]>
</script>
<script type='text/javascript'>
$(document).ready(function() {
$('#s3slider').s3Slider({
timeOut: 4000
});
});
</script>
6. Find this code by using Ctrl+F <div id="main-wrapper">
7. Paste below code before <div id="main-wrapper"> code
<div id="s3slider"> <ul id="s3sliderContent"> <li class="s3sliderImage"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhy86bYeKHddIbsMLt_dUCqYJvTAW6w-akK-3nH9Mp3h75yYWpkC2WovZ0hOtJrRAmNb05xRPNTybRnuXnvNTiTIAXGwKzM7Z1PJvpHWJGOWMkTy38WK-ZaenlfTPn3isUbyvZATeZ348o/s1600/image1.jpg" /> <span><strong><a href="ADD HERE POST1 URL">POST TITLE</a></strong> <p>DESCRIPTION</p> </span> </li> <li class="s3sliderImage"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoCXE-yK3djceXqsoUoxUbaGuDhOMusvpDZ1Hw1juBUG7yvvyXbO8sjair3ECt7y6mSvfZEKqtev0xTOrRV88-1jLdHuWb1NF-Ux6LEQ4Tz5MFYlduR5wGCAuTna483LHqnzqJ4URUYp0/s1600/image2.jpg" /> <span><strong><a href="ADD HERE POST2 URL">POST TITLE</a></strong> <p>DESCRIPTION</p> </span> </li> <li class="s3sliderImage"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiL52zevrtFsWZXcPpcvSvLZy15rJ2S02bRHbV9dmbwR17cIllwvsNhzFtLoOHIT5sqYzB4KraHXD6e1r-gDP5-HAqERiRyg0wCS5NZgyaRL93uu1TbOagYa58b_rE5BBVrGMPM_gT6wNQ/s1600/image5.jpg" /> <span><strong><a href="ADD HERE POST2 URL">POST TITLE</a></strong> <p>DESCRIPTION</p> </span> </li> <li class="s3sliderImage"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgweVQxE2VjS9IfRjAqGIkj_CassxsmqlLJn7F3Nsde5_9xr8UrcpZOAj97X08V7Fj5uL8c3AVvQSSBYa4T_2j2Au2tfkaqmA655VzBfA1iwcLrnNn1nJTybmXyJQ8n17V2VB-_Bj30IEY/s1600/image6.png" /> <span><strong><a href="ADD HERE POST2 URL">POST TITLE</a></strong> <p>DESCRIPTION</p> </span> </li> <div class="clear s3sliderImage"></div> </ul> </div>
* Replace Post Title with your title
* Replace DESCRIPTION with your short description.
* You can change the images by changing links.
9. Now save your template
You are done.
it's great, I must try on my blog
ReplyDelete