I have seen so many bloggers have been asking me for tutorials to design Blogger template. As you all know after i gave Techieblogger.com to my another friend, I have created this new blog for providing blogger and web design tips. I have decided to post the whole process required for designing a seo optimized blogger template. You would have noticed that many designers have been charging you to convert a wordpress template to blogger one or even to design a unique blogger template. So I have decided to explain you all the steps needed to design your own blogger template.
General Layout of a Blogger template
According to me, a blogger template can be divided into 6 parts :
- Header
- Navigation Menu
- Main Container
- Post
- Sidebar
- Footer
I will explain you each and every part of the blogger in detail in the forthcoming articles. For an example, I have taken a screen shot of my blog itself.
Blogger Header Section
In this section, we can see how to code the header section of the blogger template. The header section starts with <head> tag.
Now Let me explain you the elements which need to be present in the header and will also explain you how to make it seo optimized as well.
General Code present under the header section is :
[html]
<!doctype html>
<html>
<head>
<title>Hello world!</title>
</head>
[/html]
Now in this I am going to concentrate mainly on the <title> tag. In the future posts, i will explain much more on the header tags.
The <title> tag defines the title of the document. The title element is required in all HTML/XHTML documents. The text inside <title> is not displayed in the document. However, most browsers will display the title at the top of the window.
The title element:
- defines a title in the browser toolbar
- provides a title for the page when it is added to favorites
- displays a title for the page in search-engine results
The default code present in the Blogger Template is :
[html]<title><data:blog.pageTitle/></title>[/html]
The above code displays your default page Title. Now let’s see how to play with the above code.
Customize the Page title in Post pages
If you want to customize the above code and make it seo compatible, then follow the below steps.
- Login to your Blogger account
- Go to Design tab under your Blog
- Navigate to EDIT HTML page
Now replace the above code with this one :
[html]<b:if cond=’data:blog.pageType == "item"’>
<title> <data:blog.pageName/> | <data:blog.title/> </title>
<b:else/>
<title><data:blog.pageTitle/></title>
</b:if>[/html]
The above code will help you to show custom titles under post pages. By default, only the post titles will be shown under any post page. But with the above code, you can add few keywords of your blog along with the post titles. Just edit this code <data:blog.title/> to show the important keywords of your blog in page titles alone.
In reverse, if you want to show a custom title in home page and the default Page title in all other posts, just like me, then you need to add the following code instead of the first one.
[html]<b:if cond=’data:blog.pageType == "item"’>
<title> <data:blog.pageName/> | <data:blog.title/> </title>
<b:else/>
<title>Your Important Keywords First | <data:blog.title/> </title>
</b:if>[/html]
Now you need to to place your important keywords of your blog first, then your blog title.
Show Custom Titles in Specific post pages
It’s an easy trick which allows you to show custom Page Title under specific post pages. This trick can help you to put important keywords of each post under the specific post pages.
[html]<b:if cond=’data:blog.url == "Post URL"’>
<title> Custom Post Title!! </title>
</b:if>[/html]
With the above code you can change the Page Title of any specific post. This can be especially useful for providing custom title to contact us, about us pages.
Any suggestions?
I hope that the above trick would be useful for you to customize the page title. In the future posts i will explain more about adding seo optimized META tags and adding specific Description to specific Post pages.
Related Posts
-
January 9, 2010 -
September 5, 2009 Show only post titles in Home page
-
July 31, 2008 Page Navigation Menu Widget for Blogger
Leave a reply Cancel
Popular
-
Tips to shoot excellent Panoramic Photographs
December 15, 2012 By Mohamed Rias -
Notable Tips for shooting Awesome Wildlife photographs
December 8, 2012 By -
12 Best Mid Range DSLR cameras
December 6, 2012 By Mohamed Rias -
How to set up navigation menus
November 23, 2012 By Mohamed Rias -
9gag Clone Blogger Theme
October 29, 2012 By Mohamed Rias
-
200+ Ultimate Collection of Photoshop Plugins
February 19, 2010 By -
65 Amazing High Resolution 3D Wallpapers for your Desktop
September 5, 2012 By Mohamed Rias -
Notable Tips for shooting Awesome Wildlife photographs
December 8, 2012 By -
45+ Surreal Infrared photography Inspirations and Tips
December 2, 2010 By -
65+ Stunning Macro Photographs with tutorials
May 24, 2012 By
-
45+ surreal Long Exposure Photography Inspirations
January 6, 2010 By Mohamed Rias -
20+ incredible Gigapixel Photography Inspirations
February 4, 2010 By Mohamed Rias -
Show Adsense ads below post title
May 16, 2009 By Mohamed Rias -
25+ Breathtaking examples of Natural sky Photography
February 2, 2010 By -
How to add multiple Authors in Blogger
January 9, 2010 By
Editor’s Pick
-
February 19, 2010 200+ Ultimate Collection of Photoshop Plugins
Photoshop is a powerful image editing software which is very useful for web designers and photographers to create desired effects in the images. But sometimes it’s difficult to perform certain tasks manually in photoshop. Once there was a belief that only designers who have mastered photoshop can create special effects on photographs or images. But…
-
December 8, 2012 Notable Tips for shooting Awesome Wildlife photographs
You can remark it as wild-time game, which surely it is. Wild is the community for animals and not ours so it’s there to decide what they will do and what they want to. You can tell them to make some gesture that well-suit your need, or you can’t ask they to align up in…
-
December 2, 2010 45+ Surreal Infrared photography Inspirations and Tips
In Infrared Photography the image sensor used is highly sensitive to infrared wavelengths of light. We all know that white light is composed of several bands of colours known as spectrum and the wavelengths ranging between 750nm to about 1200 nm, falls on infrared (IR) band. The spectrum used is in this technique is termed…
-
May 24, 2012 65+ Stunning Macro Photographs with tutorials
We are often bothered and eluded by the large things like landscape, river views, lakes etc. but we rarely look to the smallest things in our world. Macro photography is one of those medium which makes you feel that even the smallest things have many parts to play in this globe. Macro photography means that…
-
December 15, 2012 Tips to shoot excellent Panoramic Photographs
Recently, making out panoramic photos has become much easier as your software stitches them quite beautifully together. Photoshop is quite skillful and master in doing that; it has got a command called Photo Merge that weaves your photos once you hit it. Now, software is mere medium which we use to ease our post works,…
2 Comments
Adding Meta tags to Blogger Template
This is a nice tutorial. Bookmark & share