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 »