How to Install a Slide Show Image Under Blog Header
By Unknown - Friday, September 7, 2012
Immediately,
- Please follow the steps below:
- Login first in blogger.
- Sign in to Design >> Edit HTML.
- Do not forget to click on Expand Widget Templates because it will make you dizzy with long code.
- Copy and paste the following code above the code ]]></b:skin>
- /* SLIDESHOW */
- #slider-holder{width:660px;height:200px;overflow:hidden;margin-left:-20px; margin-right:10px; padding:0} #s3slider{width:660px;height:660px;position:relative;overflow:hidden}
- #s3sliderContent{width:660px;position:absolute;top:0;margin-left:0}
- .s3sliderImage{float:left;position:relative;display:none}
- .s3sliderImage span{position:absolute;left:0;font-weight:700;font-size:12px;color:#fff;height:45px;width:660px;background-color:#4e4d3c;filter:alpha(opacity=70);-moz-opacity:0.7;-khtml-opacity:0.7;opacity:0.7;display:none;bottom:0;padding:10px}
- .s3sliderImage span a.featured-title:link,.s3sliderImage span a.featured-title:visited{color:#FFF;font-size:14px;padding:0 0 2px}
- .s3sliderImage span a.featured-title:hover{color:#999}
- .s3sliderImage span a:link,.s3sliderImage span a:visited{color:#888}
- .s3sliderImage span a:hover{color:#555}
- Then copy and paste the following code above the code </head>
- After that prepare the image and the url will be displayed in the slideshow menu, if there is already an image and its url, please copy and paste the following code after the code <div id='main-wrapper'>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js' type='text/javascript'/>
<script type='text/javascript'>
<!--//--><![CDATA[//><!--
(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>
<script type='text/javascript'>
<!--//--><![CDATA[//><!--
(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>
<div id='slider-holder'>
<div id='s3slider'>
<ul id='s3sliderContent'>
<li class='s3sliderImage' style='display: list-item;'>
<a href='LETAK LINK DISINI 1'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_D36JlLRUWYiF-7wqBErhj8WDw8lNhCmduQ5qZZQbcgJ5pe4ZXFEIxhPjUvvSqsNs6zyLV92mA8qT4GWQ5GSagIHOT2KqIZMBL5dPsABVE44n1t06xghd4T1gb1lmTRjg8aGfX1NQyQU/s1600/NorahJones.jpg' style='width: 660px; height: 200px;'/></a>
<span style='display: block;'>
<a class='featured-title block' href=' 1 POSITION LINK HERE '>THIS IMAGE Norah Jones</a><br/>
Norah Jones is a jazz musician who has been getting a lot of Grammy Award
</span>
</li>
<li class='s3sliderImage' style='display: none;'>
<a href='LAY HERE LINK 2><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggyKAkOGzWEkjHyEB4OotC3sSHCVs0jXzMOewAgH7l2R4Z6UkZag0uQVJPIT7Zzb0MUFe2HRJSyWXGlXwGaFQrH77_FpA0J4HUJgjBFLcVbKm5mdNnpSmNfJV3wa6gDI0uJOun8X9QkLI/s1600/174456_1_f.jpg' style='width: 660px; height: 200px;'/></a>
<span style='display: none;'>
<a class='featured-title block' href='LAY HERE LINK 2'>FOURPLAY</a><br/>
No need to already have an inscription above described
</span>
</li>
<li class='s3sliderImage' style='display: none;'>
<a href=' LAY HERE LINK 3 '><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRZDcxtjlLfpoSREfNU8BMAcc21HOKXO_iHVdE8Z3KTQUarifdwWkgneswbGs2HJlbeDsQb8u3i2_P3jIaoxXJoh9rlQMse1UrSUlsXF8oHgoCMVmuBFRKM_YW_FVqq-A6YLHUwbgue7o/s1600/andien.jpg' style='width: 660px; height: 200px;'/></a>
<span style='display: none;'>
<a class='featured-title block' href=' LAY HERE LINK 3 '>MBAK ANDIEN</a><br/>
This is the guy who ..............
</span>
</li>
<li class='s3sliderImage' style='display: none;'>
<a href=' LAY HERE LINK 4 '><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-bjuyd8P-h4B5L12rKuwj7_UMZh7GcA1HWMxKUhRPDm9W-BXNepa9S6Iy8J9Qw58ImiGfzomfZiGFDxh7mBFJCjtnk_9gQre2vNSo3r9ixNo1jFchxT9enxcukRTL5gDkV7Y2onsh4w0/s1600/Alanis-Morissette-2.JPG' style='width: 660px; height: 200px;'/></a>
<span style='display: none;'>
<a class='featured-title block' href=' LAY HERE LINK 4 '>ALANIS MORISSETTE</a><br/>
Still looks good, but the song all my friends have to listen
</span>
</li>
<li class='s3sliderImage' style='display: none;'>
<a href=' LAY HERE LINK 5 '><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_44qkUedSAHOEB0FYiJXgZcp9QdmehJVQs3NNdEKw7N1Pkug4b0kbVZuC1Vo3mAuWWvPgFYCgwxZAqQO0IG64fzEz4eLQ-rwiHZA-DytTYXewAHyHXyeDTuPxn8OQ4MfvIU1E7EMf-co/s1600/Anne-Hathaway-02.jpg' style='width: 660px; height: 200px;'/></a>
<span style='display: none;'>
<a class='featured-title block' href=' LAY HERE LINK 5 '>Beauty</a><br/>
Anyone try drawing a girl on? Love the answer in the comment box ya ....
</span>
</li>
<li class='clear s3sliderImage'/>
</ul>
</div>
</div>
<div id='s3slider'>
<ul id='s3sliderContent'>
<li class='s3sliderImage' style='display: list-item;'>
<a href='LETAK LINK DISINI 1'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_D36JlLRUWYiF-7wqBErhj8WDw8lNhCmduQ5qZZQbcgJ5pe4ZXFEIxhPjUvvSqsNs6zyLV92mA8qT4GWQ5GSagIHOT2KqIZMBL5dPsABVE44n1t06xghd4T1gb1lmTRjg8aGfX1NQyQU/s1600/NorahJones.jpg' style='width: 660px; height: 200px;'/></a>
<span style='display: block;'>
<a class='featured-title block' href=' 1 POSITION LINK HERE '>THIS IMAGE Norah Jones</a><br/>
Norah Jones is a jazz musician who has been getting a lot of Grammy Award
</span>
</li>
<li class='s3sliderImage' style='display: none;'>
<a href='LAY HERE LINK 2><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggyKAkOGzWEkjHyEB4OotC3sSHCVs0jXzMOewAgH7l2R4Z6UkZag0uQVJPIT7Zzb0MUFe2HRJSyWXGlXwGaFQrH77_FpA0J4HUJgjBFLcVbKm5mdNnpSmNfJV3wa6gDI0uJOun8X9QkLI/s1600/174456_1_f.jpg' style='width: 660px; height: 200px;'/></a>
<span style='display: none;'>
<a class='featured-title block' href='LAY HERE LINK 2'>FOURPLAY</a><br/>
No need to already have an inscription above described
</span>
</li>
<li class='s3sliderImage' style='display: none;'>
<a href=' LAY HERE LINK 3 '><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRZDcxtjlLfpoSREfNU8BMAcc21HOKXO_iHVdE8Z3KTQUarifdwWkgneswbGs2HJlbeDsQb8u3i2_P3jIaoxXJoh9rlQMse1UrSUlsXF8oHgoCMVmuBFRKM_YW_FVqq-A6YLHUwbgue7o/s1600/andien.jpg' style='width: 660px; height: 200px;'/></a>
<span style='display: none;'>
<a class='featured-title block' href=' LAY HERE LINK 3 '>MBAK ANDIEN</a><br/>
This is the guy who ..............
</span>
</li>
<li class='s3sliderImage' style='display: none;'>
<a href=' LAY HERE LINK 4 '><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-bjuyd8P-h4B5L12rKuwj7_UMZh7GcA1HWMxKUhRPDm9W-BXNepa9S6Iy8J9Qw58ImiGfzomfZiGFDxh7mBFJCjtnk_9gQre2vNSo3r9ixNo1jFchxT9enxcukRTL5gDkV7Y2onsh4w0/s1600/Alanis-Morissette-2.JPG' style='width: 660px; height: 200px;'/></a>
<span style='display: none;'>
<a class='featured-title block' href=' LAY HERE LINK 4 '>ALANIS MORISSETTE</a><br/>
Still looks good, but the song all my friends have to listen
</span>
</li>
<li class='s3sliderImage' style='display: none;'>
<a href=' LAY HERE LINK 5 '><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_44qkUedSAHOEB0FYiJXgZcp9QdmehJVQs3NNdEKw7N1Pkug4b0kbVZuC1Vo3mAuWWvPgFYCgwxZAqQO0IG64fzEz4eLQ-rwiHZA-DytTYXewAHyHXyeDTuPxn8OQ4MfvIU1E7EMf-co/s1600/Anne-Hathaway-02.jpg' style='width: 660px; height: 200px;'/></a>
<span style='display: none;'>
<a class='featured-title block' href=' LAY HERE LINK 5 '>Beauty</a><br/>
Anyone try drawing a girl on? Love the answer in the comment box ya ....
</span>
</li>
<li class='clear s3sliderImage'/>
</ul>
</div>
</div>
Note :
- Note the width of 660px, please adjust it to the width of your post template.
- Note also the number-20px on the css code, I use margin-left:-20px adjust because the demo template that I use.
- Replace the red writing with a description of your image.
- Code blue is the url code for the image that you have uploaded previously.
Follow our blog on Twitter, become a fan on Facebook. Stay updated via RSS
Very useful information to install the slide show image in blogger header place.I am going to implement this information to my blog.
Web Design Company Bangalore | Web Development Company Bangalore
This really useful in blog thanks for sharing Web Development Company Bangalore | Web Design Companies Bangalore|Bangalore Web Services