An important thing that you must try to do when blogging is making sure your readers become permanent. In other words, you must let your readers know about other interesting posts or hot topics on your blog so that they keep reading different posts. At the end of the day, they like your blog and subscribe to it or become a loyal reader.
One of the ways that can help you achieve this is a slideshow of posts. Readers will be introduced to other great posts that you like, or that most people viewed! The height and width is adjustable to fit either in the sidebar or below the header. By following these steps, you will get something like the one I have on top of my blog.
1) Go to Dashboard -> Design -> Edit HTML. Then, tick the 'Expand Widget Templates' box.
2) Press Ctrl+F together on the keyboard to show the search box. It should look like this:
Then, type into the box and click enter.
3) Copy this code and paste it before the tag:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
/* ------------------------------------------------------------------------
s3Slider
Developped By: Boban Kari%u0161ik -> 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>
<style type='text/css'>
#s3slider {
background:#000000;
border:1px solid #818e8f;
width: 550px;
height: 200px;
position: relative;
overflow: hidden;
}
#s3sliderContent {
width: 550px;
position: absolute;
top:-14px;
padding: 0px;
margin-left: 0;
}
.s3sliderImage {
float: left;
position: relative;
display: none;
}
.s3sliderImage span {
position: absolute;
left: 0;
font: 20px Trebuchet MS, sans-serif;
padding: 10px 0px;
width: 550px;
background-color: #000;
filter: alpha(opacity=80);
-moz-opacity: 0.8;
-khtml-opacity: 0.8;
opacity: 0.8;
color: #fff;
display: none;
bottom: 0;
text-align:center;
}
.clear {
clear: both;
}
</style>
By now, you should notice that some of the codes are highlighted in red. Well, those are variables that can change the height and width of certain things in the slideshow. Let me explain them one by one:
timeOut - This is the time until the slideshow switches to the next slide. I don't know what unit they use to count it, but I recommend the number to be change from 4000 to 3000. In my opinion, this time is enough for readers to see what is in the slideshow.
For the paragraph with #s3slider { as the beginning, the 2 variables are Height and Width. By changing the numbers of these 2 variables, you are changing the whole frame of the slideshow. You can try again and again to get the results you want.
For the paragraph that begins with #s3sliderContent { , the variable is the Width. By changing the number of this variable, you are changing the width of the slideshow that shows your image and the text below it.
The next paragraph is the one that begins with .s3sliderImage span {. The variable that you can change is the width, which changes the width of the small bar below your slideshow image that shows the title or description of the post.
Note: you cannot see the changes you made until you finish the next step:
4) Open Page Elements in a new tab. Then, click on 'add a gadget', select HTML/Java Script and add the following codes into the content:
<div id="s3slider">
<ul id="s3sliderContent">
<li class="s3sliderImage">
<a href="YOUR-BLOG-POST-LINK-HERE"><img style="width:900px;height:300px;" src="YOUR-IMAGE-URL" />
<span>YOUR-POST-TITLE</span></a>
</li>
<li class="s3sliderImage">
<a href="YOUR-BLOG-POST-LINK"><img style="width:900px;height:300px;" src="YOUR-IMAGE-URL" />
<span>YOUR-POST-TITLE</span></a>
</li>
<li class="s3sliderImage">
<a href="YOUR-BLOG-POST-LINK-HERE"><img style="width:880px;height:300px;" src="YOUR-IMAGE-URL" />
<span>YOUR-POST-TITLE</span></a>
</li>
</ul>
</div>
<div class='clear'></div>
The variables highlighted in red are meant to be changed to your own links, image url, titles and sizes. Once you add this, you can change the variables from this widget and the one in the HTML code. Have fun!!
Have a question? Comment and I will help you solve it.
Subscribe to:
Posts (Atom)
