How do I…

… add a (seamless) background image to my blog?

Guide to install a background image
Make sure you have saved your background graphic to a place like Photobucket.com or Flickr.com. Get the URL for inserting it in your blog´s code. Don´t worry - Photobucket and Flickr will automatically generate the code for you.

NOTE: When generating the URL from one of these services, use the URL (direct link) only, not the full HTML code.

Tips for background graphics:

• You want your background to be the background. You do not want it to hinder your reader´s ability to read your posts. It should not distract your readers, it should blend seamlessly into your design.
• Most background graphics are a smaller graphic repeated across the page (done automatically by the browser). This means you should choose a graphic that is small and has an easily repeatable pattern or no pattern at all. Some examples:

1. Host the small image on any photo host
2. Add your Photo host url of the icon to the following code below

1. Log in to your Blogger account.
2. Click on “Edit Template”
3. Click on the “Edit HTML” link on the Template tab.
4. Find the code, like:

body {
margin:0;
padding:0;
background:#483521 url(”http://www.blogblog.com/scribe/bg.gif”) repeat;
}

The part that says

background:#483521 url(”http://www.blogblog.com/scribe/bg.gif”) repeat;

is the part that we want to change. The number you see (#483521) is telling the browser what color to make the background in case the background image doesn’t load. The part that says

url(”http://www.blogblog.com/scribe/bg.gif”) repeat

is telling the browser which image to use as the background for your blog template and to repeat that image across and down the page. To change the background image, we have to change which graphic it is referencing.

5. To change the color, simply type the new numbers that represent the color you´d like in place of #483521.
6. To change the background graphic, use the new background´s URL. Replace http://www.blogblog.com/scribe/bg.gif. Make sure the new URL has quotes around it and is inside the parentheses.

For example, your finished code might look like this:

background:#FFFFFF url(“http://i252.photobucket.com/albums/hh5/PYB-freebies/290208/seamless-flowers.jpg”) repeat;

Congrats! You have now customized your template!

On special email demand of a special friend:

How do I…

… add a my badge with a textarea?

On several blogs, you´ll see a box under the blog’s badge with the HTML code for people to add the button to their own blogs, like mine:

<a target="_blank" href=" http:// pimp-your-blog.blogspot.com "><br/><br/><img border="0" width="125" alt="Pimp Your Blog" src=" http://i196.photobucket.com/albums/aa267/Pimpyourblog/PYB-badge.jpg " height="125" /></a>

All your readers have to do is copy and paste the HTML into their own sidebar, and *BOOM* there’s your pretty badge linking back to your site. Cute.

So, how do you do this?

Here´s the html code:

<a href=”http://YOUR URL HERE”><img src=”http://YOUR IMAGE URL HERE” border=”0″ height=”125″ width=”125″ /><textarea width=”125px” rows=”3″ cols=”15″ class=”tiny” name=”1″><a href=”http://YOUR URL HERE”><img border=”0″ width=”125″ src=” http://YOUR IMAGE URL HERE” height=”125″ />/a></textarea>

This is the HTML coding example for the Pimp Your Blog badge

<a href=”http://pimp-your-blog.blogspot.com”>
<img src=”http://i196.photobucket.com/albums/aa267/Pimpyourblog/PYB-badge.jpg” border=”0″ height=”125″ width=”125″ />
<textarea width=”125px” rows=”3″ cols=”15″ class=”tiny” name=”1″><a href=”http://pimp-your-blog.blogspot.com”><img border=”0″ width=”125″ src=” http://i196.photobucket.com/albums/aa267/Pimpyourblog/PYB-badge.jpg” height=”125″ />/a></textarea>

Have fun!

On special email demand of a special friend:

How do I…

… make a scroll box?

You might have noticed that sometimes a blog will have a scrollable box in the sidebar. The scroll box is a neat way de-clutter your sidebar. You can display your blogroll, awards, family photos, etc.

Here´s an example from my main blog:

Blog Blings

First I want to show you the code we’ll be using and explain how it works.
This is the code you’ll place in your sidebar:

<div style=”border: 1px solid #000000; overflow: auto; height:150px; width: 150px; color: #000000; background-”>YOUR CONTENT HERE</div>

The <div style=” “> and </div> are the opening and closing HTML tags you need to make the scroll box. Everything between the quotes in the <div style> tag tells the browser how to make the box appear on the screen. Let’s go through each of these items.

• border:1px solid #000000; - This tells the browser to make the box with a one pixel border in black. You can change the color by typing another color code matching to your blog or you can change the line type by typing dashed or dotted.
• height:150px - This tells the browser to make the box 150 pixels tall. You can change this variable by typing a different number (e.g., 200). You can play around with this until you like the look.
• width:150px - This tells the browser to make the box 150 pixels wide. Again, you can control the width by typing in a different number.
• color:#000000; - This is the color of the text within the box. You can use any color code here.
• background-color: #FFFFFF; - This is the color of the inside of your scroll box. You can change this color by simply typing another color code instead of #FFFFFF;

Now that you understand how the tag works, simply enter the content you want to appear in your scroll box!

For example, if you are going to show an awards collage linking to your awards site, like I did above, it would look like this:

<div style=”border: 0px solid #FFFFFF; overflow: auto; height: 180px;
width: 220px; background-color: #FFFFFF; “>

<a href=”http://coffee2go.blogspot.com/2007/03/blogworld-moments.html” target=”_blank”><img src=”http://i196.photobucket.com/albums/aa267/Pimpyourblog/coffee2go_awards_2008.jpg” /></div>

Now I will walk you through putting the code in your sidebar.

1. Log in to Blogger.
2. Go to Layout > Template > Page Elements > Add a Page Element.
3. Scroll down until you see HTML/Java Script and choose Add to Blog.
4. Cut and paste the following code into the Content field (you can leave the Title field blank):<div style=”border: 1px solid #000000; overflow: auto; height:150px; width: 150px; background-”>YOUR CONTENT HERE</div>
5. Click Save Changes.
6. Preview your blog to see how it looks. Move the element around as needed (simply drag and drop with your mouse).
7. Click Save.

Have fun!

On special demand of a special friend:

How do I…

… add a favicon / shortcut icon to my blog?

A favicon, also known as shortcut icon, website icon, page icon or url-icon is a small, square icon, usually 16×16px in size, that is displayed alongside the URL in the web address bar of a web browser.

The reason for using a favicon is branding. Most modern web browsers allow tabbed browsing. This means that a user can open several websites in the same browser window. A nice favicon design will distinguish your blog / website from the other websites.

Some modern browsers also allow favicons to be displayed in the Bookmarks section. Again, this will ensure your website will be distinguished from the others.

Guide to install Favicon
Adding a favicon to your blog is a good way to distinguish your blog from the millions of other bloggers around.

1. Choose a picture you like
2. Use a photo Editor to resize the picture to 16×16 pixel .gif for best 1:1 resolution and adjustment
3. Host the 16×16 pixel .gif on any photo host (like photobucket)
4. Add your Photo host url of the icon to the following code below

Save the template. When you refresh your blog site, you should see your nice little Favicon next to the blog address.

If you are still not sure how to get to the XML of your blogger, then follow these steps carefully:

When you decide to change your blog favicon in future, you can just change the hosting link of the image with a new favicon and that´s it!