Cara Membuat Header Blogger Responsive Mobile-Friendly

Baca Juga

Cara Membuat Header Blogger Responsive Mobile-Friendly. Penampakannya seperti di bawah ini. Demonya di CB Blogger News atau blog yang sedang Anda buka ini.

Header blog yaitu bagian paling atas halaman blog. Ini elemen terpenting karena merupakan kepala, tempat judul atau nama blog, menu navigasi, logo, juga iklan banner. Header blogger juga berfungsi sebagai "branding" blog Anda.

Header Blog Responsive versi Mobile / HP

Header Blog Responsive versi Desktop

Header blog responsive ini bisa dipasukan dengan Navigasi Topmenu di atasnya dan Navigasi Main Menu di bawahnya.

Cara Membuat Header Blogger Responsibe Mobile-Friendly

1. Template > Edit HTML
2. Hapus semua kode header blog yang ada.
3. Pasang CSS Header Blog Responsive berikut ini di atas kode ]]></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. Copas HTML Header Blog Responsive berikut ini di bawah kode <div class='content-wrapper'> atau yang semisalnya.

<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. Kode CSS Layout Dashboar Blogger - Header Blog Responsive. Simpan di atas kode body#layout yang lainnya atau di atas kode ]]></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}

6. Save Template!

Demikian  Cara Membuat Header Blogger Responsibe Mobile-Friendly. Good Luck & Happy Blogging! (www.contohblog.com).*