ကိုကြီးဇော် ( မုန်တိုင်း )

Hi bloggy readers,
In the default templates from Blogger, we are provided with the Blog Header which being formatted into text whether on the blog title or the blog description. So, in the homepage of your blog, your blog title along with the description will be shown as a text format. But if you check some of the famous blogs, their blog header is usually shown as a logo instead of the text, which has been set as the anchor link to the homepage. If you can't catch with I'm trying to explain to you in this post, you can check at the famous blogs such as BloggerBuster or CarAdvice blog.

As you can see on the header of those blogs, there is no blog title and description which is usually written in the form of text. Their blog headers have been replaced with the logo picture of their blog. Actually, if we check at their template, they didn't remove the blog header, they just hide the text element on header and then replaced it with the logo. If you are interested on replacing the text header to the logo header, the tutorial is as follow:

1. Go to Blogger
Now head to the http://www.blogger.com and Log in to your Blogger account.

2. Go to Layout/Design
After entering to the Dashboard account, pick your blog and press the Layout/Design button in that are of your chosen blog. By doing so, you will be brought to the first sub-tab, Page Element.

3. Go to Edit HTML
Now switch the sub-tab to the Edit HTML to start customizing the header element of your blog.

Anyway, before proceeding to the tutorial on removing the text element on header, i strongly insist you to Save the current template of your blog just in case you do something wrong with the template. Now click at the link Download Full Template.

After clicking the Download Full Template link, you will be prompted with the choice about where you are gonna put the xml file in your Computer, just put it in the Desktop to make it easier if later you want to switch back to the current template.

4. Find the Code
Now we need to find a specific code in blog template. By pressing Ctrl + F buttons at the same time, we will enter the Find mode. Now search the code below:

5. Copy the code
After locating the code ]]></b:skin> in your blog template, now block the CSS style code below and then press Copy. After that, paste the CSS code right before the code ]]></b:skin>. By adding this new CSS style code in your blog template, you are about to install the code that will control the appearance of blog header title and description.
Now, pay attention to the code overflow:hidden; in that code above. Yeah, the code overflow:hidden; is the code that will hide the header title and description elements from your blog. And for the blue code above indicates the URL address of blog logo, so you must firstly change that red code by using the URL address of your logo picture. And last but not least, the red code width:500px height:70px must have the same numeral size if you want to re-size the logo of your blog.

6. Find the Code that controls the header
Now enter again to the Find mode by pressing Ctrl + F and find the code that control the occurrence of the header element. The header code i've presented below might be different with the header code in your blog template, especially with the header title (red code). So you just need to find the first line of the code below.

7. Paste the Code
Now block the 2 lines div class code below and then press Copy.
After Copying the lines code above, now wrap up the code on number 6 by using the 2 lines div class code above. Look at the example below!

                     
As you can see in that picture above, the 2 lines div tag code has wrapped up the header element. By doing this, the new CSS style will be attached to the header element in order to hide the title and description text of header element.

8. Save the Template
By pressing the Save Template button, now you can save the current change you've just made. And as you can see in the result through your blog, the header title and description has been replaced with the logo.

Okay, that's it for now, hope it works to your blog.

Labels: Blogger-II