Blogging Tip: How to Change Your Blog Font

Before changing your template, always download a backup!

Changing your blog font always comes with a Caveat -

People who visit your blog will only be able to view the fonts that are coded on their own computer. So even if you love fonts, and collect them by the dozen, you really are limited to the basic set of fonts that come standard on most computers. If you pick an obscure font and code only that font, only YOU will be able to read your blog.

It is always smart to choose several fonts. When your readers visit your blog, their computers will read your code and pick the first matching font it can find and display that font.

To change the display of your font, find the code that looks like this (your fonts listed may be different!):

<Variable name="bodyfont" description="Text Font" type="font" default="normal normal 100% Georgia, Serif" value="normal normal 109% Trebuchet, Trebuchet MS, Arial, sans-serif">

<Variable name="headerfont" description="Sidebar Title Font" type="font" default="normal normal 78% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif" value="italic normal 78% Trebuchet, Trebuchet MS, Arial, sans-serif">

<Variable name="pagetitlefont" description="Blog Title Font" type="font" default="normal normal 200% Georgia, Serif" value="normal normal 200% Trebuchet, Trebuchet MS, Arial, sans-serif">

<Variable name="descriptionfont" description="Blog Description Font" type="font" default="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif" value="normal normal 78% Trebuchet, Trebuchet MS, Arial, sans-serif">

<Variable name="postfooterfont" description="Post Footer Font" type="font" default="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif" value="normal normal 78% Trebuchet, Trebuchet MS, Arial, sans-serif">

So now let's say you want your blog to display the fonts: Lucida Calligraphy, Comic Sans MS or Baskerville Old Face. And, for convenience, let's say that was your order of preference. This means, first the computer will look for Lucida Calligraphy, if it finds it, it will display... if not, it will look for Comic Sans MS, etc.

Keep the current fonts listed. They are a good back-up! Nearly every computer in the world has either Times or Georgia (serif) or Arial, Trebuchet or Verdana (Sans Serif). Above all, you want your blog readable.

Change EACH CODE you found above to include the new font names, like this (I only changed the first example, for brevity!):

<Variable name="bodyfont" description="Text Font" type="font" default="normal normal 100% Lucida Calligraphy, Comic Sans MS, Baskerville Old Face, Georgia, Serif" value="normal normal 109% Lucida Calligraphy, Comic Sans MS, Baskerville Old Face, Trebuchet, Trebuchet MS, Arial, sans-serif">

Click preview to make sure it looks the way you want. If so, save and viola'! You now have a custom font for your blog.

You can read other blogging tips like centering images or changing font size and color by clicking here.

Now go get techie with yer bad self.

Blogging Tip: How to Make a Clickable Link, or URL link

In my email, I've been asked how to make a link. This is especially useful for your sidebars because Blogger's add a link feature isn't the best. The great news is that it is very simple to make a clickable link.

Let's say you want to link to my blog, Life With My 3 Boybarians. Just like that! You would type:

<a href="http://www.lifewithmy3boybarians.com">Life With My 3 Boybarians</a>

Now let's say you'd like to link back to me here at Graphically Designing. Replace the url (web address) and what you'd like the link to say. It would look like this:

<a href="http://www.graphicallydesigning.com">Graphically Designing</a>

Sometimes you want to link in the middle of a sentence.
"Click here to visit my portfolio!"
Whatever you type after the URL and in between the > and the < will be the clickable words. That sentence looks like this:

Click <a href="http://graphicallydesigningportfolio.blogspot.com/">here</a> to visit my portfolio!

Now you try it! Show the blogosphere how savvy you are!

Blogging Tip: How to Make a Clickable "Email Me"

From email: How do you make a clickable "Email Me" so it autofills your email program?

First there are two ways, but the same basic code. If you want a pretty graphic, the first step is to go into Photoshop or Paint or whatever graphics program you use and make an image with your colors and font of choice. You can experiment with backgrounds and fonts, but simply put you want it to be fairly small and you want it to be obvious it's supposed to be clicked. Save it as a .gif or .jpg and throw it over on Photobucket, Snapfish or your hosting choice.

If you just want the words "Email Me" to code so that it automatically goes to the computer's default mail program like this:

Email Me!

Type:

<a href="mailto:YourName@YourAddress.here"> Email Me! </a>

If you have your "Email Me" graphic hosted somewhere, you can make one like this:



You will need the second line of code from Photobucket. It is the URL of your image and it starts with http://. Then, very similar to the first code you make this, adding in the link to your graphic:

<a href="mailto:YourName@YourAddress.here"><img src="http://www.URL of Your Image.com"></a>

Viola', now you have a clickable "Email Me" and all your blog friends can email you all they want. Go on, try it! Be proud of your inner geek.

Blog Tip: How to Change Your Font Color or Size

Ever notice how some people have blogs and in the middle of their posts, their font changes size... sometimes getting big, getting bigger, getting outright huge... then shrinking back down again? If you want to change your font size it's as simple as adding a little code in front of the words you'd like to change.

For most blogs, font size 3 is standard. Adding a font size larger than 3 increases the size of the font. And any font number lower than 3 decreases the size of the font.

<font size="4"> Type what you want in size 4, then close with more code. </font>

For even bigger, use type size 5:

<font size="5"> This would appear in the largest size. Always close the code with </font>

Now, how about color? First, you need a good hexidecimal color chart. I use this one. For convenience I just saved it in my bookmarks. Next, you need to enter the color code for whatever color you'd like your font to appear.

<font color="#FF0066 "> This makes your font bright pink. </font>

<font color="#0000FF"> This makes your font bright blue. </font>

Want to get really tricky? You can change both font and color by adding two codes and closing it twice.

<font color="#660000"><font size="5"> ...by adding two codes. </font> </font>

Or by combining code into a single, multi-command string of code, like this:

<font color="#66000" size="4">...and manipulate both color and font.</font>

Blogging Tip: How to Center Your Images & Pictures

Ever notice that your images aren't spaced well in your sidebars? Want them to be centered? Would you prefer a different size that Blogger automatically formats?

This is easy. In Blogger, people tend to choose "Add Picture" from the "Choose a New Element" pop up page. Don't! Blogger floats all images left. If you want your graphics centered, it's a multi-step but easy process. (I promise!)

1. Resize your image. Most digital cameras come with photo-editing software. But if you don't have one I have two I can recommend. I usually recommend Irfanview. It's free, downloadable and easy to use! You can remove red eye, crop and resize your photos. But last week, the creators of Photoshop have released an online version of Photoshop called Photoshop Express. You don't even have to download it - it's all online! It's free but you have to register. You can make your photos black and white, fix the lighting/exposure, remove red eye, crop, resize, etc. Free!

For sidebars, you'll want your images and graphics to be 175 or 200 pixels wide. For your main body, you'll want your pictures around 400-600 pixels wide. You'll have to experiment to see what works best with your template.

2. Upload your file to Photobucket, Flickr, Snapfish or some other hosting service. Flickr doesn't allow images to link anywhere but Flickr, so I use Photobucket. You can use whichever program you like. They are all free to start.

3. Get the code for your image. You will have a code that looks like a URL link. Your photo will look like:

http://www.URL of your image.com

4. On Blogger, backstage on your sidebar choose "Add html/Javascript" instead of "Add Picture". In the space, enter the code for your picture. If you want it in a post, just insert the code in your post.

<center><img src="http://www.URL of your image.com/"></center>

Replace the words "URL of your image" with the code Photobucket gave you for your image. Save and viola'! You now have a resized and centered image.