Skip to main content

How To Divide / Split Blogger Header Into Two Parts

How about if your blog has an AdSense ad in the header section? Experts are always recommended an AdSense ad on the header section of your blogger blog. They also say that an AdSense ad on the header section always increase more revenue than other part of your blog. So it is highly recommended to have an AdSense ad on the header section. Don't worry! If you do not have an AdSense account then you can use other advertiser's code to display their ads on the header section.

By default a blogger header has only a single section that appears left side at the top of your blog. Normally header section contains blog title, logo and description of your blog. Most of the templates are designed and developed by different developers so the coding are different a little bit but the format is same for all templates. And this is the most important section where you need to concentrate a lot. Although default blogger header has only a single section but you can customize the header according to your requirement. If you are an expert you can slice the header section twice, thrice sections.

In this tutorial, I will show you how to divide / split blogger header section into two parts so that you can add a gadget to your blog. So lets start!  

Important Note! 

Always remember one thing. Before changing or doing anything with template or uploading a custom template, always take backup of your blog's template and your blog's data as well. It helps you to recover your blog data and template from an unexpected error.

How To Download Blogger Template
How To Download Blogger Data


Steps to Divide Blogger Header

Step 1. First login to your blogger account.

Step 2. Click Template which located left side

Step 3. Click Edit HTML

Step 4. Once you click Edit HTML, you will able to see the codes of your blog's template. Click anywhere inside the codes

Step 5. Press Ctrl + F on the keyboard to get search box.

Step 6. Type <a expr:href='data:blog.homepageUrl'>
inside the search box and hit Enter (twice) on the keyboard and you will switch to that code. After that you will see the codes like below code

<a expr:href='data:blog.homepageUrl'><data:title/></a>
</b:if>
</b:includable>
        </b:widget>
      </b:section>
    </div>
    </div>

Step 7. The code may differ slightly for different blogger templates. But no need to worry. Just proceed to the next step.

Step 8. Now you need to paste the below code in between   </b:section>  and   </div> 

<b:section id='header-right' showaddelement='yes'/>
<div style='clear: both;'/>

Now the final code looks like below codes

<a expr:href='data:blog.homepageUrl'><data:title/></a>
  </b:if>
</b:includable>
        </b:widget>
      </b:section>
<b:section id='header-right' showaddelement='yes'/>
<div style='clear: both;'/>
    </div>
    </div>

Step 9.  Now type  ]]></b:skin> in the search box and hit Enter on the board to switch to the code. And just above   ]]></b:skin>   paste the below code.

#header, body#layout #header {width:40%;display:inline-block;float:left;}
#header-right, body#layout #header-right {width:48%;display:inline-block;float:right;padding:20px;} #header-right .widget {margin:0;}

After that final code looks like below codes

#header, body#layout #header {width:40%;display:inline-block;float:left;}
#header-right, body#layout #header-right {width:48%;display:inline-block;float:right;padding:20px;}
#header-right .widget {margin:0;}
]]></b:skin>

If the width of your entire blog is 1020 then the above value suits for you. Otherwise for fine adjustment you need to change the above value in red colour.    



Step 10. Click Save template to save the template.

Step 11. You will see Add a Gadget just below your blog's header. Don't confuse that the header doesn't look in two parts in the Layout. Click Add a Gadget to add your desired widget. And after that click Save arrangement to save the Layout.


Thanks for reading the post. Let me know whether you have divided your header section? Also let others to experience this feature by sharing this post on the social networks.



Recommended Post
Big on Hosting. Unlimited Space & Unlimited Bandwidth

Comments

  1. Brother sorry to say but you have forced me to comment ......you are a genius......sorry to say but you are the most stupid person that i have ever seen ....i am saying this because you are providing tips and widgets to other bloggers but you have enabled a script that doesn't let people copy the codes ..........don't mind my words.....just trying to help you ................Paji tussi great ho ...Tohfo Kubul karo lol

    ReplyDelete
  2. Thank you for this tutorial, I am working with my Love Quote blog, I want to put a search box on my header, so to do it, I wanna divide my header into two section.

    Thanks,
    Roben

    ReplyDelete
  3. Hi, I tried but it does not work. I still can't get the header to be in 2 sections? please take a look: http://www.blog.birdsparty.com/

    ReplyDelete

Post a Comment

Popular posts from this blog

How To Change Default File Download Path in UC Browser

All of us known that UC browser is the most popular, fast and less data consuming mobile browser for android devices. Many of us use UC browser on daily basis on our smart phones. By default UC browser has download path to internal memory device which is /storage/sdcard0/download. sdcard0 is the built in memory or internal memory of your device. Read also : How to fix HTTP and HTTPS Mixed Content Errors.

Do you know that this default download path can be changed? Since, internal memory is fixed, and once you exceed this value you can't download more. You need to move some data from mobile memory to the external memory which is sdcard1. If you change this default path to external memory card (sdcard1), you can download more data directly to your desired directory. Read also : How to Setup AdSense Page Level Ads and Fix Script Error.

Here, I will show you, how to change this default download path from internal memory card sdcard0 to external memory card sdcard1. To do so you need to…

How To Rename A WhatsApp Group

We all know that WhatsApp is the most popular messaging service for Android, BlackBerry, iPhone and for other platforms. In this post, I will show you how to rename an existing WhatsApp group. To rename an existing WhatsApp group your smartphone must have internet connection. After that you need to follow the below steps. Read also : How to track lost/stolen mobile phone and erase data remotely.


Step 1. Open WhatsApp application on your smartphone.

Step 2. After that you need to click CHATS tab and click on your group name.



Step 3. Once you click on your group name, you will able to see chat details. Now you need to click vertical dots located extremely top right corner and then click Group info. Read also : How to setup AdSense page level ads.


Step 4. Now you can easily rename your group. To rename the group just click Edit icon and then type the desired group name and click OK. Read also : How to protect your computer from WannaCry ransomware virus.


In this way you can rename a What…

Calculation of Total Marks, Percentage, Division, Remarks, Maximum & Minimum Number of Students in MS Excel

In this post, I will help you to learn how to calculate total marks, percentage, division, maximum number, minimum number and remarks of students of a class very fast. At first you need to look over the above image very carefully. The above image shows the marks obtained by six students of a class.

Formula to calculate Total Marks of all students within seconds 

First you need to find out the Total Mark of a single student who is on the top of the list i.e, Mani. To calculate Total Mark of Mani, click on the Total Mark cell address of Mani i.e, H6 and then type the formula =sum(1st subject's cell address i.e, b6:last subject's cell address i.e, g6) and then press Enter on the keyboard or click anywhere on the worksheet. Here b6 and g6 are cell address of 1st subject (English) and last subject (Biology) of that student. Read also : How to Enable HTTPS for Blogger Blog.

After getting results, click on the resultant cell address of Total Mark of the 1st student i.e., Mani an…

Change UC Browser Default Homepage in Android Phones

We all know that Android OS operated Smartphones and Tablets are great for web browsing. Like other browsers, uc browser has a default search engine Yahoo is set for web search. UC browser provides different kind of search facilities under 5 different categories namely Web, Video, Shop, Image and APP. Read also : How to protect your computer from WannaCry ransomware virus.

In this post, I will show you how to change the default search engines of uc browser in Android devices for their 5 different categories. To do so you just need to follow the below steps. Read also : How to Enable HTTPS for Blogger Blog.

Change Default Homepage for UC Web search

Step 1. At first you need to open UC browser
Step 2. After that click Search. Follow the below image.


Step 3. Once you click Search, you will able to see the default search engine's icon for Web search like y for Yahoo, g for Google. Now you need to click that search icon. Follow the below image. Read also : How to change UC browser defaul…

Enable Auto Save Forms & Passwords in UC Browser

Many of you use UC browser on daily basis on your smart phone but very less enable this feature. Enabling auto save forms and passwords allows the browser to remember the username and passwords. It gives you relief from entering username & password every time whenever you login to your email. Did you enable auto saving form & password? If not, then do it now. Read also : How to track lost/stolen mobile phone and erase data remotely.

In this post, I will show you how to enable auto save forms & password in UC browser in your Android phones. To do so you need to follow the below steps.

Steps to enable auto save forms and passwords

Step 1. At first open UC browser

Step 2. In the second step, tap on the horizontal bar.


On the next image, you will able to see Bookmarks, History, Refresh etc. icons. Now swipe this menu screen to the left and tap Settings. Read also : How to create custom AdSense Search Engine and make money from it.


Step 3.  Now on the Browser Settings, you w…

Set UC Bowser as Default Browser in Android Device

UC browser is the most popular and free mobile browser for android phones developed by UCWeb also known as UC Mobile. UC browser becomes most popular among mobile internet users because of its less consuming data than any other mobile browser. It can be downloaded from UCWeb or Google Play Store. Read also : How to protect your computer from WannaCry ransomware virus.

In this post, I will show you how to set UC browser as default browser in your Android phones. To do so you need to follow the below steps.

Steps to set UC browser as default browser

Step 1. At first open UC browser.

Step 2. In the second step, tap the horizontal bar. Read also : How to make money online from home.


On the next image, you will able to see Bookmarks, History, Refresh etc. icons. Now swipe this menu screen to the left and tap Settings. Read also : How to transfer large files without mobile data.


Step 3. Now you will able to see the option Set as Default Browser which is inactive.



Step 4. Now you need to t…

How To Delete / Deactivate / Reactivate a Pinterest Account

Pinterest is one of the best social network since it allows users to create boards and also to update boards with images. But what if you want to delete your pinterest account? Pinterest allows users to delete their accounts permanently or deactivate their accounts so that whenever a user like to come back easily can reactivate his/her account. So be sure what do you want? Read also : How to Setup AdSense Page Level Ads and Fix Script Error.

Do you want to delete your account permanently or deactivate your account? Keep in mind that by deactivating your Pinterest account, your profile and boards will not be visible on Pinterest also your twitter and facebook profiles will be unliked, if you had connected them earlier.

Steps to Delete/Deactivate Pinterest Account

Step 1: At first log in to your Pinterest account with your user name and password. Read also : How to Setup AdSense Page Level Ads and Fix Script Error.

Step 2: Click on your username locating right side at the top of the ho…