Knowledge is good only if it is shared. As a new blogger, I had learned to change the Web template, and found out the tips, tricks, hacks, and tweaks of altering the Blogger template, customizing CSS, widgets, layout, blog design, inserting JavaScripts, HTML codes, Google AdSense, and other settings the hard way, through many trials and errors. For the purposes of this guide, I had started with the old Blogger “Minima” template. As I made the changes or learned something new, I had documented them. Before changing any template, please remember to save a copy of the current template. After editing the template, preview it, and save it when you are satisfied with the change. Hope this guide will help those who are finding the way around, just like me.

Search Tips for New Bloggers

We have extended our month-long vacation by a couple of days. We shall be posting articles the moment we return. We noticed that Google had updated the Page Ranks. New bloggers who have been waiting anxiously for this can check their blogs' Page Ranks. We have the PR checker link in our SEO Tools - Search Engine Optimization article.

The blog we created recently in Aug 2007, Blogger FAQ and Help, has also got its first Page Rank, a PR4. All our blogs are now ranked:-

Tips for New Bloggers - PR6
Business Fables and Management Lessons - PR4
Famous Motivational and Inspirational Quotes - PR4
Blogger FAQ and Help - PR4

Thanks to everyone for the support!

May 22, 2007

Digg This Story

Three Columns Rounders Template

This article is specifically catered to those using the “Rounders” template and wish to add a third column or another sidebar to their current template.

If you are using other templates, please refer to our articles and guides on:-
1. Three Columns Denim Template;
2. Three Columns Dots Template;
3. Three Columns Minima Template;
4. Three Columns Rounders 2 Template;
5. Three Columns Rounders 3 Template;
6. Three Columns Rounders 4 Template;
7. Three Columns Sand Dollar Template;
8. Three Columns Scribe Template;
9. Three Columns Thisaway Template (I);
10. Three Columns Thisaway Template (II).

Note: Some sites offer free three-column templates for download. If you are starting a new blog, you may look up these sites and use their templates. However, if you have an existing blog and merely want to expand the template to include another column, our guides would be helpful. What we do is to take the standard Blogger templates and show you how to add a new sidebar. This approach gives you total control over the changes, and if you have bookmarked this page, you can revisit it in future should you want to reverse the changes. It is also a safer method, since there could be a few out there who may introduce malicious scripts or blog virus into their customized templates without you knowing.


Briefly, the reason why templates like Rounders, Scribe, No. 897, etc. are special is because of the background images. To see what these images are, right click on any part of your Blog and view the picture. In the case of Rounders for example, if you right click on the Header to view the background image, you will see the corners_cap_top.gif or corners_cap_bot.gif which account for the rounded corners. These corners have a fixed width of 740px. They were uploaded onto the blogblog.com server and linked to your Blog.

If you want to expand your Blog to 3 columns, these images will have to be changed and uploaded onto an image server. Otherwise, you will not have the rounded corners or may see that the background images do not fit into a wider layout.

For the purpose of this tutorial, we have created new rounded corner images and uploaded them onto a free image server for you. You can follow the instructions here and include a third column on the left. The result is this picture you see.

Three Columns Rounders Template

Before you begin to do anything, remember to backup your template. Go to Template -> Edit HTML. Click the “Download Full Template” link to save a copy of your template.



Rounders Template

Scroll to the part where you see this:-

#outer-wrapper {
width:740px;
margin:0 auto;
text-align:left;
font: $bodyFont;
}
#main-wrap1 {
width:485px;
float:left;
background:$mainBgColor url("http://www.blogblog.com/rounders/corners_main_bot.gif") no-repeat left bottom;
margin:15px 0 0;
padding:0 0 10px;
color:$mainTextColor;
font-size:97%;
line-height:1.5em;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#main-wrap2 {
float:left;
width:100%;
background:url("http://www.blogblog.com/rounders/corners_main_top.gif") no-repeat left top;
padding:10px 0 0;
}
#main {
background:url("http://www.blogblog.com/rounders/rails_main.gif") repeat-y;
padding:0;
}
#sidebar-wrap {
width:240px;
float:right;
margin:15px 0 0;
font-size:97%;
line-height:1.5em;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}


The template defines 3 wrappers, namely:-

#outer-wrapper – referring to the entire blog
#main-wrap – referring to the main Blog Posts
#sidebar-wrap – referring to the right sidebar.

What we want to do is to include a left sidebar and name it newsidebar. The above code will therefore be changed to this (note the portions in red).

#outer-wrapper {
width:
995px;
margin:0 auto;
text-align:left;
font: $bodyFont;
}

#main-wrap1 {
width:485px;
float:left;
background:$mainBgColor url("http://www.blogblog.com/rounders/corners_main_bot.gif") no-repeat left bottom;
margin:15px 0 0
15px;
padding:0 0 10px;
color:$mainTextColor;
font-size:97%;
line-height:1.5em;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#main-wrap2 {
float:left;
width:100%;
background:url("http://www.blogblog.com/rounders/corners_main_top.gif") no-repeat left top;
padding:10px 0 0;
}

#main {
background:url("http://www.blogblog.com/rounders/rails_main.gif") repeat-y;
padding:0;
}

#sidebar-wrap {
width:240px;
float:right;
margin:15px 0 0;
font-size:97%;
line-height:1.5em;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#newsidebar-wrap {
width:240px;
float:left;
margin:15px 0 0;
font-size:97%;
line-height:1.5em;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#newsidebar-wrap1 {
background:$mainBgColor url("http://www.blogblog.com/rounders/corners_side_top.gif") no-repeat left top;
margin:0 0 15px;
padding:10px 0 0;
color: $mainTextColor;
}

#newsidebar-wrap2 {
background:url("http://www.blogblog.com/rounders/corners_side_bot.gif") no-repeat left bottom;
padding: 10px 0 8px;
}

#newsidebar h2 {
color: $postTitleColor;
border-bottom: 1px dotted $postTitleColor;
}



Let us now deal with the Header and the Footer. As mentioned, we had created new images for the rounded corners of the Header and Footer based on this new width of 995px.

Scroll to these 2 headings:-

/* Blog Header
/* Footer

Change the top corners:-

http://www.blogblog.com/rounders/corners_cap_top.gif


To this:-

http://www.blogpulp.com/imagehost/images/1008314701.gif


Also, change the bottom corners:-

http://www.blogblog.com/rounders/corners_cap_bot.gif


To this:-

http://www.blogpulp.com/imagehost/images/196653871.gif


We shall also change the layout editor to cater to the new sidebar. Scroll to where you see this:-

/** Page structure tweaks for layout editor wireframe */
body#layout #main-wrap1,
body#layout #sidebar-wrap,
body#layout #header-wrapper {
margin-top: 0;
}

body#layout #header, body#layout #header-wrapper,
body#layout #outer-wrapper {
margin-left:0,
margin-right: 0;
padding: 0;
}

body#layout #outer-wrapper {
width: 730px;
}

body#layout #footer-wrap1 {
padding-top: 0;
}

Update:

Replace all of the above with this:-

/** Page structure tweaks for layout editor wireframe */
body#layout #outer-wrapper,
body#layout #header-wrapper,
body#layout #footer-wrap1 {
width: 750px;
}
body#layout #main-wrap1,
body#layout .main .widget,
body#layout .main .Blog {
width: 400px;
}
body#layout #newsidebar-wrap {
width: 150px;
margin-top: 5px;
}
body#layout #sidebar-wrap {
width: 150px;
margin-left: 25px;
}


After that, scroll to somewhere near the bottom of the script where you see this.

<div id='main-wrap1'><div id='main-wrap2'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div></div>

<div id='sidebar-wrap'>


Add the portion in red above the div id='main-wrap1'. The segment should look something like this:-

<div id='newsidebar-wrap'>

<div id='newsidebar-wrap1'><div id='newsidebar-wrap2'>
<b:section class='sidebar' id='newsidebar' preferred='yes'>
<b:widget id='NewProfile' locked='false' title='About Me' type='Profile'/>
</b:section>
</div></div></div>

<div id='main-wrap1'><div id='main-wrap2'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div></div>

<div id='sidebar-wrap'>


You may click “Preview” to see the new layout, and if you are happy with what you see, click “Save Template”. If you don't want the profile on the left, you can remove that page element after that. You have now three columns in your layout!

Align Header Title and Description

Update: We have a more detailed guide on alignment of the Header Title, Description and background image. In the article, you would learn how to move these to the center, or towards the left or right of the Header. Check out the guidelines at Header Image and Title Alignment (I).

In the Rounders template, you would notice that the Header title and description are aligned to the left. If you want that to be in the center of the page, insert the text-alignment code (shown in red).

#header {

text-align: center;


Align Post Footer elements to Left

We noticed that the Post Footer elements e.g., Posted by, timestamp, comments, backlink icons, are aligned to the right in the Rounders template. If you want to align these elements to the left, change the text-alignment code (shown in red).

.uncustomized-post-template .post-footer {
text-align: left;
}


Note:

The Rounders template we are working on is the present version available on Blogger. If you are using the old Blogger templates, or any other template, the style names may be different. For example, #header-wrapper may be called #head-wrap. If you are unsure, you may source the net for a guide specifically for your type of template. Otherwise, you may want to understand the way we change this template and adapt it to yours. As long as you backup your current template, and Preview the changes made, it should be alright for you to try some changes.

© Tips for New Bloggers

Found this article useful? Mention us in your post, subscribe to our feed, link to us, or bookmark this site. Thanks for your support!AddThis Social Bookmark Button

May 20, 2007

Digg This Story

Links - Hover and Rollover Effects

Add an identity to your Blog by customizing the text links in your post and sidebars with nice rollover effects, colors and highlights. Learn how to remove the underline under the links. For the purpose of this article, we have changed our template such that you will see a different text color when your cursor is over the links, and a highlighted background color when the cursor is over the post title. We have also changed our other Blog to let you see a further example of a combination of color and font change for the hover links. In this article, we shall discuss the common effects that you can create for your Blog.

Overview of Link Styles

Blogger templates use Cascading Style Sheets (“CSS”) to define how the pages should be displayed. There are four basic stylesheet entities for links:-

a:link { }
a:visited { }
a:hover { }
a:active { }


a:link defines the style for links such that they stand out from the rest of the normal text.

a:visited defines the style for links that have been clicked or visited.

a:hover defines the style readers see when their cursor or mouse moves over the links.

a:active defines the style to an activated element.

The common rollover effects and styles that can be inserted into the { } are:-

color: #XXXXXX;

Changes the color of the text. By far the most common and effective style. For a list of color codes to be inserted in the XXXXXX, you may refer to the Hexadecimal HTML Color Codes and Names.

text-decoration: none;
text-decoration: underline;
text-decoration: overline;
text-decoration: line-through;
text-decoration: blink;

Set to “none” to remove the underline under the links. Set to “overline” if you want a line above the text or set to “underline” for a line below the text.

font-weight: normal;
font-weight: bold;
font-weight: bolder;
font-weight: lighter;

By default, the font is “normal”, so there is really no need to set it as that unless all your text is in a bold font and you want your hover links to be in the normal font.

font-style: normal;
font-style: italic;

A common style used is “italic” for the hover links.

font-family: Verdana,Arial;

The “Verdana,Arial” font is just an example. You can insert the font family names or generic family names that you want as the typeface for the links.

font-size: 85%;
font-size: 10px;
font-size: xx-small;
font-size: x-small;
font-size: small;
font-size: medium;
font-size: large;
font-size: x-large;
font-size: xx-large;
font-size: smaller;
font-size: larger;

For percentages and fixed font size, you can specify the values accordingly.

background-color: #XXXXXX;

With this, the background of the text link will be highlighted. For a list of color codes to be inserted in the XXXXXX, you may refer to the Hexadecimal HTML Color Codes and Names.

text-transform: uppercase;
text-transform: lowercase;

This changes the letters of the link either to uppercase or lowercase.

border-style: none;
border-style: hidden;
border-style: dotted;
border-style: dashed;
border-style: solid;
border-style: double;
border-style: groove;
border-style: ridge;
border-style: inset;
border-style: outset;

This gives you a border around the link.

border-color: #XXXXXX;

If you have a border, you may want to specify the color of the border. For a list of color codes to be inserted in the XXXXXX, you may refer to the Hexadecimal HTML Color Codes and Names.

Change Link Styles in Template

Under Template -> Edit HTML, you will be able to find the first 3 stylesheet entities or lines that look like these:-

a:link {
color:$linkcolor;
text-decoration:none;
}
a:visited {
color:$visitedlinkcolor;
text-decoration:none;
}
a:hover {
color:$titlecolor;
text-decoration:underline;
}


Changing these 3 will do significant wonders to the appearance of your Blog. In the Minima template, you can adjust the colors of the links, visited links, and hover links through Template -> Fonts and Colors. You can manually insert the color values too. Look at these examples and see the effects to understand what you can do to your Blog.

Example 1:

a:link {
color: #0066CC;
}
a:visited {
color: #cc0000;
}
a:hover {
color: #2D8930;
}

Click this link for an example on how the link changes to red color when visited and green when mouseover.

Example 2:

a:link {
color: #0066CC;
}
a:visited {
color: #cc0000;
}
a:hover {
color: #2D8930;
font-size: 120%;
}

Click this link to see an example of how in addition to the green, the link is also bigger in font when you hover your mouse over it.

Example 3:

a:link {
color: #0066CC;
}
a:visited {
color: #cc0000;
}
a:hover {
color: #2D8930;
background: #ffff66;
}

Click this link to view an example of a yellow background when you place your cursor over the link.

Example 4:

a:link {
color: #0066CC;
}
a:visited {
color: #cc0000;
}
a:hover {
color: #2D8930;
font-family: monospace;
}

Click this link for an example of a different typeface or font when you place your mouse over the link.

Example 5:

a:link {
color: #0066CC;
text-decoration: none;
}
a:visited {
color: #cc0000;
text-decoration: underline;
}
a:hover {
color: #2D8930;
text-decoration: blink;
}

Click this link and notice that the link blinks when you mouseover and it has an underline when you have visited the link.

Example 6:

a:link {
color: #0066CC;
}
a:visited {
color: #cc0000;
}
a:hover {
color: #2D8930;
border-style: inset;
border-color: #D462FF;
}

Click this link for an example of a violet border around the link when you hover over it.

Example 7:

You can now combine some of these rollover effects into the link styles. For example, if you want the link to have a different font family, bold and bigger font, highlighted background, and it blinks when you hover the mouse over it, you can put all the styles under a:hover as follows:-

a:link {
color: #0066CC;
}
a:visited {
color: #cc0000;
}
a:hover {
color: #2D8930;
font-family: monospace;
font-weight: bold;
font-size: 120%;
background: #ffff66;
text-decoration: blink;
}

Click this link to see an example of a combination of styles - a different font family, bold and bigger font, highlighted background, and it blinks when you hover the mouse over it.

Experiment with the combinations but avoid having too many styles. Be careful when using the font-size, font-family or font-weight as these may adjust the format of the text around the link. Note also that not all the effects are supported by every browser. For instance, Blink works in Firefox but not in IE.

Change Post Title Style

Under Settings -> Archiving, if you have set the “Enable Post Pages” to “Yes”, you will have a unique web page for each Post and the Title will link to that page.

If you want to set a hover style for the Post Title, look for this line and add the styles and effects after that:-

.post h3 a:hover {


Further reading:-


For specific text link and image link codes, you may read the guide at Hyperlinks and Image Links (I).

If you want to remove link underlines or have the underlines only in the Blog Posts or Sidebar areas, look up our guide at Remove Underline Below Text Links.

© Tips for New Bloggers

Found this article useful? Mention us in your post, subscribe to our feed, link to us, or bookmark this site. Thanks for your support!AddThis Social Bookmark Button

May 18, 2007

Digg This Story

Links, Labels open in New Window

In our previous articles, we discussed the code for making the text and image links in your Posts open in new windows or tabs when clicked. However, to have the links in a Link List and Labels that are normally in the sidebar widgets open in new browser windows or tabs, you would need to change the HTML code in your template. Here, we shall talk about the hack that you can put into your template.

Text Links and Image Links

To recapitulate what we mentioned in our guides at Hyperlinks and Image Links (I) and Hyperlinks and Image Links (II), a typical hypertext or text link code looks like this:-

<a href="URL" target="_blank" title="TITLE">Text</a>


The HTML code of a picture or image link looks like this:-

<a href="URL" target="_blank" title="TITLE"><img src="Image URL" border="0" width="80" height="15" alt="Description"></a>


The part of the code that tells the browser to open the link in a new browser window or new tab is the target attribute (in blue). If you want the readers to view the link in the same browser window, simply remove target="_blank" from the code.

Link List and Link Widget

The Link List that you create in your sidebar, using Template -> Page Elements -> Add a Page Element, will open links in the same window. Sometimes, these may not be what you want. For instance, we have configured our template such that the links for “My Blogs” open in new windows but the links in “Articles” open in the same window.

(By the way, many people have asked whether the Articles list is an archive hack. The answer is no. The list you see is created using a Link List. We think that it is better than Archive because it allows us flexibility in displaying and grouping the Articles regardless of date of post.)

To have the Link List open in new windows when clicked, we first go to Template -> Edit HTML. Check the “Expand Widget Templates” box. Backup your template by copying the template and saving it in an MS Notepad text file. You can also click the “Download Full Template” link that appears right after the words “Before editing your template, you may want to save a copy of it.”

Links, Labels open in New Window

Scroll to these lines and add the code in red.

<b:widget id='LinkList1' locked='false' title='Links' type='LinkList'>
<b:includable id='main'>

<b:if cond='data:title'>
<h2><data:title/></h2></b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target' target='_blank'><data:link.name/></a></li>
</b:loop>


Please Note:

You have to locate the correct Link List. Check against the Title if you have inserted a title for the List. If you have several Link Lists in your Blog, they will be numbered LinkList1, LinkList2, and so on. In case you did not insert titles into your Link Lists and you are not sure which Link widget is the right one, look at what is before or after the codes, and compare against what you see on your Blog. They are usually arranged in the order that they appear in your Blog.

Save and refresh your page to see the change.

Label List and Label Widget

If you have created a list of Labels through Template -> Page Elements -> Add a Page Element, you can also have your Labels open in new browser windows or tabs.

Scroll to these lines and add the code in red.

<b:widget id='Label1' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url' target='_blank'><data:label.name/></a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>


© Tips for New Bloggers

Found this article useful? Mention us in your post, subscribe to our feed, link to us, or bookmark this site. Thanks for your support!AddThis Social Bookmark Button

May 15, 2007

Digg This Story

Blog Widgets, Gadgets and Add-ons (I)

In this series, we shall list the free, popular, and interesting web widgets and gadgets that you can consider adding to your Blog. Widgets are elements that extract the services or content from other sites. Some of these widgets are useful, providing your readers with news, information, and reference tips. Others may be just fun and games which make your Blog a little more interesting and promote interaction among your readers. Because there are so many applications, developers and sites, this article will be split into parts and we shall update them now and then.

Many of the sites offer easy to install HTML or JavaScript codes. All you need to do is to copy the code and place them into your layout. For instance, if you want a widget to appear in your sidebar, login to your Dashboard, go to Template -> Page Elements and click “Add a Page Element” at the sidebar. Select “HTML/JavaScript”. Paste the code generated by the service provider and save. Every time you create a new page element, it appears at the top of all the other elements. If you want it somewhere near the bottom of the sidebar, just left-click that “Page Element”, drag and drop to the place you want. Click “Save” at the top right hand corner of the page to save the new layout.

A note of caution when adding widgets. While you may be tempted to have as many widgets as you can lay your hands on, having too many may clutter the Blog and cause slower page downloads. Also, since many of them work on JavaScripts, readers who configure their Firefox or IE browsers to block scripts may not see these features. For these reasons, we have added only a couple of widgets to let you have an idea, but have not included all the widgets listed in this article. Take your time to pick those that truly complement your Blog contents.

Google Gadgets

Take a look at the directory of widgets at Google Gadgets and you will instantly know what widgets are all about.

Blog Widgets, Gadgets and Add-ons

Many of the applications are created by different developers and users. There is no registration required at your end. When you have chosen one, click “Add to your webpage” and you will be asked to customize the title, width, height and border of the gadget. If the width of your sidebar is e.g., 150 px, you may want to set the gadget width to something less than that. It is alright to have a larger width, but readers will have to scroll to view the gadget in its entirety. When you are satisfied, click “Get the Code”. Copy the code and paste it into your “Page Element” described above.

Widgetbox

If you think Google Gadgets are great, you would love the directory of web widgets at Widgetbox. They provide ready installation codes for TypePad, WordPress, Blogger, MySpace and most other blogs, sidebars or websites.

Blog Widgets, Gadgets and Add-ons

Register for a free account. Search for the widgets that you like. Determine the display settings and click “Get Widget”. You can either “Get Widget Code” and paste it into your Blog layout as described above, or let them do it for you by clicking “Add to Blogger”. We prefer the first method.

If you have several widgets, you can also “Make a New Panel” under “My Widgets” and add these widgets into your panel. The advantage is that when you “Install”, you will have one code generated for the panel rather than several codes.

Snipperoo

In a similar fashion, Snipperoo has a directory of widgets that you can use. You can pick several widgets, arrange them into a panel, and the site will generate one code for you to place on your Blog. We think that configuration was much easier previously. With their new interface and a scheme to pay you for putting the widgets in your Blog, we would rather stick with Widgetbox.

Blog Widgets, Gadgets and Add-ons

In any event, if you want to have a look, register for a free account. Once you are logged in, begin by creating a “New Panel”. To the left, you will see “Get Widgets”. Add the ones you like into your Panel. Drag and drop to arrange them in the desired positions. Click “Publish” to update and generate a code.

AddThis

This is a useful service. The widget allows readers to easily bookmark your Blog, or subscribe to your feeds. It supports many feed reader as well as social bookmarking services. The design looks neat and saves up a lot of space.

Register at their AddThis site. You can either have a Bookmarking widget

AddThis Social Bookmark Button

or Feed widget

AddThis Feed Button

If you are prompted to enter your Feed URL, you could use your Blog URL with “/atom.xml” or “/rss.xml” after it. In this Blog, you will see that the Bookmarking widget has been inserted into the template such that it automatically appears after every post. To do this, go to Template -> Edit HTML and click the “Expand Widget Templates” checkbox.

Blog Widgets, Gadgets and Add-ons

Next, look for this line: -

<div class='post-footer'>


Paste the generated Bookmarking widget code either just before or just after that. You can preview the Blog to see the difference in the position of the widget. Should you want the widget to appear on the left or right, you can align it by adding the following alignment tags to the widget code:-

<div align='right'>WIDGET CODE</div>


Lilypie

If you have a baby, child, or are expecting one, the tickers you find at Lilypie will be nice inclusions in your Blog.

Blog Widgets, Gadgets and Add-ons

You don't need to register to use the service. Simply choose the background, select marker and input personalized text to create a ticker code. Paste the HTML code into your Page Element.

TickerFactory

This is another tracker that you can add to your Blog. Visit their TickerFactory site and choose something that you would like to track. The popular ones are weight loss progress, baby's age and anniversary countdowns. No registration is required.

Blog Widgets, Gadgets and Add-ons

Customize the ruler and ticker slider designs, copy the HTML code and paste it into your Page Element.

AuctionAds

Blog Widgets, Gadgets and Add-ons

Sign up for an account at AuctionAds to display an eBay auction widget. The displays are related to the key words you assigned. According to their FAQ, their ads are compatible with AdSense and other ad systems. In short, you can have both AuctionAds and AdSense ads in your Blog. You get a commission when someone buys an item from eBay and it is an additional way to earn some revenue through your Blog.

This article continues at Blog Widgets, Gadgets and Add-ons (II). You may also consider having a chatbox, shoutbox or message board on your Blog.

© Tips for New Bloggers

Found this article useful? Mention us in your post, subscribe to our feed, link to us, or bookmark this site. Thanks for your support!AddThis Social Bookmark Button

Digg This Story

Blog Widgets, Gadgets and Add-ons (II)

This is a continued list of Blog Widgets, Gadgets and Add-ons which you can include into your Blog. If you have not read the first part, please check out Blog Widgets, Gadgets and Add-ons (I). You may also consider having a chatbox, shoutbox or message board on your Blog. We ended with AuctionAds which can earn you some extra revenue. We begin this second part with a fun widget that you can have.

Punkymoods

“The heart has its reasons which reason knows nothing of.” ... Blaise Pascal

Blog Widgets, Gadgets and Add-ons

If you are writing an online diary about personal events, you may want to let your readers know at a glance your mood at the current moment. Punkymoods does just that. Get a free account and add their code to your Blog. Whenever your mood changes, login to their site and set the mood. The image or emoticon displayed on your Blog will be automatically changed to show your current mood.

ChipIn

Blog Widgets, Gadgets and Add-ons

Organizing a fund-raising event and want readers to contribute to the funds? ChipIn provides a widget which gives an up-to-date status and a secure means of collecting the funds.

Clustrmaps

Most of us would have used statcounters to keep track of the number of visitors to our sites. Numbers alone may be a little stale, and if you like something more graphic which shows the locations of your visitors, open a free account with Clustrmaps.

Blog Widgets, Gadgets and Add-ons

Go to Admin page and copy the HTML code into your Blog. Their service is free if you have not more than 2,500 visitors per day.

Answers.com

Blog Widgets, Gadgets and Add-ons

Do you always have to explain terms and jargons used on your site? Incorporate some free Answer tools like AnswerTips and AnswerBoxes from Answers.com for your visitors to obtain instant answers to key words and queries.

Blufr

Blog Widgets, Gadgets and Add-ons

Also powered by Answers.com is the widget by Blufr where viewers are posed a question which could either be true or a bluff. [Update: Service is no longer available and link is therefore removed.]

TheFreeDictionary

This site TheFreeDictionary has more free tools for you to choose from. You could have a simple dictionary lookup box.

Blog Widgets, Gadgets and Add-ons

You could also consider other useful resources like Word of the Day, Article of the Day, This day in history, Today's birthday, In the News, Quote of the Day and games like Spelling Bee, Match Up and Hangman.

Blog Widgets, Gadgets and Add-ons

LibraryThing

Blog Widgets, Gadgets and Add-ons

If you have a collection of books, you might find the service at LibraryThing useful. Here, you can create an online catalog of your books and be connected to people around the world who share similar collections. You can place a widget on your Blog to let people know what you are reading.

Vizu

Blog Widgets, Gadgets and Add-ons

Creating a blog poll to collect opinions from your readers has never been easier. With Vizu you can create a poll using customized templates and insert the polling widget into your Blog. If you'd like extra income, they will pay you to host selected webpolls through their Vizu Answers scheme.

WeLoveWidgets

Blog Widgets, Gadgets and Add-ons

Teaming up with Astrologer.com, WeLoveWidgets provides a horoscope widget that updates itself and lets you see who you are compatible with.

Technorati

Blog Widgets, Gadgets and Add-ons

This site was discussed in our article on Submit Blog to Blog Directories (I). Check out the blog widgets offered by Technorati too. You can have widgets displaying the top tags of your Blog and number of Links, or try their new Authority widget to show your status as an authoritative blogger. Again, this is based on the number of blogs linking to you.

© Tips for New Bloggers

Found this article useful? Mention us in your post, subscribe to our feed, link to us, or bookmark this site. Thanks for your support!AddThis Social Bookmark Button

May 10, 2007

Digg This Story

Background Image for Blogger Header (New)

We had recently noticed several changes and additional features to the Blogger layout. One of the notable and much welcomed change is the ease of adding a picture banner or image to the Blogger Header, as highlighted by our reader, dumper. The new steps covered in this article will supercede the previous articles titled “Background image for Blogger Header” and “Add Picture Banner Link to Blogger Header.” Those previous methods of putting the background image are still valid and effective. However, for many new bloggers who are not too familiar with coding, we think that using the latest feature by Blogger is an easier way of creating the Header image.

Do note that when you use this feature, the image will appear as a background to the Title and Description. If you want a picture on one side of the Header and the Title and Description beside the picture, we think it is still better to use the methods described in the article “Add Picture Banner Link to Blogger Header” as that will give you better control over the position of the various elements. You can also refer to our article in our FAQ showing you how to have a picture beside the Blog Title and Description.

Insert Header image

We assume that you have a ready picture that you would like to place in your Blogger Header. Edit the picture, touch up, and resize using photo editing softwares. You can download the free Google's Picasa or Irfanview if you don't have one. Save the picture in your computer or upload it onto an image server.

Login to your Dashboard. Go to Template -> Page Elements. Click to Edit your Header.

Background Image for Blogger Header (New)

You will see that you can now upload an image onto your Header either from your computer or from the web. After uploading the image, Save the changes and View your Blog. If you are happy with the picture, go back to Edit your Header again.

This time, you will see under the image further options on “Placement” of the image.

Background Image for Blogger Header (New)

If you choose “Behind title and description”, the image will appear as a background and whatever you type as your title and description will be visible on the face of the image. With this option, only the title links to your main index page but the image does not.

If you choose “Instead of title and description”, you will see only the image and the title and description are hidden from view. However, with this option, the image is clickable and automatically links to your main Blog page.

Align image to Left or Right

Update: We have a more detailed guide on alignment of the Title, Description and Header background images. In the articles, we discussed how you can move them to the center, or towards the left or right of the Header. Follow the guide on Header Image and Title Alignment (I) if you are using the Minima, Denim, Rounders, Herbert, Jellyfish, Harbor and Scribe template. Go to Header Image and Title Alignment (II) if yours is a Dots, No. 897, No. 565, Thisaway, Moto, Snapshot, TicTac, Tekka, Sand Dollar or Simple II template.

To have an image aligned to the left of the Header, go to Template -> Edit HTML, look for the Header image style and change it to the following words (in purple):-

#header img {
margin-left: 0px;


Similarly, if you want the image to appear to the right of the Header, it would be “margin-right: 0px;”.

This is applicable where the image replaces the Title and Description. If you retain the Title and the image is a background to the Title, the image will follow the position of the Title. To have the picture on one side of the Header and the Title and Description next to it, you may want to follow the guide in the article “Add Picture Banner Link to Blogger Header”.

Remove border around Header

If you see a border around the Header image that somehow does not go with the image, you can either change it or remove it. Go to Template -> Edit HTML, and you will see somewhere near the top a style defined for the #header-wrapper and #header. There is a setting for the border. An example is this:-

border: 1px solid $bordercolor;


This border has a width of 1px, a thicker “solid” line instead of a “dotted” line, and a bordercolor that is defined under Template -> Fonts and Colors.

To remove the border, either delete this setting entirely or change the 1px to 0px width. Preview the template and if you like what you see, save it.

Further Reading:

This guide will give you an image background. Sometimes, you may have more than one image, all of which are suitable for your Blog. You can read Random Header and Background Images on how you can have the Header images rotated and a random image shown upon every page load.

Should you want to have a background picture as a backdrop to your main post, sidebar or whole blog, you may refer to the article on "Background Image for Blogger Template."

© Tips for New Bloggers

Found this article useful? Mention us in your post, subscribe to our feed, link to us, or bookmark this site. Thanks for your support!AddThis Social Bookmark Button

May 6, 2007

Digg This Story

Random Header and Background Images

A reader CeElle asked how the Header banner and Blogger background picture can be rotated so that they show a different image every time the page is refreshed or reloaded. While we could use the format of a slide show, the timing of rotation would be fixed. We think we have a simple enough JavaScript that randomly calls for a new Header banner or Blog background image whenever the Blog is refreshed. This is useful if you have several background pictures which are suitable for your Blog and you want to showcase all of them.

Rotating Header Image

Just to be sure, this article is about randomly displaying different Header images upon every refresh of the page. If your intention is to have a fixed background image for your Header, the other articles Background Image for Blogger Header (New) and Background image for Blogger Header will be more relevant. In that article, you will also read about creating images and using free photo editing software like Google's Picasa to resize and crop your pictures.

After creating your images, you will have to upload them onto a server. You can read about using free hosts like Google Page Creator and Google Groups. We also have a rather comprehensive list of free Image Hosts and File Hosting Services in our article on Manage Blogger Image Storage Space. Check out those sites and choose one that is fast, reliable and enables hotlinking to the uploaded files. After uploading the pictures, take note of the Image URLs.

Login to your Dashboard. Go to Template ->Page Elements -> Add a Page Element and choose “HTML/JavaScript”. The javascript to insert is this:-

<script type="text/javascript">
var banner= new Array()
banner[0]="Image01URL"
banner[1]="Image02URL"
banner[2]="Image03URL"
banner[3]="Image04URL"
banner[4]="Image05URL"
banner[5]="Image06URL"
banner[6]="Image07URL"
banner[7]="Image08URL"
banner[8]="Image09URL"
banner[9]="Image10URL"
var random=Math.floor(10*Math.random());
document.write("<style>");
document.write("#header {");
document.write(' background:url("' + banner[random] + '") no-repeat top left;');
document.write(" }");
document.write("</style>");
</script>


Explanatory notes:-

1. The Image01URL to Image10URL are the links to the images that are hosted on the image server. Please insert the full URL beginning with http://

2. This uses a Math object javascript. The random() code will give a random number between 0 and 1. This number is multiplied by 10 and the floor code rounds the number downwards to the nearest integer, giving a value between 0 and 9. At every pageload, the script will display one of the banners from banner[0] to banner[9].

3. The above example assumes you have 10 different images to display. If you have fewer pictures, say 5 pictures, delete banner[5] to banner[9] and amend the number (in red) to 5. If you have more images, you may add banner[10] up to whatever number of images you have, and amend the number (in red) accordingly.

Rotating Background Image

Again, if you have only 1 image for your Blog background, you can insert the image into your template using the guide in this tutorial Background Image for Blogger Template.

If you have more than 1 background image that you want to use, the steps for having the random background images upon each page refresh are about the same as above. Create the images, host them on a free server, and take note of the Image URLs. Next, login to your Dashboard. Go to Template ->Page Elements -> Add a Page Element and choose “HTML/JavaScript”. The javascript to insert is this:-

<script type="text/javascript">
var banner= new Array()
banner[0]="Image01URL"
banner[1]="Image02URL"
banner[2]="Image03URL"
banner[3]="Image04URL"
banner[4]="Image05URL"
banner[5]="Image06URL"
banner[6]="Image07URL"
banner[7]="Image08URL"
banner[8]="Image09URL"
banner[9]="Image10URL"
var random=Math.floor(10*Math.random());
document.write("<style>");
document.write("body {");
document.write(' background:url("' + banner[random] + '") repeat center center;');
document.write(" }");
document.write("</style>");
</script>


Explanatory notes:-

In addition to what we discussed above relating to rotating Header images, the position of the background image is important. Please change the attributes (in purple) to suit your requirements. For instance, if you have a small tile or image that you want to use to form a patterned background, insert the “repeat” attribute given in the above sample. If you have a big picture that covers the entire blog and you want the picture to be fixed, you may change the “repeat” to “no-repeat fixed”. For a more detailed explanation on the attributes, please refer to Background Image for Blogger Template.

© Tips for New Bloggers

Found this article useful? Mention us in your post, subscribe to our feed, link to us, or bookmark this site. Thanks for your support!AddThis Social Bookmark Button

May 4, 2007

Digg This Story

Remove Older Post and Posts (Atom) Links

In the new default Blogger templates, you will see at the bottom of the page the words “Subscribe to: Posts (Atom)”. On every other page, you there are the words “Newer Post”, “Home” and “Older Posts”. These serve a good purpose. Nevertheless, some people may like a neater layout by removing these links and this guide will discuss the simplest method that involves minimal change to the template.

Older Post, Home and Newer Post links

Remove Older Post and Posts (Atom) Links

When there is an older post than the post on the page, Blogger automatically displays a link to the older post. Similarly, if there is a newer post, there will be a link to that post. If you are writing a serial story, where one chapter leads to another, this is a good navigational tool for your readers. However, for many of the blogs, like ours, readers are interested in particular topics. They will look at the article list, labels or tags that you have in your site and are not likely to browse through every single article. Removing these links therefore makes sense and may make your Blog less cluttered and unsightly.

Do note that Blogger displays 20 posts on the page. If you have, for example, 30 posts bearing a certain label, people clicking that label will only see the latest 20 posts. To view the remaining 10 posts, they have to click the “Older Posts” link.

If you choose to remove these links, login to your Dashboard. Go to Template -> Edit HTML. Scroll to where you see this and add the codes (in red):-

#blog-pager-newer-link {
display: none;
}

#blog-pager-older-link {
display: none;
}

#blog-pager {
display: none;
}


What we have done is simply to tell the browser not to display these links. Should you change your mind in future, simply remove the codes (in red) and you will see the links again.

Note that these CSS styles are what you see in the new Blogger templates. If yours is an old template or a modified version, you can try looking for headings that look similar to the above. Always Preview the template before saving. In that way, if you don't like it, you can choose to Clear Edits.

Change the text or replace with pictures

Instead of removing these links, if you wish to change the text from “Older Posts” or “Newer Posts” to some other words, or to have them replaced by pictures, you may refer to the article on Status Message and Older Post picture link. In that article, we discuss as well how you can switch the positions of the links by having the Older Posts link on the left and the Newer Posts link on the right.

Posts (Atom) links

Remove Older Post and Posts (Atom) Links

Under Settings -> Site Feed, when you click the “Advanced Mode”, you are able to determine the settings for your Blog Posts feed and Comment feeds. You may syndicate a Short or Full version of your contents, but it is not advisable to select None for your Blog Posts feed. Depending on your settings, there will be a feed link at the bottom of your Blog Posts for readers to Subscribe to: Posts (Atom) and/or Comments (Atom).

Remove Older Post and Posts (Atom) Links

While this link is useful, readers can easily subscribe to your feed via their browsers. Also, if you have signed up with feed aggregator services like Feedburner which we use, they will provide you with better landing pages for your would-be subscribers in addition to nicer chicklets which you can place on your Blog for readers to add the Blog feed. As you can see on this page, putting the feed subscription tools on the sidebar may catch more attention than a link right at the bottom of the page.

Should you wish to remove this feed link, go to Template -> Edit HTML, scroll to this style definition and add the code (in red):-

.feed-links {
display: none;
}


Again, note that we are merely telling the browser not to display the feed link. Other sites may suggest different methods like deleting the detailed style definitions or adding comment tags to “b:include name='feedLinks'”. They do work, but we think that it is better not to mess around with the template too much. The above code is simple enough and can be easily reversed if you wish to show the feed link.

© Tips for New Bloggers

Found this article useful? Mention us in your post, subscribe to our feed, link to us, or bookmark this site. Thanks for your support!AddThis Social Bookmark Button

May 3, 2007

Digg This Story

AdSense Code in Blogger Post Body

One of the known tips for improving the performance of your Google AdSense ads is knowing where to place the ads. In this guide, we shall discuss the modification you can make to your Blog template to have your Google AdSense ads appear between your post title and post body, or between your post body and post footer. Also, we shall have the AdSense ads appear on every individual post.

Choosing a best placement for your AdSense ads will attract more attention; attention leads to clicks; and clicks bring you AdSense revenue. Easier said. While people may have theories on where the ideal AdSense spot ought to be, there is really no standard answer because it depends very much on your Blog's layout, contents, theme, etc. If you have been following the changes made to our Blog, you would agree that we are no guru at this. We had merely placed the ads where they fit aesthetically and not where they will get the most attention. Nevertheless, if you would accept our two cents' worth of opinion, try to put yourself in the minds of your readers. Ask questions like why readers visit your Blog, which section of the Blog are they most interested in, and whether placing an ad at a particular area will distract, annoy or please them.

Many people believe that having AdSense ads just before or after the Blog posts will best optimize their performance. For the purposes of this article and to give you an idea how it would look, we have inserted the AdSense code into our template to have the ads appear immediately below the article and before the post footer. If you think you would like to do the same for your Blog, the following are the steps you should take.

Update: A section on Using Blogger Feature to insert the AdSense Ads after every post.

Using Blogger Feature

If you merely want an Ad to appear after every post or every few posts, use this Google feature instead. Go to Template -> Page Elements and you see in your layout the heading “Blog Posts”. Click the “Edit” link at the bottom right corner. You will see this screen.

AdSense Code in Blogger Post Body

We assume you have a Google AdSense account. If you don't, you can create one using the same login through your Google account. You will be assigned a Publisher identity number which shall appear in all your AdSense codes.

Tick the “Show Ads Between Posts.” You can select whether to show ads after every post or after several posts. In accordance with AdSense TOC, a maximum of 3 Ads will be displayed. Choose the ad format and color scheme. Save the changes and refresh your Blog to see the Ads.

While using this Blogger feature is simple and easy, you may want more control over the position of the Ads. For example, you may want it between the title and posts rather than after the posts. The following guide will show you how you can do that.

More Ad locations

Log in to your Google AdSense account.

AdSense Code in Blogger Post Body

Go to AdSense Setup -> Products and choose “AdSense for Content”.

Next, select “Ad unit” and follow their instructions on picking the size of ad, color combination, and so on, right till the end when they automatically generate a HTML code for you. Copy this code and paste it into Microsoft Notepad. (If you are a WinXP user, click the Start button at the bottom left corner of your screen. Under All Programs -> Accessories, you should see the MS Notepad icon.)

AdSense Code in Blogger Post Body

Change the AdSense code

This heading may sound misleading. We are not at all altering the code but converting some of the characters to character entities. We have to parse the AdSense code so that it can be included into your Blog template. This is not against AdSense rules because after the code is inserted into the template, when you view the source code of the template, you should see the exact same AdSense code that Google has generated for you. Indeed, if it is anything different, it means that you have not parsed it correctly and should review the code again. Parsing the code essentially involves replacing the following HTML characters:-

< with &lt;
> with &gt;
" with &quot;

Your final Google AdSense Code should look something like this:-

&lt;script type=&quot;text/javascript&quot;&gt;&lt;!--
google_ad_client = &quot;pub-0000000000000000&quot;;
google_ad_width = 336;
google_ad_height = 280;
google_ad_format = &quot;336x280_as&amp;amp;quot;;
google_ad_type = &quot;text&quot;;
google_ad_channel = &quot;&quot;;
google_color_border = &quot;FFFFFF&quot;;
google_color_bg = &quot;FFFFFF&quot;;
google_color_link = &quot;000000&quot;;
google_color_text = &quot;000000&quot;;
google_color_url = &quot;000000&quot;;
//--&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot;
src=&quot;http://pagead2.googlesyndication.com/pagead/show_ads.js&quot;&gt;
&lt;/script&gt;



Insert code into template

Login to your Dashboard. Go to Template -> Edit HTML and click the box next to “Expand Widget Templates”.

AdSense Code in Blogger Post Body

Block copy the entire HTML code for your site that you presently have and save it in a separate text file in MS Notepad. You can also click the "Download Template" link to backup the template. This is one of the two necessary steps whenever you want to change the template. The second step is to “Preview” the new changes, and save the changes only when you are satisfied. The backup you have saved in a text file will come in handy when you accidentally click to save the changes without previewing them. With a backup, you can easily restore the template to the prior state if need be.

Now search for post.body through your browser's search function (Ctrl+F for Firefox and IE). You should see these lines:-

<div class='post-body'>
<p><data:post.body/></p>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>


If you want the AdSense ads to appear between the post title and post body, add the following code above the orange lines. If you want the AdSense ads to appear immediately after every individual post, add the following code below the orange lines. The code to add is:-

<div style='float:left;'>
AdSense Code
</div>


The AdSense Code is the one you have amended above in MS Notepad. Do NOT save the template, but click the Preview button to see if you like the placement of the AdSense ads.

Do you want to have the AdSense code on the left of your text as shown in this screenshot?

AdSense Code in Blogger Post Body

Choose the smallest AdSense format like 125x125. Insert the AdSense code here:-

<div class='post-header-line-1'/>
<div style='float:left;'>
AdSense Code
</div>
<div class='post-body'>
<p><data:post.body/></p>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>


If you want the Ads on the right of the text, like this:-

AdSense Code in Blogger Post Body

Insert the code as follows:-

<div class='post-header-line-1'/>
<div style='float:right;'>
AdSense Code
</div>
<div class='post-body'>
<p><data:post.body/></p>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>


Set the AdSense ad margins

If your AdSense ads are too close to the edge, you may set a margin in the style tag. To give you an idea how wide the margin should be, you can see the sample in our other Business Fables blog where the left margin is set to 30px. The code used was:-

<div style='float:left; margin-left:30px'>
AdSense Code
</div>


Should you want to align the AdSense ad to your text, you can specify a margin or padding around the entire AdSense code. The code you can use is:-

<div style='float:left; margin:5px 10px 15px 20px'>
AdSense Code
</div>


The first number 5px is for the top margin, 10px is for the right margin, 15px for the bottom margin, and 20px for the left margin. You should of course change these values to suit your template.

Preview the template and if you are satisfied, save the template and refresh your Blog to see the new positions of your AdSense ads.

Other than Google Ads, you can learn how to place AdSense Product Referrals in your Blog.

Additional money-making opportunity

Since we are on this topic of earning revenues through AdSense, you may want to consider earning money while you are surfing the net. AGLOCO seems to have an interesting scheme which you may want to take a look. If you are surfing the net anyway as part of your daily routine, why not earn the extra income as well. You may also want to consider having AuctionAds to display an eBay auction widget which is compatible with AdSense and other ad systems.

© Tips for New Bloggers

Found this article useful? Mention us in your post, subscribe to our feed, link to us, or bookmark this site. Thanks for your support!AddThis Social Bookmark Button