Unique tips of blogging

How To Creating Blogger Header Responsive Mobile-Friendly

Header blog is the top of the blog page. This is the most important element for a head, a title or name of the blog, menu navigation, logos, banner ads as well. Header blogger also serves as a "branding" your blog.

In addition to representing your blog header status is also believed to optimize SEO because at first by the Googlebot crawl.

If you are looking for ways to Make Blogger Header Responsive Mobile-Friendly Then you've found it.
Creating Blogger Header Responsive Mobile-Friendly

This Tutorial Creating Blogger Header Responsive Mobile-Friendly

Step by Step Creating Blogger Header Responsive Mobile-Friendly


1. Template> Edit HTML
2. Remove all the code header blog.
3. Attach CSS Responsive Blog Header follows from the above code ]]> </ b: skin>


.header-wrapper{max-width: 900px;color: #333;min-height:80px;overflow: hidden;position: relative;z-index: 999;margin: 0 auto;width: 100%;}
#header{max-width:350px;float:left;width:auto;overflow:hidden;z-index:999;min-width:300px;margin:0;padding:0}
#header-inner{margin:10px 0;padding-left:8px}
#header h1,#header p {text-transform: uppercase;margin-top:0;
font:35px Impact,Oswald,Arial;line-height:15px;color:#333;margin-bottom:10px}
#header h1.title a:hover{color:#48b;text-decoration:none}
#header .description{color:#333;font:13px Poppins,Arial;margin:15px 0 0;text-transform:none}
#header img{border:0 none;background:none;width:70%;height:auto;margin:0 auto;float: left;}
#header2{float:right;max-width:500px;margin:5px 0}
.header2 .widget{margin:0 auto;padding:5px 0}
@media screen and (max-width: 960px) {
#header{float:none;max-width:none;text-align:center;margin-top:10px}
#header-inner{margin-bottom:0}
#header h1,#header p{margin-right:0}
#header .description{margin:0}
}
@media screen and (max-width: 910px) {
#header{float:none;max-width:none;text-align:center;margin-top:10px}
#header-inner{margin-bottom:0}
#header h1,#header p{margin-right:0}
#header .description{margin:0}
#header2,#header2 img{text-align:center;width:100%}
}
@media screen and (max-width: 768px) {
.header-wrapper{margin-right:0;min-height:0;width:100%}
#header{text-align:center;width:100%;max-width:none}
#header-inner{margin:10px 0}
}
@media screen and (max-width: 480px) {
#header img{max-width:100%;float:none;}
}
@media screen and (max-width: 240px) {
.header-wrapper{margin-right:0;min-height:0;width:100%}
#header{text-align:center;width:100%;max-width:none}
#header-inner{margin:10px 0}
#header img{border:0 none;background:none;width:auto;height:auto;margin:0 auto}
}

4. Then Copy Paste HTML Code Responsive Blog Header following under the code <div class = 'content-wrapper'> or a similar one.

<div class='header-wrapper'>
                 <b:section class='header' id='header' maxwidgets='1' showaddelement='yes'>
                   <b:widget id='Header1' locked='true' title='CB Blogger News (Header)' type='Header' version='1' visible='true'>
                     <b:includable id='main'>
  <b:if cond='data:useImage'>
    <b:if cond='data:imagePlacement == &quot;BEHIND&quot;'>
       <b:if cond='data:mobile'>
          <div id='header-inner'>
            <div class='titlewrapper' style='background: transparent'>
          <b:if cond='data:blog.pageType != &quot;item&quot;'>
          <h1 class='title' style='background: transparent; border-width: 0px'>
            <b:include name='title'/>
          </h1>
<b:else/>
          <p class='title' style='background: transparent; border-width: 0px'>
            <b:include name='title'/>
          </p>
</b:if>
            </div>
            <b:include name='description'/>
          </div>
        <b:else/>
          <div expr:style='&quot;background-image: url(&quot;&quot; + data:sourceUrl + &quot;&quot;); &quot;                        + &quot;background-position: &quot;                        + data:backgroundPositionStyleStr + &quot;; &quot;                        + data:widthStyleStr                        + &quot;min-height: &quot; + data:height                        + &quot;_height: &quot; + data:height                        + &quot;background-repeat: no-repeat; &quot;' id='header-inner'>
            <div class='titlewrapper' style='background: transparent'>
          <b:if cond='data:blog.pageType != &quot;item&quot;'>
          <h1 class='title' style='background: transparent; border-width: 0px'>
            <b:include name='title'/>
          </h1>
<b:else/>
          <p class='title' style='background: transparent; border-width: 0px'>
            <b:include name='title'/>
          </p>
</b:if>
            </div>
            <b:include name='description'/>
          </div>
        </b:if>
    <b:else/>
      <!--Show the image only-->
      <div id='header-inner'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<h1 style='text-indent:-9999px;margin:0 0 0 0;padding:0 0 0 0;height:0px;'><b:include name='title'/></h1>
</b:if>
</b:if>
        <a expr:href='data:blog.homepageUrl' style='display: block'>
        <img expr:alt='data:title' expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:src='data:sourceUrl' style='display: block'/>
        </a>
        <!--Show the description-->
        <b:if cond='data:imagePlacement == &quot;BEFORE_DESCRIPTION&quot;'>
          <b:include name='description'/>
        </b:if>
      </div>
    </b:if>
  <b:else/>
    <!--No header image -->
    <div id='header-inner'>
      <div class='titlewrapper'>
        <b:if cond='data:blog.pageType != &quot;item&quot;'>
        <h1 class='title'>
          <b:include name='title'/>
        </h1>
<b:else/>
        <p class='title'>
          <b:include name='title'/>
        </p>
</b:if>
      </div>
      <b:include name='description'/>
    </div>
  </b:if>
</b:includable>
                     <b:includable id='description'>
  <div class='descriptionwrapper'>
    <p class='description'><span><data:description/></span></p>
  </div>
</b:includable>
                     <b:includable id='title'>
  <b:if cond='data:blog.url == data:blog.homepageUrl'>
    <data:title/>
  <b:else/>
    <a expr:href='data:blog.homepageUrl'><data:title/></a>
  </b:if>
</b:includable>
                   </b:widget>
                 </b:section>
<b:section class='header' id='header2' maxwidgets='1' showaddelement='yes'/>
            </div><!-- /header-wrapper -->
<div class='clear'/>

5. Code CSS Layout Dashboard Blogger - Responsive Blog Header. Keep on top of the code body # layout is more or above the code]]> </ b: skin>

body#layout .header-wrapper{width:950px}
body#layout #header{float:left;width:30%;margin-top:35px;}
body#layout #header2{float:right;width:60%;margin-top:40px}

Thats all .... Happy Blogging !!
0 Komentar untuk "How To Creating Blogger Header Responsive Mobile-Friendly"


Back To Top