How To Split Blogger Header Into 2 Section

Blogger is having very simple layout which you can customize through template designer.You can add two sidebar or 3 column footer to your blog but there is no way by which you can split your blog header in two parts. Splitting your blog header and adding Adsense ads can help to boost your CPC And Clicks, you can also add any widget in your blog header like search box of social sharing button.Just follow below steps to divide your blog header in two parts.

Step 1

• Go to Blogger Dashboard
• Click On Template >> Edit HTML >> Proceed
• Make Sure That Expand Widget Template checkbox is UNCHECKED
• Now find below code there

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

• Insert Following Code Right Under (after) It.

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

• Finally Codes Should Like Like This:

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

Step 2

• Now Find ]]></b:skin> 
• Paste Below Code Above ]]></b:skin>

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

•  You can easily see highlighted text in code.Adjust Both header width according to your choice.
• After Finishing All Steps Click On Save Template Button And Enjoy Your Second Header.

Adding Widget In Header

• Go to Blogger Dashboard
• Click On Layout Tab 
• There you will find add gadget option next to your blogger header just click on it and add any widget you want to add.

Read More »

ADD EACH BLOG POST IN SEPARATE BOX

If you are trying to design your blog and make it neat and clean then you will try to separate each blog post .In blogger default template every post is displaying in same panel it become harder for reader to differentiate post,In this post I will give Css code which make your post separate in boxes.

Follow Below Steps to  separate  each blog post

1. Go to blogger Dashboard.
2. Click On Template Tab.
3. Now Click On Customize button.
4. Now Click on Advanced link
5. Now click on Add CSS And paste the following code there.

.post {
background:#FFFFFF;
border: 2px solid #000000;
padding-right:7px;
padding-left:7px; 

padding-top:7px;

padding-bottom:7px;}
.post:hover {
border: 2px solid #FF0000;
}
.post:active {
border: 2px solid #0004FF;
}

Now Save It.

Customization 

If you want to change background color then replace #FFFFFF this with your color code.

If you want to change border color then replace #000000 #FF0000 #0004FF this with your color code.

How To Get Color Code-Go to Our Hex Color Chart And Choose your favorite color and get the code.

Read More »