How to add a horizontal navigation bar in blogger

This is the easiest way to add a horizontal navigation bar in your blogger header.

Note: Back up your template's HTML code first.

Step 1. Go to blogger DASHBOARD -> TEMPLATE -> EDIT HTML

a. Then you'll find an instruction which says, "Directly editing HTML may affect....." Press "PROCEED." 

b. Tick on "EXPAND WIDGET TEMPLATE."

STEP 2. Press CTRL F then copy and paste the following at the "get prompt" located at the upper right corner of the screen (don't include the bullet mark):

• ]]></b:skin>

Paste the CSS code below before "]]></b:skin>".

 #nav {
      width: 100%;
      float: left;
      margin: 0 0 3em 0;
      padding: 0;
      list-style: none;
      background-color: #f2f2f2;
      border-bottom: 1px solid #ccc; 
      border-top: 1px solid #ccc; }
   #nav li {
      float: left; }
   #nav li a {
      display: block;
      padding: 8px 15px;
      text-decoration: none;
      font-weight: bold;
      color: #069;
      border-right: 1px solid #ccc; }
   #nav li a:hover {
      color: #c00;
      background-color: #fff; }

STEP 3. Press CTRL F again and paste <b:section class='header'  and you'll find the following code:

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'> 
<b:widget id='Header1' locked='true' title='Your Blog (Header)' type='Header'/> 
</b:section> 

Change the value of maxwidgets to 3 or any value more than one, for example: maxwidgets='3' 

Change also the value of showaddelement to 'yes' or: showaddelement='yes'; and the value of locked to 'false' or locked='false'. Thus, your new code should look like this:

<b:section class='header' id='header' maxwidgets='3' showaddelement='yes'> 
<b:widget id='Header1' locked='yes' title='Your Blog (Header)' type='Header'/> 
</b:section> 

Press SAVE TEMPLATE. You're done.

Go to LAYOUT and look for "Add a Gadget" at the header area.

Then, choose the HTML/JavaScript gadget.

STEP 4. Paste the following code.

    ul id="nav">
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
      <li><a href="#">Blah blah</a></li>
   </ul>

IMPORTANT NOTE: Replace "#" with your URL. For example:

<li><a href="http://www.bythisword.com">Home</a></li>

Then press Save arrangement.


Thanks.



Related Topics


How to display author's name in blogger under post title?


How to hide blog description in blogger?


How to split into two blogger header?

How to split into two a blogger header

How to put Google adsense into the header of my blogger blog? I took these notes and shared with you for those that work with Simple blogger template, as it is the basis of my tests.


Note: Back up your template's HTML code first.

STEP 1. Go to blogger DASHBOARD -> TEMPLATE -> EDIT HTML

a. Then you'll find an instruction which says, "Directly editing HTML may affect....." Press "PROCEED." 

b. Tick on "EXPAND WIDGET TEMPLATE."

STEP 2. Press CTRL F then copy and paste the following at the "get prompt" located at the upper right corner of the screen: 

<b:section class='header'

You'll then find the following code:


 <b:section class='header' id='header' maxwidgets='1' showaddelement='no'> 
<b:widget id='Header1' locked='true' title='By This Word (Header)' type='Header'/> 
</b:section>

STEP 3. Paste the following code right after </b:section>

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

The code, after pasting, will look like this. 

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'> 
<b:widget id='Header1' locked='true' title='By This Word(Header)' type='Header'/> 
</b:section> 
<b:section id='header-right' showaddelement='yes'/>
<div style='clear: both;'/>

STEP 4. Press CTRL F then paste ]]></b:skin> as what you did above, to see where this code is located in your blog's HTML. 

STEP 5. Paste the following code before ]]></b:skin>

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

Press SAVE TEMPLATE. You're done.

Go to LAYOUT and try to add an adsense widget at the HEADER portion of the blog's layout.

Thanks.

Related Topics

How to display author's name in blogger under post title?
How to hide blog description in blogger?

How to add horizontal navigation bar in blogger?

How to hide a blog description in blogger

Hide you blog description since it doesn't look good if allowed to appear in your blog page. If you are not yet familiar with editing your blog's template's HTML code, then follow the steps given below:


Note: Back up your template's HTML code first.

Step 1. Go to blogger DASHBOARD -> TEMPLATE -> EDIT HTML

a. Then you'll find an instruction which says, "Directly editing HTML may affect....." Press "PROCEED." 

b. Tick on "EXPAND WIDGET TEMPLATE."

STEP 2. Press CTRL F then copy and paste the following at the "get prompt" located at the upper right corner of the screen:

• ]]></b:skin>

Paste the code below before "]]></b:skin>".

• .description{  display: none;  }

After having pasted it, your code should have to look like this one:

.description{
display: none;
}

 "]]></b:skin>"

Then, press SAVE TEMPLATE.

NOTE: There's another way of doing it if you're not comfortable with the above method, more so that you'll be editing the HMTL code of your blog. All you need is go to your DASHBOARD -> TEMPLATE -> CUSTOMIZE -> ADVANCED -> Add CSS then paste

.description{

display: none;

}

Then press Apply to BLOG.


Related Topic

How to display author's name in blogger under post title?
How to split into two a blogger header?

How to add horizontal navigation bar in blogger?

How to display author's name in blogger under post title

Do you want your name displayed below the title of your post? Here's how that which works for me with Simple template:

Note: Back up your template's HTML code first.

Step 1. Go to blogger DASHBOARD -> TEMPLATE -> EDIT HTML

a. Then you'll find an instruction which says, "Directly editing HTML may affect....." Press "PROCEED." 

b. Tick on "EXPAND WIDGET TEMPLATE."

STEP 2. Press CTRL F then copy and paste the following at the "get prompt" located at the upper right corner of the screen: (Don't include the "bullet mark.")

• <div class='post-header'>

If the above won't show up (in dark yellow color), it means that you need to try the other one:

   <div class='post-header-line-1'/>
Step 3. Paste the following code below "<div class='post-header-line-1'/>"

<span class='meta_author'>By <b style='color: DarkSlateBlue; font-weight:normal;font-size:10px'><data:post.author/></b></span>

Step 4. Last step: Press SAVE TEMPLATE, then check if your name appeared under the post title. If NOT, maybe you don't have a Google Account yet. Get a Google Account, and re-check.

Honestly, not all suggestions I gathered from the Web worked for me. Hence, I suggested Simple template. Secondly, you can adjust the color and font size by changing their values.

For "color" for example, change 'color:DarkSlateBlue to Blue or whatever you like. If you don't have HTML color names, press this link.

For the font size, just change 11px or 12px (it's up to you) in  font-size:10px. I tried 9px, but it looks oppressed, so I changed mine to 10px font size.

Thanks and happy blogging.

Related Topics

How to hide blog description in blogger?
How to split into two blogger header?

How to add horizontal navigation bar in blogger?