Friday, 4 May 2012

// // 3 comments

How to split header title gadget in blogger templates?




Have you struck with same sub-heading title on blogger static pages or having trouble to create blank pages in blogger or want to customize default Blogger templatethen I got a solution of your problem. First you need to know about static pages in blogger. The page at which time stamp update take place is known as homepage and pages other than homepage is referred as static pages. In blogger, certain features are not required. The default blogger templates needs modification as templates are not interactive and do not look good. In order to make them attractive, we have to make some advanced settings in blogger template.Suppose, you are selecting a default blogger template and looking to made some changes in it. For example- some default templates do not have header tab. So, you need to create header tabs. The first tab from left is your homepage tab and other tabs are representing two options- first is blank pages and other is for web address links. If you select blank page option from header page tab then same sub heading title appears on the page. For example- If you use the name blogger for header tab then same name appears on the page. The screenshot of the same is given below-


image1
The heading tab like PayPal, Samsung, Android and Kontera also appears on all the pages in same manner as word “blogger” has appeared in above screenshot. An effective SEO blogger post needs to avoid this kind of problem. So, you need to visit blogger dashboard ---> templates ---> edit HTML. After that click on proceed button and do not forget to backup the template. Even a single change may lead to destroy the flow of complete template. So, be careful while editing a template and do not make experiment with original template.


Once you have successfully backup and restore the blogger template then select the complete template and press CTRL+ F and then find in the blogger template.

Then search the below code using Ctrl + F


</b:skin>.


Now paste the code just after that:


<b: if cond=’data:blog.pageType == “static page”‘> <style> .post-title.entry-title{ Display: none; } </style> </b:if>
Once you gone through the above settings then click on save templates and then changes you have made is reflected back to blogger static pages and header tab will not appear on the static pages. In this way, you can optimize sub-headings and title on static pages. After removing the sub-heading and header tab, the screenshot will be as follows-

image2
The above screenshot displaying a blank space and does not have a keyword “blogger”, it means your mission is successful. This is just a minor problem. In order to make your website or blog professional, you need to make many editing operations. Moreover, you can also customize and set margin of your blogger template.

Customize blogger Template


You can make changes with default blogger template (Using new Blogger Interface) and make your blog according to your requirement. For doing this, you need to visit blogger dashboard ---> Templates ---> Customize ---> Advanced ---> Add CSS.


After that enter the code/widget ID syntax of the gadget/section, you want to change. In order to know code/widget ID of each section you need to visit Layout (New Blogger Interface) and then click on edit button. For example- I am displaying a screenshot which is representing widget/code ID of Blog Archive section. You can use the same procedure to know code/widget ID of each section. Once you know the code/widget ID of the section then you can easily perform aligned and customized operation on blogger template.


The screenshot to know code ID of blog archive is given below-

image3
In the same way, you can know the code ID of each section. You have to click on the particular section and then click on edit button. A new Windows appears and ID found after Widget Id keyword in address bar.


Copy the widget/code ID in “Add CSS”, as path explained above. You can customize the margin either from top, bottom, left or right. It is your wish to set the margin. The code for Blog archive customization setting is given below-

#BlogArchive1{    
margin-top: -20px !important;
}


In the same manner, you can customize for each section by replacing the widget/code ID of the section with Blog Archive. For example- the widget/code ID for blogging area is as follows-


image4


#Blog1{
margin-top: -23px !important;
}


In this manner, you can customize the complete template and make your blogger template optimized. I hope that this tutorial will help you to know blogger template customization to make blogger platform interactive so that bloggers can earn more bucks from it.

3 comments:

  1. Nice one bro..it worked! keep it up

    ReplyDelete
  2. Nice blog here! Additionally your web site so much up fast! What host are you the usage of? Can I get your associate hyperlink in your host? I desire my web site loaded up as quickly as yours lol

    ReplyDelete