Search This Blog

Loading...

Thursday, April 05, 2007

Special fonts for your blog clickable graphic header without removing the important text blog title

Important. Font is mentioned below. Don't ever try to make the font invisible by making font color same as background as that can get your blog banned from search engines for practicing black hat SEO

Want a special font for your graphic header like this blog: Anything Chinese? You can get special fonts from urban fonts. That is where I got that "Chinese Takeaway" font for the graphic header. Perhaps the best way to explain what I want to explain is to explain how I did the graphic header and still retain the text title for the blog (this in my opinion is important if you want your blog to be easily found by search engines. Search engines place great importance to text title of blogs to help determine what the blog is all about, and in my opinion, totally removing the text title like what many bloggers do is a bad idea).

Amazon products for search engines

OK, here is the explanation on how I did the graphic header for Anything Chinese. First, I went to urban fonts from which you can download for free (some are paid) fonts and dingbats. urban fonts have over 8,000 free fonts which you can download. There are many categories of fonts there. I wanted a Chinese looking font, so I click on the category Chinese and downloaded the "Chinese Takeaway" font. I unzipped the file and then follow their urban fonts FAQ to install the font into my computer.

In standard New Blogger templates, you cannot add anything into the Header other than the text title and a description. You also cannot add anything above the main column. To be able to do these, you will have to follow the instruction in this post: Adding Graphic to your New Blogger blog Header. If you do what is instructed there, you will have 2 additional "Add a Page Element" in the Layout, one for the Header, and one for the main column (posts).

I then opened MS Word and typed the graphic title "Anything Chinese" using that font and the relevant color and font size. I clicked "printscreen", opened the free and very good Irfanview Photo Editor (click "BACK" button to get back to this page) and pasted the content of the clipboard there (menu bar > Edit > Paste). I then cropped the text "Anything Chinese", saved it into the computer and uploaded it to my Google Page Creator (Update: Google Pages has been discontinued and now replaced by Google Sites). After uploading it, I right-clicked on the uploaded file and selected "Copy Link Location" to copy the URL into the clipboard (you can also click on the link and then in the page displaying the graphic, copy the URL from the address bar at the top of the page). I then click the "Add a Page Element" for the Header in the Layout, selected HTML/Javascript, then typed <a href="URL of homepage of blog"><img src="graphic URL" alt="" width="730"></a> into the HTML/Javascript window (the width of the Header is 750). This I found by getting into the template editor and looking for this block of code:

#header-wrapper {
width:750px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

If this is not clear, I will put the actual HTML I used to display that graphic header in the scroll box below:

<a href="http://anything-chinese.blogspot.com/"><img alt="anything chinese" width="730" src="http://bloggerfordummies.googlepages.com/AnythingChinese.jpg"/></a>


Now the trick on how to have a title incorporated into a graphic header, and still retain the text title: In the Dashboard, I clicked SETTINGS > BASIC and instead of typing the title of the blog in the field for the title, I typed a description and reduced the font size so that the text title appear like the description. I looked for this block of codes in the template editor:

<Variable name="pagetitlefont" description="Blog Title Font"
type="font"
default="normal normal 200% Georgia, Serif" value="normal normal 200% Georgia, Serif">

and changed it to

<Variable name="pagetitlefont" description="Blog Title Font"
type="font"
default="normal normal 40% Georgia, Serif" value="normal normal 40% Georgia, Serif">

Now I have a text title serving as the blog description which can be read by search engines.

14 comments:

  1. Hi there, I was wondering if you know how to change the title fonts in the sidebars (e.g. titles such as 'links to other food sites') to fonts that are not already available on blogger.

    Thank you! The Moody Foodie

    http://www.themoodyfoodie.blogspot.com

    ReplyDelete
  2. Hi Moody,

    I haven't tried changing the sidebar header font myself as I am pretty easy going and not too particular about fonts, etc, but you can try going into the template editor window Backing up and changing New Blogger template and look for

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

    and play around with changing the font. If I have time I would try testing it out, but since you are the one interested, please let us know the result of your efforts so that everybody can benefit.

    Peter (Blog*Star 2006 and 2007)
    Blogger Tips and Tricks

    ReplyDelete
  3. Thanks Peter!

    that worked a treat!

    ReplyDelete
  4. Hi, I was wondering if you know how to move the text title down a few pixles? I can seem to find the code to move everything around the actual text, but nothing is changing the position of the text on the page, other than basic alignment...

    Any help would be greatly appreciated. o_0 Thanks.

    ReplyDelete
  5. Hi Swanky,

    Try Blogger Buster.

    Peter Blog*Star
    Blogger FAQ (Frequently Asked Questions)
    (Blogger FAQ in progress. More will be added as I have the time)

    ReplyDelete
  6. hey there, I am relatively new to the bloggerific life. I saw this tut and saw that it uses a service which is no longer available to regular folk like me. Got any alternatives to googles page creator?

    ReplyDelete
  7. Your article worth an ice cream.Could u pls ,make clear ,how to make blog Description's color

    ReplyDelete
  8. Very easy. Refer to how to change fonts and colors. Looks like my blog is not worth much as an ice cream only cost cents. Sigh.

    ReplyDelete
  9. Hi!

    I changed the fonts and they look terrific...on my computer. Everyone else has this really boring font.

    How do I push my choice of font into all the computers that read my blog? I have a Mac and I am using MeathFLF as my font.

    Thank you.

    Laura.

    ReplyDelete
  10. Fonts chosen by you will only be displayed in a visitor's screen if those fonts are also installed in the visitor's computer, failing which the second choice or third choice specified will be displayed. There is nothing you can do unless you can somehow get all visitors to your blog to install the font you chose.

    ReplyDelete
  11. Hi,
    Thanx for you amazing blog with useful info! Your instructions for changing my fonts for my blog are great, everything went well untill I had to use the google page creator. You can no longer sign up! What can I do to change my fonts?
    Thanks and regards from Holland.
    Luci

    ReplyDelete
  12. I have a fancy font on my post titles I want to get rid of and I have tried everything. It must be in the variables, but I have played around with them and it doesn't change anything.
    http://www.quicktattletails.com/



    /* Variable definitions
    ====================













    default="normal normal 78% 'Century Gothic',Trebuchet,Arial,Verdana,Sans-serif">

    ReplyDelete
  13. Perhaps one way to easily select fonts is to change to Blogger Template Designer template and then go to DESIGN > TEMPLATE DESIGNER > ADVANCED
    then chose your fonts there.

    ReplyDelete


Find topics by using the Google custom search box above which can search multiple blogs, or the SEARCH BLOG in the left corner of navbar. You can also find topics in the Label List and Categrories in the right sidebar.

For more information and special deals related to any of the issues on this page, place your cursor over the double-underlined links. All information supplied by Kontera.com.

Disclaimer: This blog has no relation with Wiley Publications