DOWNLOAD

Get our toolbar!

Monday 23 May 2011

Change Blogger Header background color


To change the background color of the Header, first determine what color you would like to have. You may look at the HTML Color Chart for the colors you can experiment with. For example, if you have decided on a color code #B38481, go to Template and click “Edit HTML”. Scroll to the part where you see this:-


#header-wrapper {

width:660px;

margin:0 auto 10px;

border:1px solid $bordercolor;


Add right after this an extra line:-

background:#B38481;


Save the template and refresh your Blog site. You may have to change the Header and description font colors. Simply go back to the “Fonts and Colors” tab, and change them accordingly.

Background Image for Blogger Header

Note that in different templates, instead of #header-wrapper, you may see #header-wrap or #header or #head. Try to insert the color code and preview the change. If there is a background color, you've probably got it right.

You may also read the related article to have a Background Image for Blogger Header.

Blog Traffic Exchange and AdSense


After doing up nice websites with interesting contents, the webmasters' dilemma is usually one of attracting visitors to their sites. Having more visitors is gratifying; it is a reward that website owners deserve for putting time and effort into their sites.


Traffic exchange networks were designed to promote visitor traffic to websites or blogs. The idea is simple – members of the network surf each other's sites. Upon setting up an account with a traffic exchange program, you will be entitled to earn 'credits' by manually surfing other members' sites. Depending on the program, you may have anything between 0.5 to 1.0 credit for every site you visit. There is a timer at the top or bottom frame of the page to compel you to remain at the site for a period of time. This can range between 10 to 30 seconds. You are then required to click one of the images to correspond with the given image in order to proceed to the next random site. This is to prevent autosurfing hacks that may cheat the system.

With the 'credits' you earn, you can assign them to your blogs. For every visitor you get to your blog, 1 credit will be deducted until all your 'credits' are spent. In a nutshell, the more blogs you visit, the more visitors you get to your blogs.

Alas, no program is perfect. While the concept of traffic exchange sounds good, there are the negative aspects that you should consider as well. I'll summarize the good and bad points of traffic exchange.

Pros of traffic exchange

1. The programs are free, that is if you are not buying the 'credits' but earning them.

2. For some programs, you can specify the category of blogs you would like to view or the sort of visitors you would like to have. The traffic is therefore targeted.

3. While viewing other member blogs, you may come across a couple of interesting ones that you can re-visit or learn from.

4. Since the programs work well only if they have a wide network of members, the administrators often conduct mini contests and games to interest the members. You may find some fun in these communities.

Cons of traffic exchange

1. The biggest negative point is that such traffic exchanges run counter to many advertising programs, especially those that pay you based on impressions you get to your site. A notable one is Google AdSense. If your site's traffic is mainly through traffic exchanges, be prepared to receive reminders like this from the Google administrator:-

It has come to our attention that invalid clicks or impressions have been generated on the Google ads on your site(s) through users of third-party programs paid or provided with other incentives to visit your site. Such programs may include, but are not limited to auto-surf, pay-to-surf, pay-to-read, or pay-to-click sites.

2. A number of the sites that register with traffic exchanges are new sites and are not worth the time reading. Many of the established ones that have a good following of readers do not need such traffic exchange programs to boost their traffic.

3. After surfing for a while, you would also find yourself looking at the same sites over and over again, simply because only a fraction of the members are active users. It may be boring in that sense.

4. While I make it a point to read some sites, I believe that many people don't. They may be doing their homework or watching television, and mindlessly clicking the image after every 30 seconds or so. You may be getting more visitors but these are not the people who appreciate your blog contents.

Blog Traffic Exchange sites

If you want to have a go at it, here are the ones I think you can consider.

Blogmad Blogmad

This has a 1:1 ratio, which means that for every site you visit, someone will visit yours. The surf timer is 25 seconds and the site layout, ideas, and image icons (with the two big eyes) are pretty nice.

Blog Explosion Blog Explosion

The surf ratio is 2:1, i.e. for every two blogs you visit, one person will visit yours. The saving grace is that they have about close to 50,000 blogs registered, although I have an inkling that only a small percentage of these are active. They do run contests like Battle of the Blogs which add to the fun of using their service.

Blog Soldiers Blog Soldiers

Another 2:1 ratio traffic exchange. Nothing fanciful about the site, and the administrators should do more work to build up their membership base.

Blog Advance Blog Advance

Their surf ratio of 1:1 sounds attractive, and like a few other programs, they throw in free bonus points when you log in or surf. What I didn't like was their lack of response. I raised a technical problem concerning adding a site and despite 2 messages, they have not replied. Such a contradiction to their statement that “at Blog Advance your voice doesn't fall on deaf ears.” Also, I received error messages on a few occasions despite having clicked the correct surfbar images and was unable to proceed to subsequent blogs. I guess there are unresolved bugs in the coding of their program. (Update: This service is no longer available and link is therefore removed.)

EasyHits4U 

This is another 1:1 traffic exchange site that seems to have more commercial sites registered with them than blogs. It has a 30-second timer giving viewers a lot of time to view the blogs. The thing that stands out is that they pay you cash for active surfing ($0.50 for 1000 sites viewed)

TrafficG Traffic G

This is not blog specific, and you will see a number of non-blog websites. The ratio of 1:1 is good, and the longer surf time of 30 seconds means that you might get more quality traffic, people who browse your blog contents.

Blogazoo Blogazoo

They have a 4:3 ratio, and credit incentives to read blogs and find the 'gazoos'.(Update: This service is temporarily not available and link is removed.)

Linkreferral Linkreferral

I happened to come across this site last week. Essentially, when you registeryour blog with them, other members can review your site, give a rating and post comments. The more sites you visit or review, the higher your blog rank will be, and the more likely that your blog will be seen by others. Unlike the other programs, you will expect visitors to go through what you write in order to review your blog.

Conclusion

If your blog is new, traffic exchange may do wonders in sending visitors to your site. Surfing other members' sites is also a good way to learn useful tips to improve on your blog. For a wider exposure, you would want to have your blog listed in Blog DirectoriesFeed Directories, and search engines like Google,YahooMSN and Ask.com. Also, submit your Blog to the various Search Engines. Nothing beats content though, and if you have good quality writing, you can be sure that your blog will be read.

I have tried out the traffic exchange sites for the purpose of this writing. With the credits, I have bought banner and text link ads since advertising a blog is not against Google's TOS. These ads appear at the traffic exchange sites when members are surfing, and make your site more visible.

Feel free to share your experience on the above sites, but please refrain from posting suggestions of new traffic exchange sites. There are hundreds of them and if you'd like, do a keyword search and try them out. New traffic exchange sites are created practically everyday. Run an eBay search and you will see a number of them being sold too. It is alright to register with a few of them, but unless you intend to spend all your time surfing member sites, there is little reason to be registered in a hundred traffic exchange sites.

If you are ready to submit your blog to blog directories for better search engine optimization and publicity, read the articles on “Submit Blog to Blog Directories”Part (I)Part (II), and Part (III).

While you are looking at traffic exchange sites, you may also want to consider earning money while you are surfing the net. AGLOCO seems to have a nice scheme for you which you may want to take a look. You may also want to consider having AuctionAds to display an eBay auction widget which is compatible with AdSense and other ad systems. No harm trying it since it might give you an extra income.

Further Reading

Feel free to read Google AdSense's official stand on traffic exchange programs at their post "A note on traffic exchange programs".

Uploading animated .gif image to Blogger post

I tested uploading animated .gif image to Blogger post atTesting uploading animated .gif image to Blogger.

Conclusion of the test is, if you upload the animated image direct via the Blogger photo upload icon Google Blogger photo upload icon, the image will no longer be animated as you can see from the first image which was uploaded via the via the Blogger photo upload icon Google Blogger photo upload icon in the toolbar of the Blogger post editor.

If you want the image to remain animated, you must first host the animated .gif image with the free Photobucket image hostand use HTML to display the animated image. Here is a screenshot of the animated .gif image uploaded to Photobucket(click on screenshot to enlarge):

Update: According to error7zero, "you can uploaded your (animated gif) files to Google Sites. Apparently, it is also easier to track.

animated gif image uploaded to Photobucket

IMPORTANT NOTE: In the screenshot above, I have highlighted the third tag wrongly. You can use it directly, but the image will link to Photobucket homepage, and not to your image or any other sites you want the image to link to. Further, the alt="some description" attribute describe Photobucket". It is the second tag (URL) that you should use for use in your profile, typing your own <img src="image URL" alt="" /> to display the image or to use the image as a hyperlink to another site, eg, your book you are trying to sell on Amazon, etc. However, if you are not familiar with using the <img> tag to display images, the third tag (highlighted) you can just copy and paste into your Blogger post editor window to display the image, and if you wish, edit the target URL to link to any site of your choice and edit the alt="" attribute to some description of your image. The HTML have already been prepared for you and you don't need to know any HTML

For blogging purposes, only the second and third box is relevant. The IMG code (one of the BBB code normally only used in bulletin boards) where you can just copy-paste the IMG code into a message and post in a bulletin board to display the image.

For displaying animated .gif images, you MUST use the EDIT HTML mode for your post editor, otherwise you will not be able to write HTML properly.

TYPING THE IMAGE HTML TAG YOURSELF

As you can from the screenshots, the free Photobucket image host give you 4 codes. The second one is the actual URL and if you are familiar with HTML for displaying images, you can type the HTML yourself. It will be of the form

<img scr="photo URL" alt="some text" title="some text" /">

Replace 'photo URL' with the actual URL of the photo which you can get by clicking on the second box (Direct Link) you see in the screenshot above and pressing ctrl+C key or right-click on your mouse and select "copy", then pasting it within the quotation marks in scr="photo URL" and deleting 'photo URL' (that is, in short, replacing 'photo URL' with the actual URL of the photo).

The attribute alt="some text" and title="some text", where you replace "some text" with something relevant to the photo, and are optional. That is, you can leave it out if you want. But it is highly recommended to add them as search engines spiders cannot read images, but can read what is written inside the alt="" and title="" attributes. Adding them will thus enable search engines spider your post better. Further, by adding the title="" attribute, when you hover your mouse cursor over the image, you will see a tool tip displaying the text you put between the quotation marks.

COPY IMAGE HTML TAG FROM PHOTOBUCKET AND PASTING IT INTO THE POST

If you are lazy to do what is described above, you can just click on the third box (HTML tag) which for the image used inTesting uploading animated .gif image to Blogger, is:

<:a href="http://photobucket.com" target="_blank"><:img src="http://img.photobucket.com/albums/v336/cikgu/starandbird.gif" border="0" alt="Photo Sharing and Video Hosting at Photobucket"><:/a>


Note that it is given as a hyperlink (starting with <a....), and anyone clicking on the image will be taken to the Photobucket site, not to the page showing the photo. Further, the alt="" text is given as alt="Photo Sharing and Video Hosting at Photobucket" which means you are doing a favor forPhotobucket. Well, if you are generous, that is a fair exchange for Photobucket hosting the photo free for you. Plus you have the luxury of just copy-pasting. Also, the animated image will be aligned left.

COPYING THE IMAGE HTML TAG FROM PHOTOBUCKET AND EDITING IT

Another alternative will involve a little extra work but will get the displayed and at the same time do what you want. If you want the animated image to link to a site of your own choosing, you can delete http://photobucket.com and replace it with aURL of the site you want to link to (the actual image on the web, your favorite site, you homepage, etc.). If you are observant, you will notice that the example of the image HTML tag obtained direct from Photobucket end with

alt="Photo Sharing and Video Hosting at Photobucket">

whereas mine ends with

alt="some text" alt="some text" /"

(note: for Photobucket, no space between title=""> and no / for HTML tag. This is bad practice because to be compliant with XHTML, a HTML tag with opening tag and no closing tag (most HTML tags come in pairs, and opening tag and a closing tag. Only very few HTML tags like the img tag don't need closing tag) should end with a / plus there must be a space between the last attribute and the /. I suppose if you want to comply, you can just edit the HTML from Photobucket yourself.

Further, the image is aligned left. What I did in Testing uploading animated .gif image to Blogger was to copy the photo HTML direct from the third box (HTML tag) and as I don't want it linked to Photobucket, I deleted the

<:a href="http://photobucket.com" target="_blank">

in front of the <:img...... and then deleted <:/a> at the back of the tag, leaving the image HTML tag as

<img src="http://img.photobucket.com/albums/v336/cikgu/starandbird.gif" border="0" alt="Photo Sharing and Video Hosting at Photobucket" title="animated gif image"/>


leaving the alt="" attribute as alt="Photo Sharing and Video Hosting at Photobucket" as a favor returned for Photobuckethosting the image for me free, adding title="animated gif image" but adding a space after the title="" tag followed by a backslash / to make it XHTML compliant.

In the third test image, I wanted to center the image, so I surrounded the above edited image HTML with <div style="text-align:center"> and </div> (note: this is the standard tag with an opening tag and a closing tag) so that the image HTML become:

<div style="text-align:center"><img src="http://img.photobucket.com/albums/v336/cikgu/starandbird.gif" border="0" alt="Photo Sharing and Video Hosting at Photobucket" title="animated gif image" /></div>


OTHER POSSIBILITIES WITH PHOTOBUCKET

I hope you understand what is explained above, and if you do, you should be able to think of other alternatives to achieve what your objectives are by suitable editing or changing.

Related post: Animated gif image, Blogger and Photoshop.
And subsequent to Jayesh comment and question:
Favicon for your Blogger blog
Favicon generator and free .ico host
Fix for missing favicon
Customizing your blog with favicon

For those wanting to do animation, refer Free open source animation software

Twitter Delicious Facebook Digg Stumbleupon Favorites More