May 31, 2006

Adding Forms in Blogger

You can create all different types of forms in blogger.

  • Questionnaires
  • Surveys
  • Polls
  • Link Request
  • Suggestion Box
An example is this survey form I created to see how visitors found out about blogatech. ( even tho this is a tutorial on creating forms I would appreciate it if you took a minute and completed this survey.)
Name: *
E-mail Address: *
How did you find us? *
Search Engine
Link From Another Site
Blog Directory
Click Exchange Site
Word of Mouth
How often do you visit our site? *
Daily
Weekly
Monthly
Yearly
First Visit
Message:

* RequiredCreate Email Forms

Ok thanks. So there is a good example of how to use a form on your site. In the past adding a form would have required a substantial knowledge of HTML as well as a hosting service that would provide a file for your forms to be sent to.

Mycontactform.com is a site that lets you create a custom form, without any knowledge of HTML. You are walked through the building process by an online wizard. When you have finished creating your form they give you the code to place in your template or post like I have done here.

When a visitor submits a form, you receive the information they provided by e-mail, to whatever address you have specified during your form creation. It will even send a confirmation e-mail to the visitor, thanking them for there participation, if you desire. You have the option of redirecting the visitor back to your site when they have completed the form.

Mycontactform's basic service is free and allows you 20 form submissions a month, with unlimited form types. They offer a paid premium service that will give you unlimited submission and added features but even the free service gives you the features i've discussed. I really like what they have done and give them a five star***** rating.

Note: I did experience slight difficulties when I pasted the code to this post. I had a large space between the header at the top of the page and the beginning of the form. This is not a problem with the code mycontactpage provides but of how Blogger handles it. Blogger merely adds page returns whenever a line break occurs, as it should. I have found this problem any time I have tried to add a HTML table to a Blogger post, such as the above form.

To correct the problem you have to eliminate any line breaks within the code. After you have pasted the code to your post, look for any lines that begin with the symbol <. Place your cursor in front of that symbol and hit the backspace key to eliminate that line break. Do this for every instance that you see in the code that mycontactform.com has provided. Here is an example of what I mean. In the following code, the line you see in red needs to be backspaced to the previous line so that it is not a broken line. name="formid" type="hidden" id="formid" value="58111">input name="subject" type="hidden" id="subject" value="Site Survey"> <table width="350" border="0" cellpadding="0" cellspacing="0"

This is how the snippet of code should look after the line break has been eliminated:

name="formid" type="hidden" id="formid" value="58111">input name="subject" type="hidden" id="subject" value="Site Survey"><table width="350" border="0" cellpadding="0" cellspacing="0"

Technorati Tags: , ,

May 30, 2006

Slide Show


A slide show is a great way to share a collection of photos or graphics on your blog. The above slide show displays graphics I created for Poker Chaos, another blog of mine.

Slide.com gives you an easy way to upload and arrange your photos directly from your computer or the web, and its free. They also have some cool options for your slide presentation:
  • Sliding
  • Fading
  • Pushing
  • Spinna
  • 007
  • Shatter
A slide show could also be used to create a custom header for your blog by incorporating photos with a graphic of your blog name. Instructions for doing this in Blogger are included at slide.com. After you have created your slide show, the site gives you the code you need to insert the show into your template or post. Be aware that if you want your show to be in a post, or the sidebar, your going to have to change the height and width numbers in the code to a size that will fit.

For example the slide show at the top was originally 800x250 pixels. After inserting the code into this post I just changed the size attributes of width to 400 and height to 125, or half size. If I had not done this the image would have overlaped into the sidebar and made a mess. I also found that when I tried to save this post, Blogger popped up and told me there was a open HTML tag . In this case all I had to do was add the closing tag </embed> at the end of the code provide by slide.com and the problem was corrected.

Others sites with slide show software:

May 28, 2006

Free Content

The key to a successful blog is offering up good content. That can be a challenging task when your blog is new. It would be nice to have a staff of writers at your disposal to fill your blog with interesting reading, but most of us have to depend on ourselves to do this. There is however help available in this area. There are plenty of sources of what I call "free content"

You may have noticed the article of the day in Blogatech's sidebar. This is an example of free content available from The Free Dictionary. They will provide you with javascript code, you place this in your template and it generates a container of information that is updated daily. There are several topic you can choose from:

  • Word of the Day
  • This day in history
  • Today's birthdays
  • In the News
  • Quotation of the Day
  • Match Up
  • Hangman
All of these can be formated to better fit in with your blogs layout and color scheme.
If your have a kids oriented site, surfnetkids has free content also:
  • Daily educational quotations
  • Daily Factoid
  • Daily Chuckle
  • Coloring page of the day
  • Surfing the calendar
Another example of free content would be the scrolling news feed you see in blogatech's right sidebar. (see adding a news scroll to your blog)


Technorati Tags: , ,

Image Resizing

In order for your images to display correctly they have to be sized to fit in the area you want them located. Computer Image dimensions are expressed in pixels. For example, the images that you see in Blogatech's right sidebar have to be 150 pixels in width or less. This sidebar width restriction will depend on what Blogger template you have chosen. On a typical 2 column template the sidebar is a little larger, somewhere around 200 to 250 pixels wide. If you try to place a image that is wider than your sidebar container, the sidebar will drop to the bottom of the page.. It might display correctly in Firefox but when viewed in Explorer it will have dropped. ( see browser compatibility) The height of a sidebar image is not a factor you will need to worry about. Images that you place within a Blogger post are automatically resized when you select small, medium or large from Bloggers "add image" menu. Images placed out side your post in the sidebar or other area of you template will have to be sized manually.

PIXresizer is a handy piece of utility software that I developed for image resizing. It allows proportional resizing of all the major image types(JPG, JPEG, GIF, PNG or BMP). Feel free you use this utility to re-size all your blog images, remember to bookmark the site for future use.


Technorati Tags: , , ,

Add a "Bookmark this Page" Script

This script when pasted into your Blogger template's s sidebar will create a link that automatically opens explorers "Favorites" dialog box and enters your URL and site name for your visitor to bookmark. In Firefox, Netscape and Opera browers it will display "Bookmark Us! (Ctrl+D). Although its easy enough for a visitor to click on the favorites tab and do this himself. The link will serve as a reminder for them to bookmark your page which will increase your sites repeat traffic.
You will have to change the blogatech address and name which are the text shown in red to that of your site.(be sure to leave the quotation marks as they are.)

<script>

// (C) 2000 www.CodeLifter.com
// http://www.codelifter.com
// Free for all users, but leave in this header

// message to show in non-IE browsers
var txt = "Bookmark Us!"

// url you wish to have bookmarked
var url = "http://blogatech.blogspot.com";

// caption to appear with bookmark
var who = "Blogatech"

// do not edit below this line
// ===========================

var ver = navigator.appName
var num = parseInt(navigator.appVersion)
if ((ver == "Microsoft Internet Explorer")&&(num >= 4)) {
document.write('<A HREF="javascript:window.external.AddFavorite(url,who);" ');
document.write('onMouseOver=" window.status=')
document.write("txt; return true ")
document.write('"onMouseOut=" window.status=')
document.write("' '; return true ")
document.write('">'+ txt + '</a>')
}else{
txt += " (Ctrl+D)"
document.write(txt)
}
</script>

May 26, 2006

Technorati Tags

Technorati tags are catagories or subjects that you can add your post to. They are then indexed on Technorati's search engine along with other bloggers posts that are about the same or similar subject as yours. Why would you want to add tags to your posts? Simple, to generate additional traffic to your site. Here is Technorati's explaination of what a tag is:

What's a tag?

Think of a tag as a simple category name. People can categorize their posts, photos, and links with any tag that makes sense.
Where does the stuff on Technorati Tag pages come from?

The photos come from Flickr and Buzznet, two online photo sharing communities. If you'd like your photos to appear on our tag pages, join Flickr or join Buzznet and post your photos there. Just tag them and set them to be public and they'll appear on Technorati Tag pages.

The links come from web-based bookmark service Furl. If you would like to contribute links to Technorati Tag pages, you can join Furl and post some links. Again, be sure to tag them for them to appear here.

The rest of the Technorati Tag page is made up of blog posts, which come from you! Anyone with a blog can contribute to Technorati Tag pages. There are two ways to contribute:

If your blog software supports categories and RSS/Atom feeds (like Movable Type, WordPress, TypePad, Blogware, Radio), just use the included category system and make sure you are publishing RSS/Atom feeds and your categories will be read as tags.

If your blog software doesn't support categories or you're not sure, you can still participate. To associate a post with a Technorati Tag all you have to do is tag your post by including a special link in the body of your post. For example:
<a href="http://technorati.com/tag/"rel="tag">[tagname]</a>

The [tagname] can be anything, but it should be descriptive. Please only use tags that are relevant to the post. You do not need to include the brackets, just the descriptive keyword for your post. Just make sure to include rel="tag".

You do not have to link to Technorati. You can link to any web page that ends in a tag - even your own site! For example, these tag links would also be included:
<ahref="http://apple.com/ipod" rel="tag"><iPod/a>
<ahref="http://en.wikipedia.org/wiki/Gravity" rel="tag"><Gravity</a>

Once you have posted the tagged post, there are two ways to have your post included on a Technorati Tag page:

If your blog software is configured to ping Technorati, congratulations! You're done!
If your blog software does not support automatic pinging, or if you haven't set it up yet, or if you're not sure, you can manually ping us here. You might also want to configure your blog software to ping us automatically so you don't have to do that every time.

Your post should appear on the page in a few minutes (up to an hour during periods of intense activity). Thank you for helping to build the real-time web."

This may have been a imtimidating discription but don't panic, It's not as difficult as it may seems and I'm going to show you a easy way to create tags. Here is how I went about getting Blogatech set up for tagging.

First I went to Technorati and created a account. I was asked to create a profile by adding a photo of myself along with a short bio. I chose to skip these items. Then I
was prompted to "claim my blog". This is where I added blogatech's URL address. A brief description of this site and up 20 tags or keywords.

(Note: It would be wise to do some research at this point, spend some time and come up with a good description of your site. Create a list of key words. You will be asked many times for this information when you start submitting your site to search engines and blog directories. After creating, save these items to a word file where you can retrieve them when needed.)

I included this description:
Your source for info on Blogger, template mods, tips, tricks and blog tools. Blogatech walks your thru. the steps needed to create a unique and income producing blog. Want to know how something you saw on another blog was done, find out at Blogatech.

Keep your description brief as you are limited to 250 characters. I also entered these 20 tags after spending some time searching the popularity of certain keywords. you can do the same with this Key word Popularity Tool

Tags I added for Blogatech:
blogger, blogging, blogs, blog content, blog tools, blog design, blogger template, free blogger template, template hacks, blogger skins, graphic design, css, style sheet, html, adsense, corel draw, photoshop, writing, photography, make money online,

Once I had completed my account set up at Technorati I proceeded to add a couple selectors in blogatech's template. Again, selectors are placed in the stylee section of the template between these tags,<style type="text/css"> and the closing tag </style> These selectors define the font, size, and color of the Technorati tags. The second selector you see creates a one pixel solid line over the tags.

.technoratitag {
font-family: Arial, Helvetica, Sans-Serif;
font-size: 0.9em;
border-top:1px solid #777;
line-height: 1.5em;
color: #777;
}
.technoratitag_list {
border-top:1px solid #777;
}


Now that you have created your Technorati account, modified your template to format tags, the only thing left to do is start creating tags and adding them to every post you make. You have seen from Technorati's tag explaination that this is the code and format for a tag:

<a href="http://technorati.com/tag/" rel="tag">[tagname]</a>

Adding this code for every tag would be quite time consuming and a pain. Fortunetly several software developer have created Technorati Tag Generators. IF your using Firefox as your default browser then you can right click the menu at the top of this page labeled "Tag Generator" then bookmark it to your tool bar and click it whenever you need to generate a tag. You just type in the keywords you want to use separated by commas, then click "OK" and the code is displayed. Copy this code and paste it at the bottom of your post in blogger and your done.

Now for the bad news. I've had problems gettting Technorati to index my tags in the past. Your tags should be indexed within an hour but if your post is not listed at Technorati when you click on one of the tags you have added, then they are not being indexed. Make sure your tags are formated right, then try pinging Technorati. Pinging from Blogger is normaly automatic but you can send a ping directly from this page.this page. If that fails to correct the problem, contact Technorati support and let them know your tags are not indexing. They have always been very helpful and corrected any problems I've had.

Technorati Tags: , ,

Adding a "Link to us Banner"

Copy and paste the following code into
the side bar portion of your template
if you would like to link to
Blogatech with this button image




Result: blogatech

May 25, 2006

Adding Chat to your Blog

A chat box or tagboard for your blog will let visitors leave you messages or even chat with each other. Cbox is an example of one of the chat boxes that are available for you to add.








The Basic Cbox is free. They offer a premium service with more features that you can subscribe to for a small monthly fee.

The format can be set to fit your sidebar and the after selecting your preferred skin and size, you simply paste the automatically generated code into your sidebar. There are complete instructions on the site.
Other sites that offer chat boxes for blogs:

Technorati Tags: , , , ,

May 24, 2006

Visitor Tracking Tools

I wanted to be able to track visitors to blogatech, There are plenty of resources in this area that will let you analyze all sorts of information about your visiting traffic. My choice for this task was StatCounter, a free service that offers tracking options with these features:

  • Invisible or Visible Counter - your choice!
  • Custom Summary Stats based on all your visitors
  • Highly detailed Analysis of your last 100 pageloads
  • Manage multiple sites from one account
  • Email reports
Also lets you find out:
  • What keywords visitors use to find your site
  • Your most popular pages
  • Links used to reach your site
  • What countries your visitors come from
  • How visitors navigate through your site
  • ..and much more
StatCounter is very easy to use. If you want to utilize it with your blogspot hosted weblog, just follow a few steps:

1) Log in to StatCounter and create an account.
2) Answer a list of questions that helps StatCounter generate the code for your blog.
3) Insert the code they provide into your template where they show you.

Your ready to track.

You might want to research some of these other options. I know Site Meter is a popular tracking service:

Scrolling News Feed

Providing good content is the key to a successful blog. One of the ways I've found to do this is by adding a scrolling News Feed. I'm not a big fan of flash animation in blogs as it can be distracting to readers but I've found the additional content to be worth the distraction in the case of a news feed.

Ticker My Feed is a site that converts any RSS or Atom feed into a scrolling marquee. The size, color, style and subject can all be controlled from menus on their site. Articles can be tailored to whatever subject you want via a Google, Yahoo or even a blog feed. Here is an example using boing boing's Atom feed:


Boing Boing Winner of the 2005 bloggie best blog award




When setting up a news feed you enter the keywords you want to target articles pertaining to your blogs subject matter. Once you set the style and format of the feed, You preview your selections and copy the code that they provide.

Note: if your going to insert a feed into your side bar, make sure the width of your selected feed doesn't exceed that of your sidebar. In my case 150 pixels. Inserting items that are too big can cause the sidebar to drop to the bottom of the page. Especially in MS Explorer. (If your not using FireFox you really should try it.)

Technorati Tags: ,

Logo & Header

Note: (This post was created prior to Blogatech's facelift and the image is not what you see now but still some good info on how to create and place a background image in your header)

The logo for blogatech was created using Corel Draw, a vector based graphics program. Corel, is a professional tool with a large array of features that gives you the ability to manipulate shapes and text. Corel is not free but if your shopping for a professional drawing program, this is the one I use the most. Adobe's Illustrator would be my second choice but only because I've got more experience using Corel Draw. A complete explanation of Corel's capabilities is way beyond this scope of this post. I just want to give you a basic understanding of how the logo on this page was created.

I started with a bitmap image of a famous Leonardo daVinci drawing that you see on the right.

Then I created a outline of the main drawing shown in da Vinci's notes which comprised of a circle and a square combined.

I also created a copy of this outline and gave it a fill color of black to use as a slightly offset background which gives this shape a three dimensional look.

Then using a feature called Powerclip I placed the original da Vinci picture inside the containers outline. In Corel, objects can be stacked in layers so that the object on top overlaps the object on the bottom. After putting the picture inside the white container, I then placed it on top of the black outline object that was created earlier. This gives the logo a black offset outline called a drop shadow. Drop shadows create depth so the design doesn't look so flat. I also created a transparent square with a black outline and placed that on top of the square portion of the design so as to give the logo even more depth.

Now for the text. A large part of Corel Draws abilities are those associated with creating and altering text. Once the font was selected I had the ability to change the size and color of the text as well as the fill color. I choose a thin black outline with a burnt orange graduating to white fill color. I also created a copy of the word "Blog" and gave it a black fill which I again placed behind and slightly offset to give the text depth. Finally I created the name "blogatech" in solid black and placed this text on top of the design. With the logo complete I moved on to creating the complete header image you see.


I started by making a rectangle the approximate size of the header that I wanted. The header size is dependant on the format of your template and what browser your viewing it with. I started with a rectangle 720 pixels wide and 200 high. Just to give you an idea of size, if your monitor resolution is set to 1024x768 then the entire width of the screen you see is 1024 pixels making my experimental image width about 3/4 of that of the screen. I then placed my logo into this box and added a couple of color coordinated lines top and bottom to frame the text introduction I planned to add using HTML. Small text in images are just not as sharp as that created with code.

After I had the layout and size compete I changed the file from a .cdr file which is Corel's standard file format into a .jpg image file that could be uploaded to the internet. I did this via Corel's "Export" command. I then went to Image Shack, a online image hosting service, where I uploaded my newly created .jpg file. Image shack then gave me the URL address where my picture file is stored:

http://img99.imageshack.us/img99/5553/bt1gl.jpg

Just a note here: BACK UP YOUR TEMPLATE. It's easy, just go to your dashboard, select the Template tab and place your cursor in the box where your template code is. Right click your mouse, cursor down to "Select All" and click it. Then right click again and select copy. Now all you have to do is paste all this code into a word document or to notepad as I do. Name the file and indicate the date and time. Now you have a back up just in case one of the changes you make to your template makes your blog appearance into a scene from the exorcist. Mark my words, its going to happen and your definitely going to wish you had followed my advise.

In order to get my Logo image to display I had to place it into the style section of the template as the headers background. The style section controls the attributes of the elements in your blog, such as the size, color and style of fonts. It also controls how the header, body, footer, images and links appear. the style section makes up a large part of your template and starts with the tag:
<style type="text/css">
and ends with the closing tag:
</style>
Within these two tags I found The "#header" item which controls how the header of blogatech appears. I needed to add a couple of lines of code so my image would display correctly. You will remember that the image I created was 720 pixels wide and 200 pixels high. You can see from this code below that the width is set to a percentage of the screen resolution (76%) and is not a fixed size. Again, based on a screen resolution of 1024x768 the image width should be close. I could and eventually did have to resize the image to get the exact placement I wanted.

#header {
width:76%;
margin:0 auto 0 auto;
padding-top:0px;
border-bottom:1px dashed #ccc;

There is no defined height in the header style so I added the line of code you see in red to set the height. I also added the code in blue which sets the background of the header to be that of the Logo I created.

#header {
width:100%;
margin:0 auto 0 auto;
padding-top:0px;
height: 200px;
background: url(http://img130.imageshack.us/blotechlogo.jpg) no-repeat;
border-bottom:0px dashed #ccc;

I also changed the border-bottom from 1 to 0px which effectively makes the original dashed line invisable. I could have just deleted that line of code but changing the size to "0" left me with an easy way of putting the dashed line back in at a later time if I desired.

If you would like to learn more about CSS (Cascading Style Sheets), check out the links in the drop down menu at the top of this page.

Technorati Tags: , , ,

Deleting the About Me Profile

Deleting Bloggers seemingly ever present "About Me" Profile container was next on my list of things to do. Some would say that by providing a profile of yourself you build confidence in your readers but I decided to for go any confidence building in exchange for the originality of a blog without the profile container. Besides, I could always create a post introducing myself along with my scholastic and professional accomplishments at some later date.

So to delete this section of the standard Blogger template just find this little snippet of code towards the end of your template. Highlite it with your mouse and hit the delete key.

<!-- Begin #profile-container -->

<$BlogMemberProfile$>

<!-- End #profile -->


You will also see quite a few profile selectors in the style section of your template . You can delete these if you want to clean the template up but I just left them. I might someday get a wild hair and decide to put the profile back in.

May 23, 2006

Text Links

I chose to add a few text links(hyperlinks) below the dropdown menus of blogatech by adding the following code into my template:


<a href="<$BlogURL$>">Home</a> |
<a href="http://imageshack.us/">Image Hosting</a> |
<a href="http://www.google.com">Google Search</a> |
<a href="http://www.computerhope.com/htmcolor.htm">HTML Color Code</a> |

The basic line of HTML that creates a text link is:

<a href="THE URL ADDRESS">TEXT DESCRIPTION</a>

The area in red is where you would put the address you want visitors to be taken to when they click on the text that is displayed. The area in blue is where you enter the actual text you want to display for that link.

You can also hyperlink to a paticular post in your blog by using what Blogger calls there "Permalink". This is the URL address of where the post resides. For example the address or Permalink for this post is:

http://blogatech.blogspot.com/2006/05/text-links.html

I could add this address in the red area of the above code and when you clicked on the words "TEXT DESCRIPTION" you would be taken to this post.

The text font, size, color and other properties of these text links in blogatech are controlled by these selectors in the style section of the template.

a:link {
color:#c60;
text-decoration:none;
}
a:visited {
color:#7E3817;
text-decoration:none;
}
a:hover {
color:#c60;
text-decoration:underline;
}
a img {
border-width:0;
}

a:link is the selector that defines the color and decoration of the text link before it has been clicked on.

a:visited is the selector that defines the color and decoration of the text link after it has been clicked on.

a:hover is the selector that defines the color and decoration of the text link when your cursor is placed of that link

a img is the selector that defines if a border should be created around images that have been hyperlinked.

May 22, 2006

Navigation Bar

Blogger standard templates automaticly place a navigation bar at the top of your blog. I find it to be a great tool that helps bring traffic to your blog with surfers using the "Next Blog" button as well as giving your visitors an excellent search tool for finding items on your site as well as the Web.

The only change I made for blogatech's Nav Bar was the color, from the default setting of Blue to gray. Some people have asked if its possible to delete the Nav Bar. It is, but I dont recommend doing so. Being a possible violation of Blogger's Terms and Conditions it could result in Blogger closing down your account, although I've never heard of anyone losing their blog because of it.

If you are dead set on getting rid of the Nav Bar. Then just paste the following code in the style section of your Template which begins with <style type="text/css"> and ends with </style>

#navbar-iframe /* Indicating to the Navbar ID */
{
height: 0px; /* Reducing the height of the Navbar to 0px */
visibility: hidden; /* Reducing the visibility to hidden */
display: none; /* Remove the display option(indirectly hiding it */
}


This is the latest code needed to hide the Nav Bar in the New Version of blogger. It works in both Classic and Layouts type templates.

May 21, 2006

Drop Down Menus

The first step to creating the dropdown menus seen at the top of this page was to add what CSS calls a "selector". this will define the properties of the dropdown. The code below was added to the style section of the template between the:
<style type="text/css"> tag and the </style> closing tag.

.dropdown {
font-family: arial;
font-size:10px;
font-weight: 500;
color: #000000;
width:140px;
background-color: #FFFFFF;
}

Then for each of the dropdown menus the following code was added below the header with the descriptions and links that you find at the top of the page. (Tip: you can view the page source and template with the Ctrl+U keys. You should be able to find the location of the blogatech dropdowns this way.)

<form name="linksmenu">
<select name="url" size="1" class="dropdown" onChange="location = this.options[this.selectedIndex].value;">
<option selected> DISPLAYED TITLE </option>
<option value="ADDRESS OF LINK ONE ">LINK ONE</option>
<option value="ADDRESS OF LINK TWO">LINK TWO</option>
</select>
</form>

You can add as many option lines as you want and you will have to change the above to the URL link and discriptions that you want.

The above code will create this dropdown:



Unfortunitly you can not change the standard gray color of the arrow or the outline color of the dropdown but you can change the background color by simply changing the color# in the background line of the .dropdown selector. You can find a list of HTML color codes here.

Selecting a Template

The next thing I did from the dashboard was to select one of Bloggers standard templates. In my case I selected Minima. It really doesn't matter which one you select at this point because you can change it at any time.

Having just created your blog you are automaticly taken to the Posting Tab of bloggers Dashboard. I just make a quick title to launch my new blog, such as "A blog is born" and a paragraph in the composition box just so Blogger won't come back and say " you have to make a post first" when I try to view my blog.

At this point you have a standard completed blog. The problem is that it looks like every other blog on the face of the internet that has the Minima template. Here is where the fun comes in. Changing the template to create the look and style that is uniquly yours.

A template is the HTML code and CSS style sheet that orchestrates the look and function of your weblog. If you were competant in the use of HTML you could build a template from scratch but for most of us, myself included we just want to learn a few tricks that will allow us to modify our templates to make them unique.

You can start with a standard Blogger template or one of the many other templates or "skins" as they are sometimes called. The basic layouts are either two column or three column. The standard blogger templates are all two column, although they can be modified to accommodate a third column you are better off finding a basic three column template and working from that. Here are just some of the sites that offer blogger templates for free.

Or here if you want to copy the template I started with:
Once you have found the template you wish to use, highlight the entire text in the template file and copy it. Then go to blogger and log in. From the Dasboard, follow these simple steps to change your template:
  1. Select the radar icon under “change settings”
  2. Select the Tab at the top of the page labeled “Template”
  3. Select the entire text in the box and delete it.
  4. Paste the copied template text into the box.
  5. Click on “Save Template Changes”
  6. If the changes were saved sucessfully, click the black "Republish Button"
  7. Your done.


Go to next post in this series

May 20, 2006

Name your Blog

Creating a Blog for the first time and getting it set up the with a unique style can be a very frustrating endeavor. It's my hope that by documenting the steps I used in the creation of this blog I can provide answers to a lot of your questions, making building and customizing your first blog much easier.
The first order of business was to go to my Blogger "Dashboard" this is the control panel from where all your blog changes will be made. If you don't have a Blogger account set up yet, don't worry its very simple and the best part is that it's free. Once your account is open just log in to the Dashboard with your User Name and Password and click the "Create a Blog" button. which takes you to step two.

Choosing a name for your blog

This is a very important element in creating a blog. You want something people can remember, is creative and of course, available. You want a name that says something about the subject your will be blogging about. Blogatech, a play on the word Architect is obviously going to be about techniques for blog design and creation. The firsts item you see is "Blog Title" this is the name that will be displayed in the very top left corner of your browsers window. In my case I chose blogatech. The next item is the URL or address that will be used to access your blog. In the case of a free blogspot account your URL will be what's referred to as a Sub-Domain (example: http://yourname.blogspot.com). Under this item there is a setting that lets you check the availability of a desired name. It will also give you suggestions if the name you want is taken. Also try other options if your name is taken. For example my original idea blogitect was not available so I came up with blogatech. Had that been taken blog-a-tech would have been a good option. My final address results were http://blogatech.blogspot.com and this is the information I will use any time I'm asked for my site URL.

There are quite a few free hosting services like Blogspot that serve up your blog under a sub-domain ( which is a great way to start blogging. These are the top sites offering free weblog software and hosting with sub-domains:


  • Blog Spot, for weblogs created with blogger.
  • Wordpress
  • Xanga
  • thebloghoster
  • Journal Home
There are plenty more and new services are popping up all the time. I am big Blogger fan do to the ability to modify or create your own template, so blogspot is my choice. I have used Wordpress and although its a clean design and easy to use the free hosting platform does not allow you to alter the standard templates. If your like I am and want to hotrod your template a free account with wordpress is going to be a disappointment for you. If your your a less adventurous type and just want a quick, easy and aesthetically pleasing blog, then wordpress would be a good option. You can jump right into writing that novel with out have to learn any new tricks.


If your goal is to win a bloggies awards and expect to get a huge amount of traffic like boingboing then your going to want to purchase your own domain name. I should say rent it because you will have to continually re-new the rights to your domain name Again your going to have to do a search to see if your desired name is available and you can do this through the same site you use to handle you domain registration. You can shop around for the best deals but you will probably find it from one of these sites:

  • GoDaddy.com
  • www.networksolutions.com
  • Register.com
  • Aplus.Net
  • www.hostway.com
  • www.mydomain.com

Using your own domain and outside hosting service would require that you select the advanced set up feature at this point and is beyond the scope of this article.

Go to next post in this series