How to make 2 column Header / How to split a Header for Blogger

There are sites that I visit that have split header on them so I ask myself that would it be cool if I make one and the result is at the header of this blog.

Now let's start with the program.

1 - Log in to your Dashboard--> Layout--> Edit HTML

2 - Scroll down to where you see code like this:

 /* Header<br /> ===================================<br /> */<br /> #header-wrapper {<br /> width:900px;<br /> margin:0 auto 0px;<br /> height:190px;<br /> }<br /> <br /> #header-inner {<br /> width:900px;<br /> background-position: center;<br /> margin-$startSide: auto;<br /> margin-$endSide: auto;<br /> }<br /> <br /> #header {<br /> margin: 0px;<br /> text-align: left;<br /> color:$pagetitlecolor;<br /> }<br />   

3 - Replace above code with below code.

 /* Header<br /> ===================================<br /> */<br /> <br /> #header-wrapper {<br /> width:900px;<br /> margin:0 auto 0px;<br /> height:190px;<br /> }<br /> <br /> #head-inner {<br /> width:600px;<br /> background-position: left;<br /> margin-left: auto;<br /> margin-right: auto;<br /> float:left;<br /> }<br /> <br /> #header {<br /> margin: 0px;<br /> text-align: left;<br /> color:#ffcc66;<br /> }<br /> <br /> #r_head{<br /> width:300px;<br /> float:left;<br /> padding-top:10px;<br /> }<br /> <br />  


4 - Now again Scroll down to where you see code like this :

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


5 - Replace above code with below code.

 <div id='header-wrapper'><div id='head-inner'><b:section class='header' id='header' maxwidgets='1' showaddelement='no'><br /> <b:widget id='Header1' locked='true' title='Test Blog (Header)' type='Header'/><br /> </b:section><br /> </div><div id='r_head'><b:section class='header' id='header2' preferred='yes'/><br /> </div></div> 


6 - Click Preview and if anything seems good you may...


7 - Click on "Save Template" and you are done.

Continue Reading »

How to add Continue Reading on your posts

If you're using blogger service, this is a little trick that can give you "Expandable Post Summary" on your home page.

The pros of Continue Reading are that they:

• Shorten your pages.
• Allow readers to choose an article they'd like to read.

This tutorial is very easy that it is very noob friendly.

How to add Continue Reading on Blogger:

As usual start by:

1 - Logging in to blogger

2 - On your Dashboard, select Layout. Click Edit HTML. Under the Edit Template you will see your blog's HTML.

3 - Check the expand widget templates box.

4 - Find /head> tag, then copy and paste the code from here above the /head> tag.

5 - Find <data:post.body/>, then place the code from here below the <data:post.body/> tag

Save all changes and let's move to the next part.

6 - From your dashboard go to Settings, then go to Formatting.

7 - Paste the code in the box and save settings.

 First part of your post goes here!<div class="fullpost">Rest of Entry goes here!</div>  

Now you have your Continue Reading on every posts on your Blogger!

Happy Blogging!!!

Continue Reading »

How to remove / hide Blogger Navigation Bar

The reason you're reading this is that you want to remove your Navigation Bar on top of your blog but let me tell you the pros and cons about it:

Why remove it?

• It gives more professional look.
• It gives more space on top of your page

Why disregard this tutorial?

• Navi Bar gives a little traffic on your blog
• Navi Bar makes easy access with the Dashboard
  

As you can see I've removed my navigation bar so I've disregaded those 2 reasons... ☺

And if you want to have that nice look you may want to continue the rest of the entry.

To hide the Blogger Navigation Bar :

1 - Log in to blogger

2 - On your Dashboard, select Layout. Click Edit HTML. Under the Edit Template you will see your blog's HTML.

3 - Find (Ctrl-v will help you with this) /* Variable definitions and paste on top of it the code below:

#navbar-iframe {
display: none !important;
}

Blogger Template Style
Name: Minima
Designer: Douglas Bowman
URL: www.stopdesign.com
Date: 26 Feb 2004
Updated by: Blogger Team
----------------------------------------------
#navbar-iframe {
display: none !important;
}
/* Variable definitions

4 - Hit the preview button and now check out the results.

5 - Now save your template and you're done.

If you're having trouble on how to go to your Dashboard, simply use "Crtl-t" to add another tab and paste "http://www.blogger.com/home" (without the quotes) on the url section or get a toolbar for your blogger.

Happy Blogging!!!

Continue Reading »

FIRST POST!

Here's another tutorial for noob bloggers...

I'am a noob myself here but as much as I can, I will try to help you my fellow noobs in making the best out of your blogger...

Thank you clicking "continue reading" and Happy Blogging!

Continue Reading »