Cool Featured content slider for blogger blog
Follow simple and easy step to adding this special 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.
* Copy below code and paste before </head>
<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>
* 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 id="s3slider"> <ul id="s3sliderContent"> <li class="s3sliderImage"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKcMQGPoLo4NdwRFm9xrUPwSYdAZd835EoAbEXkVZRmuJvGjjl1YFSJvUoXELuM2NrekMiv0wFcMoIreHoDQC8cgltjB4yW3uXj-vB01_aYLeogdlogIwrdx6KJdaSJXxndsIIb3ntIqSF/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/AVvXsEi5W6TA-tNHxHEYgWxC9IPdi1qLQ-QCJzDKZ7qBaMopxzL7oEt8Kz9SgGAuDrm8E7lpgyZdTyznN-XljpTHFV3RSOzooNzOR1jX63ILGAEEIMpjoQnMzypjYiqWW86PB4J7h4Xwothar1lR/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/AVvXsEhPkmlgypQTfVxiTIQ51HqMTIxM2EgovrvLQo_1L28YMxEUlSoEAF-bYiylngnR8FkNwZ67hSXULnWRkyR0WO7wodxXmRXjoKD3yJ9YwmSnbk9zxQNEelUj5CtAOo_-xYnI9KgIiZRr_X12/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> <div class="clear s3sliderImage"></div> </ul> </div>
NOTE:- Remove Highlighted text from above code with your own ok.
* Now click to save your blogger Template and after saving this element Drag and drop below your blog title and click to save button and now you are done ... CHEERS.
|
0 Responses So Far: