Newbie Featured content slider for blogger blog
Follow simple and easy step to adding this slider to 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 </head> by CTRL+F key easily.
* Copy below code and paste before </head>
<script type='text/javascript'>
//<![CDATA[
/* ------------------------------------------------------------------------
s3Slider
-------------------------------------------------------------------------- */
(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/20), function() {
faderStat = false;
current = items[currNo];
if(!mOver) {
fadeElement(false);
}
});
} else {
$(itemsSpan[currNo]).slideDown((timeOut/20), function() {
faderStat = false;
current = items[currNo];
if(!mOver) {
fadeElement(false);
}
});
}
});
}
} else {
if(!mOver) {
if($(itemsSpan[currNo]).css('bottom') == 0) {
$(itemsSpan[currNo]).slideDown((timeOut/20), function() {
$(items[currNo]).fadeOut((timeOut/20), function() {
faderStat = true;
current = items[(currNo+1)];
if(!mOver) {
fadeElement(false);
}
});
});
} else {
$(itemsSpan[currNo]).slideUp((timeOut/20), function() {
$(items[currNo]).fadeOut((timeOut/20), 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 src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>
<style type='text/css'>
/* Styles for the slideshow */
.crosscol {
background: #000;
width: 540px;
height: 280px;
padding: 0;
margin-top: 16px;
margin-bottom: 40px;
}
#s3slider {
width: 580px; /* important to be same as image width */
height: 280px; /* important to be same as image height */
position: relative; /* important */
overflow: hidden; /* important */
left: 0px;
}
#s3sliderContent {
width: 540px; /* important to be same as image width or wider */
position: absolute; /* important */
margin-left: 0; /* important */
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
#s3sliderContent {
}
}
.s3sliderImage {
float: left; /* important */
position: relative; /* important */
display: none; /* important */
list-style: none;
}
.s3sliderImage span {
position: absolute; /* important */
left: 0;
font: 12px Arial, Helvetica, sans-serif;
padding: 10px 20px 15px 20px;
width: 500px;
background-color: #000;
filter: alpha(opacity=70); /* here you can set the opacity of box with text */
-moz-opacity: 0.7; /* here you can set the opacity of box with text */
-khtml-opacity: 0.7; /* here you can set the opacity of box with text */
opacity: 0.7; /* here you can set the opacity of box with text */
color: #fff;
display: none; /* important */
bottom: 0;
/*
if you put
top: 0; -> the box with text will be shown at the top of the image
if you put
bottom: 0; -> the box with text will be shown at the bottom of the image
*/
}
.s3sliderImage strong a{
color: #FFF;
font-family: 'Helvetica', arial, sans-serif;
font-size:14px;
text-transform: uppercase;
font-weight: bold;
}
.s3sliderImage strong a:hover{
text-decoration: none;
}
.clear {
clear: both;
}
</style>
* 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 in 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.
<div class='crosscol'> <div id='s3slider'> <ul id='s3sliderContent'> <li class='s3sliderImage'> <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8aMITnwvP-9E3Rq8NEVkXK3k2aLeLp58VpGB_zax_QS76KXQOHrEajEIDQwv-8Z2rsUEcaxjmPgRUBAz_b9mJRPGAA0t8L5bGl6p8lK2f5wvGc9HPLFUZBPT_HYfmUfHYUbhfdYuLlQU/s1600/1.jpg'/> <span><strong><a href='ADD HERE POST1 URL'>ADD HERE POST1 TITLE</a></strong> <p>ADD HERE POST1 SHORT DESCRIPTION.</p> </span> </li> <li class='s3sliderImage'> <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEkZzgO09VRUkvYFzmGLn6wcP8CYPgpSdu1iJeCUg86jijL8YaqyW3ICKDVlEQ5XDsspJxKlDeO8y8fVi8GF5B9TOxG23sIetZn2qprU6RSxP_kfB8vQtRwb2yQ9XKTpdBlWnwD8C1_0Y/s1600/2.jpg'/> <span><strong><a href='ADD HERE POST2 URL'>ADD HERE POST2 TITLE</a></strong> <p>ADD HERE POST2 SHORT DESCRIPTION.</p> </span> </li> <li class='s3sliderImage'> <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqWT3zl-r51hCdr6p7pBq68-Y3fF-oZxYz5FkyYJwBjrRfSJFBiMhv679SEwFq9XgE4mor5KOBASQspD-ZOneMA79kLyIB0SYOG8eHTyMJJaQKsDtPeGb1E71m-f3ZSbdeuaLisMtpEnM/s1600/3.jpg'/> <span><strong><a href='ADD HERE POST3 URL'>ADD HERE POST3 TITLE</a></strong> <p>ADD HERE POST3 SHORT DESCRIPTION.</p> </span> </li> <li class='s3sliderImage'> <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBlUqX8Gbl5pTpbfDCzxuXxo9h81a-9IAtMmwmalnDoNvZ2dUC0ipUWA706Yysd-K_mrbDL47JYW-7NL1EpasJHAGJL14ivaPTPzKQsqYitsHZygsS9aDFcQelc7wh3Ufba3qDGvcMM0E/s1600/4.jpg'/> <span><strong><a href='ADD HERE POST4 URL'>ADD HERE POST4 TITLE</a></strong> <p>ADD HERE POST4 SHORT DESCRIPTION.</p> </span> </li> <li class='s3sliderImage'> <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQhDMz5XkqPlwY0pFkTQCZ3W0O1cOLJ3OOmzDHIsAt5uaks34QMLxjd7lK8CL-3LllMv5sXcbI9boLPhyphenhyphenjPdqmFnWJaLgHqDiaf6wAZc_J0XNDMMQlwvLO_XCIzu2-ZvTf0_RYovFzYM4/s1600/5.jpg'/> <span><strong><a href='ADD HERE POST5 URL'>ADD HERE POST5 TITLE</a></strong> <p>ADD HERE POST5 SHORT DESCRIPTION.</p> </span> </li> <div class='clear s3sliderImage'></div> </ul> </div>
NOTE:- Now 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 this element below Blog Header.and again click to save button.
* Now you are done,,, CHEERS.
|
1 Responses So Far:
Hello, i've followed all steps but the content slider doesnt work. Can I send a screen capture to show how it is looking?
Regards,
Rodrigo