Firstly, what is this bloggers block anyway? If you didn't know, the bloggers block is the time when YOU, as a blogger, have nothing to write. No idea, no inspiration, NOTHING! Surely some of you have been in this situation before? Here, I'll tell you my methods of overcoming it! Here they are:
1) Leave the technology.
Just leave your computer, blogging problems and other technologies. Go outside and get some fresh air (with air pollution now I don't think so, but you get what I mean) or just relax on the sofa. Clear your thoughts. Think about the interesting things that happened to you. That can be your next blog post! Or else, just relax and let the ideas run naturally in you.
2) Read other people's blogs
Take a time off from blogging and start being the reader! Some contents that you find interesting may just be your next blog topic, but improved! That way, you provide readers with better information and you can determine the topic you want to talk about easier.
3) Write about your problems.
Problems that you find hard to solve can become your next post! Surely someone out there has faced your problem and solved it before! On the other hand, you can also write about how you solved your problem! Helping other people is a great way to keep loyal readers and more traffic and information. (Ironically, I wrote this post about the bloggers block when I was facing it. I wrote about my problem, see?)
4) Look at your old posts.
It's always useful to look back at your past to get a hang on the present. Go on, have a great laugh on your stupid mistakes that you made before and correct them. Sometimes, you can even improve the post and make it a new one! You can also change the topic slightly (E.g: 'Factors that increase pollution' to 'Ways to decrease pollution').
5) Take a small handbook EVERYWHERE you go.
It's such a frustrating thing when you go somewhere and suddenly thought of an interesting topic to blog about, but nowhere to write it down. Yes, some people will think that 'It's so easy to remember, how can I forget?' or 'Bah! Who needs a handbook? I'm not getting old!'. Even so, there are chances that you will forget the topic, just like a dream. This small action of jotting down everything you want to blog about can be quite annoying, but it really helps when you need it.
Labels:
Blog Help
Strategic Advertisement Positions
Being a blogger that earns through adverts, you must learn the most STRATEGIC positions to place your adverts where most readers tend to look first! Here is a small chart I made myself to show you roughly where the strategic positions are.
The ones in black are components of your blog, the ones in orange are the adverts that can roughly catch the readers attention but the one in red is the MOST strategic position to put your adverts. Most readers tend to go straight to the content, but with a slight glance at the header and the sidebar. Thus, adverts close to both of these sections stand a change to attract a reader. But, the most important one is the one nearest to the content, especially on top of the content. Of course, don't try to drown out the main content with your adverts because that won't help you, but the opposite effect will happen. So use this simple tip today to increase your earnings!
Posted by
Wong Zhiwei
1 comments
Labels:
Blog Help
Social Websites to Publicize Your Blog
Social websites play the most important role in making your blog popular. Some of them such as Facebook, Twitter, Digg, StumbleUpon and other websites can really help you improve your blog traffic. Here, I will introduce some of them to you that will help you increase your blog's number of readers.
1) Facebook
This is the most well-known social website on the planet! Introducing your link there will enable people all around the world to see it. Thus, it is always good to start here. You can start by getting feedback from your friends and family. They are kinder and friendly to you and you should be able to understand best from their point of view. Once you get their feedbacks and edit it to satisfy them as much as you can, it's time to take it to the next level. Make a Facebook page or group about your blog if you want. Let the public judge your blog and make your blog as close to perfect as you can.
2) Twitter
Being the main website for micro-blogging, of course you should post your links there! As a reminder, please do not spam Twitter and save your karma. Doing that just makes people hate your blog. Introducing and spamming is very far apart, so don't make the mistake. You can also use automated posts that connect to your blog. When you post something new, it will automatically appear at Twitter. That way, you can save a lot of time and trouble.
3) Digg
Here, you can publish each post you wrote to the world. To attract people using this website, you must learn to use catchy titles and good descriptions. That way, people will get interested and visit your blog for the whole thing. Once you get permanent visitors that follow you, your popularity will increase and if you keep it up, you might be one of the most followed people on Digg. Work hard, because it pays off at the end. Remember to Digg the posts of others to catch their attention.
4) StumbleUpon
At first, I really didn't get how StumbleUpon works. But later on, I figured it out and started using it. All you have to do is submit your website to the StumbleUpon directory, or let your readers to it. You can do so by installing a sharebar for your blog. Remember my tutorial on how to do it (You don't? Click here!)? Once you do that, there will be over 10 million people that have a chance to StumbleUpon your blog! I know it sounds impossible that your blog will be chosen, but it has helped increase my traffic! Try it out in the beginning!
1) Facebook
This is the most well-known social website on the planet! Introducing your link there will enable people all around the world to see it. Thus, it is always good to start here. You can start by getting feedback from your friends and family. They are kinder and friendly to you and you should be able to understand best from their point of view. Once you get their feedbacks and edit it to satisfy them as much as you can, it's time to take it to the next level. Make a Facebook page or group about your blog if you want. Let the public judge your blog and make your blog as close to perfect as you can.
2) Twitter
Being the main website for micro-blogging, of course you should post your links there! As a reminder, please do not spam Twitter and save your karma. Doing that just makes people hate your blog. Introducing and spamming is very far apart, so don't make the mistake. You can also use automated posts that connect to your blog. When you post something new, it will automatically appear at Twitter. That way, you can save a lot of time and trouble.
3) Digg
Here, you can publish each post you wrote to the world. To attract people using this website, you must learn to use catchy titles and good descriptions. That way, people will get interested and visit your blog for the whole thing. Once you get permanent visitors that follow you, your popularity will increase and if you keep it up, you might be one of the most followed people on Digg. Work hard, because it pays off at the end. Remember to Digg the posts of others to catch their attention.
4) StumbleUpon
At first, I really didn't get how StumbleUpon works. But later on, I figured it out and started using it. All you have to do is submit your website to the StumbleUpon directory, or let your readers to it. You can do so by installing a sharebar for your blog. Remember my tutorial on how to do it (You don't? Click here!)? Once you do that, there will be over 10 million people that have a chance to StumbleUpon your blog! I know it sounds impossible that your blog will be chosen, but it has helped increase my traffic! Try it out in the beginning!
Posted by
Wong Zhiwei
6
comments
Labels:
Blog Help
3 Great Tips to Find the Right Blog Advertising Communities
1) Find one closer to home.
What I mean? Find a local blog advertising community. The reasons are simple: First is they use your local currency. It's better to get local currency than foreign currency and going through the trouble to convert it. Also, local blog advertising communities usually arrange blogger events for locals that you can participate. That way, you can meet other bloggers, join contests, publicize your blog and much more. Because it's local, it will be easier for you to participate in those activities. They may also provide sharing platforms where you can meet other local bloggers.
2) Get proof that they pay.
What's the point of joining a advertising community that doesn't really pay you? Get proof from friends or other bloggers that use that community to be sure that they really pay. The community's website may also have proof on that. Big companies like Google AdSense are usually trustable. Whatever you do, alway get proof that they pay first.
3) Compare pay rates.
Always get a few possible communities, then compare the rates that they pay you. It may sometimes change, but some communities are fixed. Understand their rule and regulations. Don't get overexcited when you see the quantity that they pay you in big print, because there is always a small print to it. Once you confirm the pay rates, compare them and determine the one you want. Even if some blogging communities have larger pay rates, they may be not as attentive and rarely have events. It is up to you to determine what you want as a blogger.
What I mean? Find a local blog advertising community. The reasons are simple: First is they use your local currency. It's better to get local currency than foreign currency and going through the trouble to convert it. Also, local blog advertising communities usually arrange blogger events for locals that you can participate. That way, you can meet other bloggers, join contests, publicize your blog and much more. Because it's local, it will be easier for you to participate in those activities. They may also provide sharing platforms where you can meet other local bloggers.
2) Get proof that they pay.
What's the point of joining a advertising community that doesn't really pay you? Get proof from friends or other bloggers that use that community to be sure that they really pay. The community's website may also have proof on that. Big companies like Google AdSense are usually trustable. Whatever you do, alway get proof that they pay first.
3) Compare pay rates.
Always get a few possible communities, then compare the rates that they pay you. It may sometimes change, but some communities are fixed. Understand their rule and regulations. Don't get overexcited when you see the quantity that they pay you in big print, because there is always a small print to it. Once you confirm the pay rates, compare them and determine the one you want. Even if some blogging communities have larger pay rates, they may be not as attentive and rarely have events. It is up to you to determine what you want as a blogger.
Posted by
Wong Zhiwei
2
comments
Labels:
Blog Help
Knowing the Best Free Blog Hosting Websites
One of the most basic things needed to start a blog is finding the right blog hosting website. What are these websites for? Basically, they give you a domain that is either free or you have to pay for it, then you can blog all you want with your blog. Choosing the right hosting website is important as it affects your blog's appearance, whether you can put your own ads or not, how detailed you can change your blog's setting and so on.
However, you must know the details of the famous blog hosting websites available and choose wisely when starting a blog. You must select one that fits what you need perfectly. In this post, I will introduce to you some of the FREE ones that I recommend:
1) Blogger
My blog is currently being hosted by Blogger right now. Why did I choose this? Mainly, it's because the widgets that you can add on Blogger are almost limitless! There are widgets on almost everything, and Blogger will not stop you from using widgets that come from a third-party. Even thought it does not have a wide-variety of template designs anymore, you can make your own design by learning HTML codes and stuff like that. Also, they allow you to put ads on your blog without charging you a fee, unlike WordPress.
2) WordPress
This is another strong competitor of Blogger in blog hosting. I've tried it before and what I like about it is that WordPress offers elegant blog templates that can differ in color, pattern and so on. There are also many templates to choose from, so you're bound to find one that suits you. Although there are few widgets to choose from, the limited widgets are very advanced and sophisticated that gives your blog a elegant style. Some third-party widgets are allowed. Sadly, you cannot put ads on your blog unless you buy your own domain from WordPress.
3) Tumblr
I tried Tumblr not too long ago just for fun and guess what? They actually show you 30 reasons to like them! I got all interested and started making a blog and trying out the stuff they claim they can do. First was the templates: they have a really beautiful gallery of templates. The catch? There was a price for most of the nice ones. WHY? Most of the stuff aren't free, but the free stuff ain't all bad. You can try it for starters, then move on to others.
Using these tips, find the right blog hosting website for your needs and start expanding your creativity from there! Have fun!
However, you must know the details of the famous blog hosting websites available and choose wisely when starting a blog. You must select one that fits what you need perfectly. In this post, I will introduce to you some of the FREE ones that I recommend:
1) Blogger
My blog is currently being hosted by Blogger right now. Why did I choose this? Mainly, it's because the widgets that you can add on Blogger are almost limitless! There are widgets on almost everything, and Blogger will not stop you from using widgets that come from a third-party. Even thought it does not have a wide-variety of template designs anymore, you can make your own design by learning HTML codes and stuff like that. Also, they allow you to put ads on your blog without charging you a fee, unlike WordPress.
2) WordPress
This is another strong competitor of Blogger in blog hosting. I've tried it before and what I like about it is that WordPress offers elegant blog templates that can differ in color, pattern and so on. There are also many templates to choose from, so you're bound to find one that suits you. Although there are few widgets to choose from, the limited widgets are very advanced and sophisticated that gives your blog a elegant style. Some third-party widgets are allowed. Sadly, you cannot put ads on your blog unless you buy your own domain from WordPress.
3) Tumblr
I tried Tumblr not too long ago just for fun and guess what? They actually show you 30 reasons to like them! I got all interested and started making a blog and trying out the stuff they claim they can do. First was the templates: they have a really beautiful gallery of templates. The catch? There was a price for most of the nice ones. WHY? Most of the stuff aren't free, but the free stuff ain't all bad. You can try it for starters, then move on to others.
Using these tips, find the right blog hosting website for your needs and start expanding your creativity from there! Have fun!
Posted by
Wong Zhiwei
4
comments
Labels:
Blog Help
How to Make a Floating Sharebar on the Left of Your Blog
If you want your blogger to be spread to others faster, you sometimes need the help of your visitors. Thus, putting sharebars are an easy yet useful way of letting your visitors share about a certain blog post that they enjoy. This is how you do it. First, go and add a widget for your blog, then select HTML code. Copy the following code into the content:
<style>
#sharebar {position:fixed; bottom:15%; margin-left:-71px; float:left; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#fff;padding:0 0 2px 0;z-index:10;}
#sharebar .sbutton {float:left;clear:both;margin:5px 5px 0 5px;}
.fb_share_count_top {width:48px !important;}
.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}
</style>
<div title="Get this at wissamidrissi.com">
<div id='sharebar'>
<div class='sbutton' id='fb'>
<a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
</div>
<div class='sbutton' id='rt'>
<script src="http://tweetmeme.com/i/scripts/button.js" type='text/javascript'></script>
</div>
<div class='sbutton' id='su'>
<script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script>
</div>
<div class='sbutton' id='digg'>
<script src='http://widgets.digg.com/buttons.js' type='text/javascript'></script>
<a class="DiggThisButton DiggMedium"></a>
</div>
<div class='sbutton' id='gb'>
<a class='google-buzz-button' data-button-style='normal-count' href='http://www.google.com/buzz/post' title='post on google buzz'>
<script src='http://www.google.com/buzz/api/button.js' type='text/javascript'></script>
</a>
<span style='font-size: 55%;'><a href='http://www.wissamidrissi.com/2010/09/sharebar-for-blogger-floating-left.html'>Get this</a></span>
</div>
</div>
</div>
Then, you can put it anywhere you want on your blog, but the floating sharebar will still appear on the left. This way works for most blogging platforms. Enjoy!
<style>
#sharebar {position:fixed; bottom:15%; margin-left:-71px; float:left; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#fff;padding:0 0 2px 0;z-index:10;}
#sharebar .sbutton {float:left;clear:both;margin:5px 5px 0 5px;}
.fb_share_count_top {width:48px !important;}
.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}
</style>
<div title="Get this at wissamidrissi.com">
<div id='sharebar'>
<div class='sbutton' id='fb'>
<a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
</div>
<div class='sbutton' id='rt'>
<script src="http://tweetmeme.com/i/scripts/button.js" type='text/javascript'></script>
</div>
<div class='sbutton' id='su'>
<script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script>
</div>
<div class='sbutton' id='digg'>
<script src='http://widgets.digg.com/buttons.js' type='text/javascript'></script>
<a class="DiggThisButton DiggMedium"></a>
</div>
<div class='sbutton' id='gb'>
<a class='google-buzz-button' data-button-style='normal-count' href='http://www.google.com/buzz/post' title='post on google buzz'>
<script src='http://www.google.com/buzz/api/button.js' type='text/javascript'></script>
</a>
<span style='font-size: 55%;'><a href='http://www.wissamidrissi.com/2010/09/sharebar-for-blogger-floating-left.html'>Get this</a></span>
</div>
</div>
</div>
Then, you can put it anywhere you want on your blog, but the floating sharebar will still appear on the left. This way works for most blogging platforms. Enjoy!
Posted by
Wong Zhiwei
4
comments
Labels:
Blog Help
How to make a Slideshow of Posts for Blogger
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.
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.
Posted by
Wong Zhiwei
0
comments
Labels:
Blog Help
Chat Box Wonders
The chat box is a well-known widget that casual bloggers love to put on their sidebars. On the outside, people know it as a place for anyone to chat with the admin or other visitors for fun, to trade ideas and so on. But is this all you can use it for?
Chat Box Uses:
1. Link-exchange
When I went blog-walking, I saw some blogs with chat boxes and decided to read what was in the chat box. There were some chatting topics here and there, but mostly, new visitors were leaving their links there and typing stuff like, 'I visited your blog, come visit me back." and other kinds of sentences. That way, not only the owner of the blog, but the other visitors who see your link at the chat box will click the link out of curiosity. That way, not only people can know new, active bloggers, they may even find the perfect blog to satisfy their hunger for good blog content.
2. Putting their advertisement links
As we all know, online advertising is becoming the new way to advertise a product. Websites such as YouthSays offer you different advertising campaigns, where you are paid if someone clicks your link or spends at your link. Some people use chat boxes as a place to leave their advertising links that may be misleading, or they tell you what the link is about. Actions like this are intolerable if you spam the whole chat box or mislead people to think the link is something else.
3. A place to change opinions
You might be wondering: don't people change opinions at comment boxes? Well, you cannot see all the comments at the main page of a blog as they usually only show the number of comments, and even that is small! Thus, chat boxes, which are easily seen, can be used to change opinions and talk about different topics!
So, why not start your chat box today? You can go to ShoutMix for a basic chat box. Have fun!
Chat Box Uses:
1. Link-exchange
When I went blog-walking, I saw some blogs with chat boxes and decided to read what was in the chat box. There were some chatting topics here and there, but mostly, new visitors were leaving their links there and typing stuff like, 'I visited your blog, come visit me back." and other kinds of sentences. That way, not only the owner of the blog, but the other visitors who see your link at the chat box will click the link out of curiosity. That way, not only people can know new, active bloggers, they may even find the perfect blog to satisfy their hunger for good blog content.
2. Putting their advertisement links
As we all know, online advertising is becoming the new way to advertise a product. Websites such as YouthSays offer you different advertising campaigns, where you are paid if someone clicks your link or spends at your link. Some people use chat boxes as a place to leave their advertising links that may be misleading, or they tell you what the link is about. Actions like this are intolerable if you spam the whole chat box or mislead people to think the link is something else.
3. A place to change opinions
You might be wondering: don't people change opinions at comment boxes? Well, you cannot see all the comments at the main page of a blog as they usually only show the number of comments, and even that is small! Thus, chat boxes, which are easily seen, can be used to change opinions and talk about different topics!
So, why not start your chat box today? You can go to ShoutMix for a basic chat box. Have fun!
Posted by
Wong Zhiwei
2
comments
Labels:
Blog Help
Blog Templates For You
Remember the time I posted a post about how blog templates affect your readers? (Click here to read) If you don't know how to personalize your blog yourself using HTML codes, here is a post that will help you!
BloggerTemplatesBlog is the solution for you! What they have to offer are a wide directory of blog templates for you to choose from. Also, they give you a sample of what the blog will look like after you apply the design! It's also very easy to use as you don't need any knowledge on HTML codes!
There are various designs for you to choose from! Go there now!
BloggerTemplatesBlog is the solution for you! What they have to offer are a wide directory of blog templates for you to choose from. Also, they give you a sample of what the blog will look like after you apply the design! It's also very easy to use as you don't need any knowledge on HTML codes!
There are various designs for you to choose from! Go there now!
Posted by
Wong Zhiwei
2
comments
Subscribe to:
Posts (Atom)