This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. By using this website you also agree to our FTC Disclosure, Privacy Policies, Copyright Notice, and other Terms and Conditions"

Proudly Powered By Blogger
Completely Unique Theme Development
Designed with by ™ SHIBLI N.

Think Globally, But Act Locally

WorkStation247 | Creative Resources

StartUp Digital Entrepreneur's Creative Converting Resources

22 May 2016

Responsive | Split Your Blogger Header In Two Sections

For many blogger templates, it's more important to add a new section right next to the header. Such a widget section is used for advertisements or for menus or for other important reasons.

Here, I'll present a different way to split the blogger's Header section. Because when I tried to split my Blogger Header in Two section, I tried to see many such tutorials. But maybe because of the variation of my template or because of many other reasons, I have faced many complications.

However, let's introduce you a way to successfully split your blogger header in two section without being too complicated.

STEP 01: As you know, for the change of Blogger template, go to Blogger Dashboard > Theme > Edit Html

STEP 02: Then, click anywhere on template code and press Ctrl + F and find out the given code below by searching "Header1" text.

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

<-------------------- place the following code here

STEP 03: Now just change your b:section class and div tag with  'headerleft'
STEP 04: Then just paste code just above that b:section  'headerleft' line.
</div><div class='headerright'>
<b:section class='headerright nav-menu' id='headerright' maxwidgets='5' name='Ads of WorkStation247' preferred='yes' showaddelement='yes'>
<b:widget id='Text81' locked='false' title='New Widget' type='Text' version='1'><b:widget-settings>
<b:widget-setting name='content'><![CDATA[<a href="" target="_blank"><img alt="Web Blog" border="0" height="60" src="" width="468" / /></a>]]></b:widget-setting></b:widget-settings>
<b:includable id='main'><!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'><h2 class='title'><data:title/></h2></b:if>
<div class='widget-content'><data:content/></div>
<b:include name='quickedit'/></b:includable>
</div><div style='clear: both;'/>
STEP 05: Paste this CSS Code just before ]]></skin>
/* ######## Header Css ######### */
#header-wrappers {padding: 75px 0px 5px 0px; height:80px; z-index:-3 !important;}
.headerleft {float: left; margin: 0; padding: 0; max-width: 400px;}
.headerright { float: right; margin: 0; padding:0; max-width: 700px;}
/* ##### Responsive Css ####### */
@media only screen and (max-width: 1130px) {
#header-wrappers {height: 100%;}
.headerright, .headerleft {float: none;width: 100%;text-align: center;
height: auto;margin: 0 auto;clear: both;}
.headerleft img {margin: auto;padding-bottom: 5px;}
.headerright {margin: 10px auto 0;}}
@media screen and (max-width: 880px) {
#header-wrapper {margin-bottom: 4px;}}
@media only screen and (max-width: 360px) {
.Header .description p{display:none}}
STEP 06 (optional): and then paste this code just before ]]></b:template-skin>
body#layout #header-wrappers { height: auto; padding: 0;}
body#layout .headerleft { float: left; width: 30%; max-height: none; margin: 0; padding: 0;}
body#layout #headerleft { background-color: #E97C81 !important;}
body#layout .headerleft .widget-content { border-color: #8a52a1;}
body#layout #headerright { background-color: #FFDFAE !important;  }
body#layout .headerright { float: right; width: 60%; margin: 0;}
STEP 07: Now save the template and now notice the change of your layout and blogger blog.

 Split Your Blogger Header Into Three Sections

Hopefully, you've successfully completed, if you have any problem, you can write in the comment box, I'd be glad to help. Happy Blogging.
Responsive | Split Your Blogger Header In Two Sections
4/ 5 stars - "Responsive | Split Your Blogger Header In Two Sections" For many blogger templates, it's more important to add a new section right next to the header. Such a widget section is used for adver...

No comments:

Post a Comment

Recent Comments

Theme Design Secrets

" No matter how many times you made mistakes
or how slow you progressed
you are still way ahead of everyone
who are not trying"

Blogger Theme Design Secrets
Learn Form The Basic
[ ] hover over to see secrets

Soon to be revealedy

In progress 'Wait for it...' ;)

About Services

Video Editing, Graphic Design, Custom Template Design, service is currently not available due to excessive demand. We expect to accept new orders from March 1st, 2019.
Exclusively on Fiverr
Thank you for your understanding.

And this is what i do

$('.comment-content a[rel$=nofollow]').replaceWith(function(){return ($(this).text());});