Skip to main content

Divide Header In Two Parts or Sections in Bloggers Blog

A header consists of every single part that appears at the top of your blog. It is a container which comprises two important parts which are Logo piece where you add title, logo and recount of blog and the second piece encompasses Navigation list where you add location links. Now this tutorial needs a little bit of your careful vigilance as we will need to edit your template's coding. Since most templates are designed by distinct causes so the cipher will disagree a little bit but the format would be identical. glimpse the image underneath to understand what exactly is header splitting: 



Normal header

 
Divided Header


That is what we are about to do in order to create a separate section for your advertisement purposes. Normally we often add a 468 by 60 size banner to the right side and we therefore need a widget section for it.

Split your blog's Header in two parts
  1. Go to Blogger > Design > Edit HTML
  2. Backup your template
  3. Uncheck the "Expand Widget Templates" box if in case it is checked.
  4. Search for the following code:  
#header-wrapper { 
   width:960px; 
   margin:0 auto 10px; 
   border:1px solid $bordercolor; 
   }
 #header-inner { 
   background-position: center; 
   margin-left: auto; 
   margin-right: auto; 
 }
 #header { 
   margin: 5px; 
   border: 1px solid $bordercolor; 
   text-align: center; 
   color:$pagetitlecolor; 
 }
 #header h1 { 
   margin:5px 5px 0; 
   padding:15px 20px .25em; 
   line-height:1.2em; 
   text-transform:uppercase; 
   letter-spacing:.2em; 
   font: $pagetitlefont; 
 }
 #header a { 
   color:$pagetitlecolor; 
   text-decoration:none; 
   }
 #header a:hover { 
   color:$pagetitlecolor; 
   }
 #header .description { 
   margin:0 5px 5px; 
   padding:0 20px 15px; 
   max-width:700px; 
   text-transform:uppercase; 
   letter-spacing:.2em; 
   line-height: 1.4em; 
   font: $descriptionfont; 
   color: $descriptioncolor; 
 }
 #header img { 
   margin-$startSide: auto; 
   margin-$endSide: auto; 
 }

NOTE: You code will be not an exact but similar to the above one. Select all code that contains the word "#header" ".header" at start.
Now replace this entire code with the following one, CLICK SHOW to see codes
/*------TheBlogger911.blogspot.com Header-----*/ 
  #header-wrapper{ 
     width: 960px; 
     color: #000; 
     margin: 30px auto 0; 
     padding: 0px; 
     overflow: hidden; 
 } 
 #header-inner { 
     background-position: left; 
     background-repeat: no; 
 } 
 .headerleft h1, .headerleft h1 a,.headerleft h1 a:hover,.headerleft h1 a:visited { 
     color: #BF0100; 
     font-size: 36px; 
     font-family: 'Ultra', serif, Arial; 
     font-weight: bold; 
     margin: 0; 
     padding: 0px 0 5px 0; 
     text-decoration: none; 
       text-shadow: 6px 6px 4px #ccc; 
        line-height:1.2em; 
 }
 .headerleft h3 { 
     font-family: arial, tahoma,  Sans-Serif; 
     font-weight: normal; 
     margin: 0; 
     padding: 0; 
 }
 .headerleft .description { 
         color: #3B3B3B; 
     font:bold 12px Helvetica, arial,  sans-serif; 
     margin: 0px; 
     padding: 0 0 20px 0; 
         text-shadow: 4px 4px 6px #ccc; 
 } 
 .headerleft { 
          width: 450px; 
          float: left; 
          margin: 0; 
          padding: 0; 
          height:80px; 
 } 
 .headerright { 
          width: 468px; 
          height:80px; 
          float: right; 
          margin: 0px; 
          padding:1px 0 0 0; 
          
 }
    4.   Now search for this code or a similar code that must contain div section of your header:
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'> 
 <b:widget id='Header1' locked='true' title='TheBlogger911 (Header)' type='Header'/> 
 </b:section>
   It must contain the tags.
    5.    Now replace this with the following code:

<div id='header-wrapper'> 
 <div class='headerleft'> 
       <b:section class='headerleft' id='headerleft' maxwidgets='1' showaddelement='no'> 
 <b:widget id='Header1' locked='true' title='TheBlogger911 (Header)' type='Header'/> 
 </b:section> 
 </div>
 <div class='headerright'> 
 <b:section class='headerright' id='headerright' maxwidgets='1' showaddelement='yes'> 
 </b:section> 
 </div>

 6.   Save your template and view your Page elements page :)

Customization
To adjust header width edit: 960px
To change Header Title colour change:#BF0100
To change Header description colour then change:#3B3B3B

Leave a comment for questions and suggestions

Comments

Popular posts from this blog

How To Add HTML Contact Form for Blogger Blogs

Our problem in creating a contact form is that you don't want third party contact form cause it will burden your loading page and if you want to give your reader an instant contact form but don't want to show your email, this HTML form will help you with your problem

You can create a simple form, as displayed below, to enable your visitors to send you comments, questions or whatever you'd like.

1.Log in to your dashboard--> layout

2.Click on "Add a Gadget".

Now Select "HTML/Java Sricpt"

3.Copy and Paste below code into it.
<FORM action="mailto:[email protected]" method="post" enctype="text/plain"><TABLE BORDER="0" CELLSPACING="0" CELLPADDING="4" WIDTH="90%"><TR><TD width="30%"><DIV align="right"><B>Name:</B></DIV></TD><TD width="70%"><INPUT type="text" name="name" s…

How to Add Random Post Widget to blogger Blogs

Instead of creating new post everyday to reduce your bounce rate, many respected bloggers are suggesting to sell your old posts to readers. We all know that many of our posts are useful even time passed. today I am going to make a tutorial on how to add a beautiful random post and reduce your bounce rate also to promote your older posts

Hows Random Posts.
Doesn’t add load to your page loading
Shows the Name Of The Author.
Shows the number of comments.
Summary Showing Enabled.
CSS Added.
Hover effect for images. Installing It On Your Blog Go to blogger > Open layout tab
Now Add A new HTML/JavaScript widgetGive any title you want [ eg: Being Viewed, Recently Viewed, Now Viewing etc. Its up to you. ].
Now paste the code given below :  <style type="text/css"> .recent_post_content{width:100%;} .recent_post_content_item {filter: alpha(opacity=80);opacity: 0.8;} .recent_post_content img {width:45px;height:45px;background-position: center;margin:7px;padding: 2px;border:#888 solid th…

High PageRank Do-Follow Forums List (606)

Besides from getting your answers to unanswerable queries, the good thing of do-follow forums is to create a good back links through their High Page rank pages on Google, creating your pointing to your site makes your blog grows faster in ranking,

Now a days it is very hard to find do-follow link website because they are making their site as no-follow, like the wiki, it is before a do-follow site but since many SEO experts use wiki as spam they control it and made it no-follow, so now I am giving you a list of do-follow and high ranking sites that you can use to make your blog popular.

Its your tactics on how to create your links on this site, but remember not to spam cause Google might hit you. :)

Here are the list enjoy

ForumPR1http://www.addthis.com/forum92http://chronicle.com/forums/83http://forums.myspace.com/84http://forum.joomla.org85http://forums.cpanel.net86http://forum.siteground.com87http://c7y-bb.phparchitect.com88http://forum.meebo.com89http://forums.mysql.com/710http://f…