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

Header blog yakni cuilan paling atas halaman blog. Ini elemen terpenting sebab merupakan kepala, kawasan judul atau nama blog, hidangan navigasi, logo, juga iklan banner. Header blogger juga berfungsi sebagai "branding" blog Anda.

Cara Membuat Header Blogger Responsive Mobile Cara Membuat Header Blogger Responsive Mobile-Friendly
Header Blog Responsive versi Mobile / HP

Cara Membuat Header Blogger Responsive Mobile Cara Membuat Header Blogger Responsive Mobile-Friendly
Header Blog Responsive versi Desktop

Header blog responsive ini dapat 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 isyarat header blog yang ada.
3. Pasang CSS Header Blog Responsive berikut ini di atas isyarat ]]></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 isyarat <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 isyarat 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.idtutorial.com).*

Share To:

Endo Sadewa

Post A Comment:

0 comments so far,add yours