Integrating Custom Header In Blogger

Hello friends, hope you must be doing well. Before starting our tutorial for today let me revert back to relevance of Blog Header of your blog which replicate the content of your blog in brief. You can also integrate an image or logo according to your requirement in your blog which reveals an idea regarding concept of your blog. Are you satisfied with this, don’t you feel that you should have freedom to customize your header rather than using the default header. If you are not satisfied with existing format of blog header than I am sure you would have definitely endeavoured to customize it according to your wish but did not succeed in  giving shape to your thinking.

Although blogger has made its blog header temper – proof but it does not mean you cannot change it. Of-course you can change it, however it does not reveal that you can make it your menial, but you have to learn how it can be changed. In our today’s tutorial we will learn the process of replacing your default blog header with blog header of your desire without changin the template of your blog.  You have to carry out following steps to Add a Custom Header in Blogger 2012

Step 1: Go dashboard of your blogger;

Step 2: Click on the title of your blog;

Step 3: From left pane shift to Template tab;

PS: Before you start editing your template I suggest you to save copy of your blog so that in case of any uncertainty content of your blog is retained with you.

Step 4: Now move to Edit HTML option;

Step 5: To see template editor option you need to click on Proceed option;

Step 6: As sixth step click on Expand Widget Templates option;

Step 7: Once you have performed sixth step, you need to look for following set of code in template of your blog which is related with blog header section and edit variants that uses variant information mentioned;

     <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

Before proceeding to eighth step let me clear what these colors mentioned in above set of codes reveal:

    Maximum number of widget that can be included in header;

This color determines the number of widgets that a blogger can include in section of his blog header. However the default number is 1, which binds you from adding additional widget. But if you change its value you can add additional widgets in header of your blog.

For instance <b:section ... maxwidgets='5' ...    

Similarly       denotes feature of enabling or disabling blogger to add new elements.

Although blue color facilitates you to determine maximum number of widgets, but you may not be able to do so or able to see link of adding gadget in page elements until unless you change value of this attribute to yes, as shown below:

<b:section ... showaddelement='yes'

Step 8: Now you are ready to integrate custom header of your blog according to your wish. 

Undoubtedly before doing so you need to delete the existing default header of your blog. For this you will see a line of code as shown below, just before the line of code as mentioned in step 7 above;


Step 9: Change the value of locked attribute to false like this <b:widget id='Header... locked='false'...; 

Step 10: Save the template;

Step 11: Move to Page Element;

Step 12: You will find the header element of your blog, located at top most of page element below the Navbar;
Step 13: Click on Edit link in response to header; 

Step 14: After performing the 13th step a pop-up box will appear on your screen, on which you have click on Remove button and Confirm the request; 

Step 15: The above steps have resulted in removal of default blog header and you find link of Add a Gadget at place of default header. For adding your customized blog header you need to click on the link; 

Step 16: Now according to your choice select the required element for header from the list given in gadget. 

You can also add image box if you wish to add custom image for your blog header or else HTML/JavaScript element to customize header according to your HTML knowledge. 

PS: You can also add more gadgets which your feel will be according to your header section (except the main header). This number of gadgets should be equal to the number of widget as mentioned in code of step 7.

1 comment:



Man Behind Ribbun Software

vikas Singal Vikas Singal is a professional Internet marketer from Jaipur, India.

Apart from Blogging , he is a fun loving person. His areas of Interest are php, wordpress and joomla.

At Ribbun-Software he Writes about Blogging, Wordpress, Technology, Making Money online.

You can read more about him at About me page.


My Tweeter Updates

    Follow me @ribbuntweeting

    Also Check