unlockdomain

How to Change Domain Registrars

[Maybe this article should be entitled:  How to Say Goodbye to GoDaddy.com]

Okay, so I finally got fed up enough with Bob Parson’s public obsession with pornography that I decided I can no longer contribute to the pervert’s bottom line by having my domain names registered through GoDaddy.com.  At least a year ago I started using Netfirms.com to register new domain names ($6.99 per year), but now I also want to transfer the domains I registered with GoDaddy.com so I can manage them with a company that doesn’t unabashedly use sex to sell their services.  How do I transfer the domain names from GoDaddy.com to Netfirms.com?  I’ll show you.

Initiating a transfer begins with logging in to the account from which you currently manage your domain name.  In my case, I go to GoDaddy.com and login.  Then I click on the domain that I want to transfer to bring up the domain manager page.  Included in the Domain Information section is a line that shows the status of the domain in regard to its being locked.  If the domain is locked, click on the Manage link, and unlock it.  Uncheck the Lock domains checkbox, and click Okay.

Unlocking the domain takes a few minutes to process.  Wait a few minutes after you’ve initiated the unlock process.  Then refresh the page.  You should see the status changed to Unlocked.

Next, we have to obtain an authorization code from GoDaddy.com.  This is done by clicking on the Send by Email link next to the Authorization Code field (visible in the picture above) under the Domain Information.  The authorization code is emailed to the address you have listed for the Administrative Contact corresponding to the domain.  Obviously registrars aren’t very motivated to be prompt about sending an authorization code so you can transfer your domain management to a competitor.  It’s likely that you won’t have the authorization code instantly after you request it.  However, registrars are required to send the authorization code within five days of it being requested by a domain owner.

Once you’ve received the authorization code, you need to login to your account with the new registrar.  In this case, I’m using Netfirms.com.  After logging in to my account, I go to Domains->Domain Manager.  Then I click the Add button on the right hand side of the page.

After clicking the Add, you’ll be brought to the the page that allows you to set up a new domain.  Since you are transferring a domain in this case, you click on the Transfer tab.  Then you enter the domain name for the domain you want to transfer to the new registrar.  This informs the new registrar that you are intending to transfer your domain to their registration database.  They can then coordinate with your former registrar to hand off the domain.

Normally you’ll have to pay the yearly registration fee ($6.99 in this case) to the new registrar when you make the request to transfer your domain.  However, some registrars have promotionals to attract customers from their competitors, and they’ll offer one year free if you are transferring from a competitor.  Netfirms apparently doesn’t offer that right now, so I had to pay the fee, which is rather insignificant anyway.

Once you tell your new registrar that you are transferring your domain, you will likely receive an email telling you how to complete the process.  I received an email from Netfirms.com letting me know that I need to login to my account and complete the transaction.  The email also gave me the confirmation key that I need to enter in my Netfirms.com control panel, along with the authorization code I requested from Godaddy.com, to complete the transfer.

Following the instructions I received from Netfirms.com, I logged into my control panel, then clicked on Domains->Domain Manager.  The domain I just requested to transfer was now listed among the other domains I have registered through Netfirms.com.  I clicked on the domain name, theonlinemechanic.com, and it brought me to the following screen.

Here is where I enter the confirmation key I got from my new registrar (Netfirms.com) along with the authorization code I got from my old one (GoDaddy.com).  Once I enter this information and click the Confirm button, the process (at least the steps I have to take) is complete.   Usually the transfer handoff from the old registrar to the new one is completed within one day.  You can check back with your new registrar to make sure the change has been completed.

Introduction to Website Promotion

This article was written by Richard Robbins

The internet is filled with ghost towns.  Millions of websites sit alone, isolated from civilization for various reasons.  Some of these failed experiments are the results of half-hearted efforts by authors and designers to present an idea or product to the world.  Many don’t offer much reason to visit them and probably should be ignored.  However, many of these internet  ghost towns are carefully constructed, appealing, and helpful sources of knowledge that are simply left off the internet superhighway.  A worthwhile website deserves at least as much effort to promote it as was put in to building the site.  Regardless of your reason for wanting more people accessing your website, the following principles are fundamental for doing website promotion.

Continue reading

Using Your Website Statistics to Prioritize Your SEO Efforts

The process of determining how to drive targeted search traffic to your website involves understanding your market and optimizing your site to reach out and corral potential customers.  For brand new websites that are starting fresh , the slate is clean.  With no links pointing to a new site and no history of showing up in the search engines, there is no data available to steer your optimization efforts.  However, for sites that have at least a limited presence on the web, webmasters can see a significant improvement in search engine traffic by evaluating their existing standings.  The best starting point is your website stats.

Eight Years Ago
Eight years ago my brother and I started our first internet business, a website selling camping equipment – OuterSports.com.  We used a simplified shopping cart system for newbies.  After a few months of building links to our new site, we started getting orders.  The shopping cart system had a valuable statistics module that allowed us to see the search terms people were using to get to our site.  The stats program also associated the referring search engines with the search terms that were being used to send people to our site.

While browsing through these statistics, I noticed that there were certain search terms that we were apparently showing up fairly highly for in Google search results.  At that point I didn’t fully understand the importance of using our marketing keywords (we really didn’t even sort out what our niche keyword terms would be until later) in the anchor text of the links we were getting, it was obvious that Google’s algorithm had a natural preferences for some of our product pages over others.  One such keyword term was “polypropylene underwear”.  Just prior to adding that product to our site, we didn’t even know what the stuff was.  Our supplier listed polypropylene underwear in their catalog, so we added it to our site.

I did a Google search to find out exactly where we were in the search results for the term “polypropylene underwear”.  We were on the second page – #12.  After reading some more detailed explanations of how Google’s search algorithm worked, I thought to myself, “Well, if we’re #12 for ‘polypropylene underwear’ without even intentionally optimizing our website (internal and external links), it shouldn’t take too much to get into one of the top positions for that term.”  I created some links to our polypropylene underwear category page from a few of our other product category pages and from some product pages, and I made sure to use the term “polypropylene underwear” in the link anchor text.  Surely enough, within a couple weeks, we had climbed up into the top five for that term.  Shortly afterwards I turned the site’s maintenance over to my brother so I could work on a different site, but he continued to use the same strategies, securing more external links as well, to achieve the top spot in Google for that particular term.

The Moral of the Story
This article is not so much about how to gain a top spot in Google for people searching for underwear as it is about building upon the momentum Google has already given your site.  One thing I’ve found with regard to my ecommerce websites’ interaction with Google’s search algorithm is that some pages have a natural tendency to move toward a position near the top of Google’s rankings, but just out of reach of the majority of the market, who normally exhaust their clicks on the first five search results.  By examining your stats, you can easily find what search terms Google thinks your website naturally solicits for high placement, and you can oftentimes quickly increase the amount of targeted traffic your site gets by focusing some attention on those intrinsic strengths.  A thorough review of the search terms for which your are receiving relatively moderate traffic will show you some diamonds in the rough.  Many of those also-ran search terms can be turned into medalists with much less effort than search terms for which your site currently ranks outside of the top 100.

Show Me the Stats
If I’ve convinced you of the efficacy of this strategy, you may be wondering where to get access to the magic information.  Most website hosts give their account holders some form of access to web statistics.  Web servers log visitor activity in a standard format that can be parsed and presented logically by a number of website statistics programs (some free, some not).  Google has made a lot of webmaster tasks easier by offering Analytics.  To use Google Analytics, you simply insert code script into your site’s code (typically it goes into a sitewide header or footer file so that it exists on each page of your site).  With the script in place on your site, you can use the Analytics control panel to find the information I’ve been discussing.

Initially, I’d recommend beginning your campaign to move also-ran search terms to the top of the search engines by finding one or two search terms and focusing your efforts on them for a couple weeks.  Once you’ve achieved the results you want, you can move on to other similar terms.

If you consistently use this method for creating synergy between your website and Google’s search algorithm, you should find it a good way to provide good quick incremental gains for your online business.

download-font

Installing a Font For Use In Photoshop

Word processing and graphics program come with a selection of fonts that give you some flexibility for displaying text.  The default fonts that can be used with programs such as Microsoft Word or Adobe Photoshop are determined by your operating system.  Windows XP, for example, includes a few dozen fonts ranging from blocky athletic fonts to scripty craft fonts to symbol fonts.  Many other fonts are available besides the most common ones that are packaged as part of an operating system.  Typically these fonts have .ttf, .otf, or .fon extensions.  To see what’s available, you can do a web search for “free fonts” , “download font”, or something similar.  When searching for fonts, you’ll find that, besides the free ones available, there are many available for purchase as well.

Continue reading

Completed Template

Tutorial – How to Create a Blogger Template Using Adobe Photoshop – Part 2

This tutorial is the second part of a two part tutorial on creating a Blogger template.  The first tutorial covered how to design a template in Adobe Photoshop.  This tutorial covers how to implement your new Blogger template.

Completed Template

Open your template design in Photoshop.   Hide the header image by clicking on the eye next to the header image layer in the Layers Panel. 

Layer Visibility

You are left with the background image for your blog.  Go to File>Save for Web & Devices.  Choose JPEG for the file type and Very High for the quality.  Click Save to save this image on your computer.

Save for Web

Now you need to save the header image as its own file.  Turn the visibility of this layer back on.  Make sure the header layer is selected, draw a rectangular marquee around the header image and press Ctrl+C to copy this image.  Open a new document in Photoshop and paste the image in the new document.  Save this image for web or device just as you saved the background image.

You will need to find a place to host your images online.  I use Photobucket.com because it is free to create an account and upload images.  After you have created an account with Photobucket.com select Reduce to: 1 megabyte file size and click Choose files.

Upload Image

You can browse to where your background and header images are saved on your computer.  Select these files and click Open to upload them to Photobucket.  You will now see these images in your Photobucket photo gallery.

Photo Gallery

Sign In to your Blogger account and select the blog you would like to change.   Select the Layout tab and choose Pick New Template.   Select the Minima template and click Save Template. 

Pick New Template 

Now click Edit HTML under the Layout tab.  We will be changing some HTML code.  If you make a mistake during this process just reselect the Minima template to restore the template to this point.  It is a good idea to save changes to your template as you go through these steps.  Pull up your blog in another browser and refresh it F5 each time you save your template so you can see the changes you make.

Press Ctrl+F on your keyboard to pull up the Find window.  Type the word body and press Enter twice.  The second “body” in the document should be the body tag which looks like this:

body {
  background:$bgcolor;
  margin:0;
  color:$textcolor;
  font:x-small Georgia Serif;
  font-size/* */:/**/small;
  font-size: /**/small;
  text-align: center;
  }

Change the code to look like this:

body {
  background:$bgcolor;
 
background-image: url(‘the address for this image’);
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  margin:0;
  color:$textcolor;
  font:x-small Georgia Serif;
  font-size/* */:/**/small;
  font-size: /**/small;
  text-align: center;
  }

You will find the address for the background image by hovering over the image in Photobucket.  Click in the field next to Direct Link and press Ctrl+C to copy the address.  You can then paste the code for the address where it goes in the HTML.

Direct Link

Now add the image for the header in the header-wrapper.  Your code should look like this.

#header-wrapper {
  width:660px;
  margin:0 auto 10px;
  border:1px solid #000000;
  background-image: url(‘the address for this image’);
  background-position: center;
  background-repeat: no-repeat;
  }

Your blog should now look like this:

Stage 1

In the next step you are going to add backgrounds to the text.   Toward the top of the HTML code there is a section called  /* Variable definitions.  Inside this section is where all the fonts and colors in the blog are controlled.  Here is an example of the code you will find:

<Variable name=”bgcolor” description=”Page Background Color”
                   type=”color” default=”#fff” value=”#ffffff”>

This code tells you that the Page Background Color is being defined here.  This variable may also be used to define other items on the page that are the same color.  These will all be shown in the code as $bgcolor.  The value is a # followed by a color code.  We are going to change the fs to zeros.

<Variable name=”bgcolor” description=”Page Background Color”
                   type=”color” default=”#000” value=”#000000“>

Changing this code changes the background color from white to black.  Now we are going to add the code background:$bgcolor; to four tags:
#header h1
#header .description
#main-wrapper
#sidebar-wrapper

An example of adding this code is shown below:

#header h1 {
  margin:5px 5px 0;
  padding:15px 20px .25em;
  line-height:1.2em;
  text-transform:uppercase;
  letter-spacing:.2em;
  font: $pagetitlefont;
  background:$bgcolor;
  }

This is how your template should look at this point.

Stage 2 

You can make additional changes to your blog template if you desire by adjusting the colors in the variable section, or adjusting the HTML code further if you know how.   You can find the color for a particular color at the bottom of the Photoshop Color Picker Palette. 

Color Picker

In addition to the changes covered in this tutorial, for this template I added padding to the sides of the sidebar and main sections and made additional color changes to the text.  This is the final template.

Final Template

Final Template

Tutorial – How to Create a Blogger Template Using Adobe Photoshop – Part 1

This tutorial goes through the process of creating a Blogger template.  Although these steps are catered towards creating a specific theme, the lessons in this tutorial can be used to create a wide variety of templates.  Have fun getting creative with your own blog!

Final Template

Create a new document in Photoshop using these settings.  Width 1440px, Height 720px, Resolution 72 pixels/inch.  Start with a transparent background.

New Document

Creating an appealing background is key to a great looking blog template.  For this template we will use 3 layers for the background.  First, select the foreground color by double-clicking on the foreground color box.  The Color Picker Pane will pop up allowing you select black.  Now select the Paint Bucket Tool located in the Tool Panel and fill your new document with black paint. 

Foreground Color

Color Picker Palette

Create a new layer by clicking on the second icon from the right in the bottom of the layers panel. 

New Layer

We are going to add a gradient to this layer.   Right click on the paint bucket tool in the Tool Panel and switch to the Gradient Tool.  In the Gradient Tool Bar select Black, White and Linear Gradient. 

Gradient Tool

Gradient Options

Zoom out (Ctrl+-) to 50% and maximize your document.  To apply the gradient, click below the image and drag upward beyond the top of the image.  Hold the Shift key down as you do this to make the gradient straight.

Apply Gradient

Now make sure the gradient layer is highlighted and change the opacity to 43%.  The highlighted layer will be blue in the layers panel.  The Opacity slider is in the top right of the layers panel.

Opacity Slider

Lowering the opacity of the gradient layer will allow the black layer to show through softening the gradient.  Your document should now look like this.

Background with Gradient

Now we are going to take a picture of a football and use this as a background image.  I chose an image for my background that has a large file size.  By doing this, I will not have to enlarge the picture causing it to pixelate and can instead maintain the original picture quality.  This image is 1800px x 1174px.

Football Image

Open the image as a new document and extract the football from its background.  There are many selection tools that can be used for extracting items.  In this case, I used the Magnetic Lasso.  This tool works well for this example because there is a big contrast between the football and the background in most of the image.  You can find this tool in the Tool Panel by right clicking on the lasso tool.

Magnetic Lasso

Click around the football until the football is selected.  You can tell the football is selected because it will have alternating black and white dashes around the outside. 

Magnetic Lasso

Right click on the image and choose Select Inverse.  The dashes will now be around the white background.

Select Inverse

Press Delete.  Only your football should remain.  At this point you can touch up the edges if necessary with the eraser or paint tools.  Now highlight the football by drawing a Rectangular Marquee around it and copying it Ctrl+C.

Only Football

Create a new layer in your original document and paste the football in it Ctrl+P.  If your image is too big or too small you can transform it by pressing Ctrl+T.  Position the football in the middle of the document and change the opacity of this layer to 21%.  Your image should now look like this.  Your background is complete.   

Background

To add the smaller images to this template we need to place Guides on our document.  Guides are temporary lines you can use to line objects up in Photoshop.  Your document will be more visually appealing if objects on the template are exactly lined up.  To add guides we should first make sure rulers are visible across the top and down the side of our document.  Go to View in the File menu and make sure there is a check next to Rulers.  If rulers are present you can click on the ruler and drag a guide to where you need it to go.  If you would like to be more precise about placing your guides go to View>New Guide and specify where you would like the guide to be.  If you select View>Snap To>Guides, when you place object close to the guides Photoshop will automatically line the object up with the guide for you.  For this example I placed guides horizontally at 1.15in, 3.15in, 5.15in, and 7.15in, and vertically at 2.5in and 17.5in.

New Guide

Now we are going to add four small images down both sides of our template.  Depending on the type of blog you are trying to create, you can use images such as family pictures, product images, etc.  Since this is a football blog, I will be using football pictures.  I found these images online by doing an image search on Google.  Google is a good place to find images, but be careful not to use images that are copyrighted unless you have permission.

For this layout I will need eight pictures.    Find the images you want to use and open them in Photoshop.  Use the Rectangular Marquee Tool to draw a square around the portion of the image you want to use.  Hold the Shift key down as you draw your square to make sure your marquee is a square instead of rectangular.

Quarterback

Press Ctrl+C to copy the selected portion of the image.  Open a new document in Photoshop and press Ctrl+V to paste the selected image into the new document.  You will notice that when you open a new document in Photoshop after copying an image, Photoshop automatically changes the size of the new document to match the size of the copied material so you don’t have to worry about sizing issues.

Go to Images>Image Size.  We want to standardize the size of these images.  Make sure Constrain Proportions is selected and enter the width as 121 pixels.

Resize Image

Use the rectangular marquee tool again to select the image.  Click on your template and press Ctrl+V to paste your image.  Photoshop will automatically put this image into a new layer.  Position your image up against the guide lines as shown and repeat this process until all eight images have been added to your document.

Images

Hide the guides when you are done using them.  Do this by going to View>Clear Guides.  Your document should now look like this. 

Small Images

We are going to frame the images on each side of the template with a black border.  To do this we will create a black rectangle behind the images.  Since we want the images to be visible on top of the new shape, we need to create a new layer below the image layers.  In the Layers Panel, click on the large football background image.   Add a new layer and select this new layer.  Use the rectangular marquee tool to draw a rectangle.  Use the arrow keys on your keyboard to center the rectangle around the images.  Select the Paint Bucket Tool from the Tool Menu and fill the area in the marquee with black.

Black Marquee

Right click on the layer with the black rectangle in the Layers Panel and choose Duplicate Layer.  Use the Move Tool to move the new rectangle behind the second set of images.

Duplicate Layer

The last step for creating our template is to find an image to use as the header background.  Again find a large image and use the rectangular marquee tool to select a portion of the image.  In the Marquee options menu select Fixed Size next to Style and set the size to Width: 700px, Height: 105px. 

 

Marquee Options

Copy the selected image and paste it into the template in the middle towards the top.  Your template design is now complete.

Completed Template

Continue with the second portion of this tutorial to learn how to use your new template for a Blogspot.com or Blogger.com blog.

bloggerlayoutselect

How to Install a Blogger Template

This article was written by Richard Robbins 

While Blogspot’s default themes are nice enough, most bloggers would rather customize their blogs to accurately represent what they’re blogging about.  Fortunately, the Blogger control panel offers a way to quickly install Blogger templates.

Finding a Blogger Template
There are many web sites that offer free or paid Blogger Templates.  WebsiteTemplateDatabase.com offers a significant variety of Blogger Templates.  Performing a search for “blogger templates” will turn up hundreds of web sites that you can browse to find a template.

Blogger templates typically come in the form of XML files.   Sites that offer Blogger templates normally have a download link that will allow you to save the template on your computer.  After you have saved the template XML file, installing a Blogger template involves following these steps:

1) Login to your Blogger account.  If you don’t yet have a Blogger account, you’ll need to create one.  Blogger accounts are free and only require an email address to get started.

2) Click on the “Layout” link corresponding to the blog for which you want to install a new template.

3) From the Layout tab, click on the “Edit HTML” link.  This will take you to the screen that allows you to upload the XML file from your computer that represents the Blogger template you’re installing.

4) Click on the “Browse” button at the top of the page.  Using the browse window, find the XML file for your new template.  Select the XML file, and click “Open”.  The browse window will close.  Now click “Upload” to install your new template.

5)  If your new template was installed without any problems, you will see a message that says “Your changes have been save.” Followed by a link to view your updated blog.  Click on the link to verify that your new template is working the way you expect it to.

Using HTML Attributes

HTML tags provide the foundation for web page design.  To provide more flexibility with HTML design, attributes have been defined for HTML tags to alter the behavior of any particular HTML tag.  There are many instances while designing a web page when you will want to change the default behavior of the tag.  For instance, you might want to change the background color of the whole page or some section of the page.  You might want to change the alignment of a section of text or apply a unique style to a tag’s representation.  There are many instances when you would want to identify an HTML tag by giving it a name to identify it so that it can be referred to elsewhere.  Some tags, such as the one used to present an image (<img>) don’t do much of anything without having at least one attribute defined.  In the case of the image tag, you would need to have an attribute that tells the browser where the find the image to be displayed.

Some Examples of HTML Attributes
Using bgcolor and background with the body tag
A very visible example of the effect of an attribute used in an HTML tag is changing the background color or image for the entire body of a web page.  Browsers understand that the contents of the <body> tag will be displayed on the main part of the web page.  By default, the background used by browsers when they encounter the <body> tag is white.  If you want a background color other than white, you would use the bgcolor attribute.  The following tag changes the background color of a web page from the default white to gray:

                <body bgcolor=”gray”>

If you want to have an image comprise the background for a web page, you could use the following code:

                <body background=”/images/background.gif”>

This example assumes that you have a folder on your web server called images, and that inside that folder there is an image named background.gif.  In the case of a background image, if the image isn’t large enough to fill the entire background of your web page, the browser will repeat the image vertically and horizontally to fill the background.

Linking using the anchor tag
The world wide web’s fundamental usefulness hinges on its ability to link documents, providing web users with a quick connection from one page to another related page.  Linking documents in HTML is done using the anchor (<a>) tag.  The anchor tag by itself doesn’t tell the browser where to link.  Instead, you have to include the href attribute as in the following example:

                < a href=http://www.oursponsorswebsite.com>Visit our sponsor</a>

This piece of HTML code tells the browser that the text “Visit our sponsor” is the anchor text for a link.  When the user clicks on the anchor text, he is taken to the url www.oursponsorswebsite.com.

Displaying a picture using the image tag
HTML pages would be pretty boring without the use of images.  The need to tell the browser where to find an image is a good example of how to use HTML attributes.  Images are included using <img>.  Similar to the anchor tag example above, using the <img> tag alone wouldn’t suffice.  The image tag attribute “src” is required to tell the browser where to find the image to be displayed, as in the following example.

                <img src=”/images/logo.gif” width=”150”>

This block of code tells the browser to place an image in the document.  The browser is instructed to get the logo.gif image from the images folder located in the top level folder for the document.  You also notice a width attribute defined in the tag.  This constrains the image to be 150 pixels wide.  Conveniently, the height of the image is constrained proportionally when the width attribute is defined.

HTML Attributes Reference
Don’t feel like you have to memorize all the HTML tags and their corresponding attributes.  Instead, it is convenient to access a reference when trying to determine which attributes can be used with particular HTML tags.   The official definition for HTML tags and attributes can be found at www.w3.org.  You can also find other resources for understanding the same information by using a search engine to search for “html tags” or “html attributes”

Beyond HTML Attributes
In the mid-1990’s, a methodology called Cascading Style Sheets (CSS) was developed for use in web pages to make them more streamlined.  CSS is a standard for defining the layout and formatting for a web page.  Many of the attributes that were commonly used with HTML tags before CSS came around are now handles by CSS definitions.  For designers unfamiliar with CSS or who, for whatever reason, don’t choose to use CSS, HTML attributes that overlap with CSS definitions can still be used to change the behavior of HTML tags.  However, to be considered vogue in the world of web design, it is recommended that you learn and use CSS.

Link to WebsiteTemplateDatabase.com

Do you like what you see on our site?  Would you like to share it?  We’d be glad to have you link your blog or website to ours.  You can use any of the following code sections to link to us, or you could create your own custom link.  The words listed in the link text (between the anchor tags) are the keywords that are relevant to WebsiteTemplateDatabase.com.  Using those keywords in your link helps us rank higher in the search engines when people do a search for the keywords contained in the link.  If you want to understand how this all works, see our tutorials on search engine optimization.

Here you go…

Free Blogger Templates
<a href=”http://www.websitetemplatedatabase.com”>Free Blogger Templates</a>

 Free Website Templates
<a href=”http://www.websitetemplatedatabase.com”>Free Website Templates</a>

Website Tutorials
<a href=”http://www.websitetemplatedatabase.com”>Website Tutorials</a>

Photoshop Tutorials
<a href=”http://www.websitetemplatedatabase.com”>Photoshop Tutorials</a>

Illustrator Tutorials
<a href=”http://www.websitetemplatedatabase.com”>Illustrator Tutorials</a>