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.