Cara Membuat Header Blog Tiga Kolom - All in One Blogger Header

Cara Membuat Header Blog Tiga Kolom - All in One Blogger Header - ini untuk mengganti header blog bawaan Blogger, khususnya template Sederhana (Simple), seperti CB Theme.

Cara Membuat Header Blog Tiga Kolom - All in One Blogger Header

Bisa juga dicoba untuk template blog lain.

Sebelumnya CB sudah share Cara Membuat Header Blog Dua Kolom Responsive.

Header Blog Tiga Kolom ini berisi widget nama atau logo blog, kotak pencarian, dan icon media sosial. Desainnya sudah reponsive - mobile friendly.

Header Blog Tiga Kolom

Header Blog Tiga Kolom

Cara Membuat Header Blog Tiga Kolom

Berikut ini kode dan cara memasangnya.

1. Klik Tema > Edit HTML
2. Pasang kode CSS header blog responsive berikut ini di atas kode ]]></b:skin>

.header-outer {margin-bottom:10px}
#header {width: 30%;margin-right:10px;float: left; }
#headerkanan1 {float: left;width: 37%;margin:5px 0;padding:0}
#headerkanan1 .widget {margin: 3px;}
#headerkanan2 {float: right;width: 30%;margin:15px 0;padding:0}
#headerkanan2 .widget {margin: 3px;}
.sidebar h2 {font-size: 16px;line-height: 1.2em;display: inline-block;margin: 20px 0;padding: 0 0 15px;position: relative;color: #333;font-weight: 700;text-transform: uppercase;}
.sidebar h2:before {content: "";display: block;width:300px;height:3px;position: absolute;background:#E2E2E2;left:0;right:0;bottom:0;z-index:0}
.sidebar h2:after {content: "";display:inline-block;width:100%;height: 3px;position:absolute;background:#e0262c;left:0;bottom:0;z-index:1}
.Header h1{font:normal bold 30px Arial,Tahoma,Helvetica,FreeSans,sans-serif;color:#000;text-shadow:1px 2px 3px rgba(0,0,0,.2)}
.Header h1 a{color:#000}
.Header .description{font-size:140%;color:#858585}
.header-inner .Header .titlewrapper{padding:5px 15px}
.header-inner .Header #header-inner{overflow:hidden;max-height:60px}
.header-inner .Header .descriptionwrapper{display:none}
.header img{display:block;width:auto;max-width:200px;height:auto;padding:0;margin:10px 0}
#social-icons{margin-bottom:0;height:50px;width:100%;clear:both;z-index:2;position:relative;margin-top:-20px}
.social-media-icons{display:table}
.social-media-icons a{color:#555}
.social-media-icons ul{text-align:right;padding:5px 5px 0 0;list-style-image:none;list-style-position:outside;list-style-type:none;margin:10px;padding:0;float:right}
.social-media-icons li.media_icon{margin-left:15px;padding:0;display:block;float:left;font-size:20px}
.social-media-icons li:hover{-moz-transform:rotate(360deg);-webkit-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(-360deg);-moz-transition:all .5s ease-in-out;-webkit-transition:all .5s ease-in-out;-o-transition:all .5s ease-in-out;-ms-transition:all .5s ease-in-out;transition:all .5s ease-in-out}
.Header .description {display:none}
#BlogSearch1 h2,#BlogSearch2 h2 {display:none}
#BlogSearch1 input.gsc-input,#BlogSearch2 input.gsc-input {padding: 6px;width: 99%;}
#BlogSearch1 input.gsc-search-button,#BlogSearch2 input.gsc-search-button {margin-left: 5px;padding: 6px;border: 1px solid #ddd;}
@media screen and (max-width:800px){
.Header h1 {font-size: 30px;}
.header-inner .Header .titlewrapper {padding:5px 0;}
}
@media screen and (max-width:640px) {
#header {width:100%;margin-right:0;float:none; }
#headerkanan1 {float: none;width:100%;margin:0;padding:0}
#headerkanan2 {float: none;width:100%;margin:0;padding:0}
.header img {margin: 0 auto;padding: 10px 0;}
#header {width:100%;margin-right:0;float:none; }
#headerkanan1 {float: none;width:100%;margin:0;padding:0}
#headerkanan2 {float: none;width:100%;margin:0;padding:0}
.header img {margin: 0 auto;padding: 10px 0;}
#social-icons {margin-bottom: 0;height: 40px;width: 100%;clear: both;z-index: 2;position: relative;float: none;text-align: center;margin: 0 auto;}
.social-media-icons ul {padding: 0;float: none;margin: 0 auto;text-align: center;display: inline-table;}
.Header h1 {font-size:25px;}
form.gsc-search-box {margin: 0 0 15px;}
}

3. Simpan kode berikut ini di bawah kode <b:skin>[[ untuk tampilan di Layout/Tata Letak.

body#layout #header {width:28%;float:left}
body#layout #headerkanan1, body#layout #headerkanan2 {width:27%;float:right}

4. Simpan kode header blog tiga kolom berikut ini di bawah kode <div class='content-inner'> atau di atas kode navigasi menu.

        <header>
    <div class='region-inner header-inner'>
      <b:section class='header' id='header' maxwidgets='1' name='Header' showaddelement='no'>
        <b:widget id='Header1' locked='false' title='Tes Template (Header)' type='Header' version='1'>
          <b:widget-settings>
            <b:widget-setting name='displayUrl'>http://2.bp.blogspot.com/-jOCLj1IsB5c/XlJQ-y2qESI/AAAAAAABDVs/fPFJtsLlZyIn3cKcisLJ9uHQjGaGiJ36gCK4BGAYYCw/s1600/tes-template-logo.JPG</b:widget-setting>
            <b:widget-setting name='displayHeight'>40</b:widget-setting>
            <b:widget-setting name='sectionWidth'>752</b:widget-setting>
            <b:widget-setting name='useImage'>true</b:widget-setting>
            <b:widget-setting name='shrinkToFit'>false</b:widget-setting>
            <b:widget-setting name='imagePlacement'>REPLACE</b:widget-setting>
            <b:widget-setting name='displayWidth'>319</b:widget-setting>
          </b:widget-settings>
          <b:includable id='main'>
  <b:if cond='data:useImage'>
    <b:if cond='data:imagePlacement == &quot;BEHIND&quot;'>
      <!--
      Show image as background to text. You can't really calculate the width
      reliably in JS because margins are not taken into account by any of
      clientWidth, offsetWidth or scrollWidth, so we don't force a minimum
      width if the user is using shrink to fit.
      This results in a margin-width's worth of pixels being cropped. If the
      user is not using shrink to fit then we expand the header.
      -->
      <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'>
        <a expr:href='data:blog.homepageUrl' style='display: block'>
          <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:width='data:width' 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:tag cond='data:blog.url != data:blog.homepageUrl' expr:href='data:blog.homepageUrl' name='a'>
    <data:title/>
  </b:tag>
</b:includable>
        </b:widget>
      </b:section>
<b:section class='headerkanan2' id='headerkanan2' maxwidgets='1' showaddelement='yes'/>
<b:section class='headerkanan1' id='headerkanan1' maxwidgets='1' showaddelement='yes'> <b:widget id='BlogSearch2' locked='false' title='Search This Blog' type='BlogSearch' version='1'> <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'> <div expr:id='data:widget.instanceId + &quot;_form&quot;'> <form class='gsc-search-box' expr:action='data:blog.searchUrl'> <b:attr cond='not data:view.isPreview' name='target' value='_top'/> <table cellpadding='0' cellspacing='0' class='gsc-search-box'> <tbody> <tr> <td class='gsc-input'> <input autocomplete='off' class='gsc-input' expr:value='data:view.isSearch ? data:view.search.query.escaped : &quot;&quot;' name='q' size='10' title='search' type='text'/> </td> <td class='gsc-search-button'> <input class='gsc-search-button' expr:value='data:messages.search' title='search' type='submit'/> </td> </tr> </tbody> </table> </form> </div> </div> </b:includable> </b:widget> </b:section>
    </div>
    </header>

5. Simpan kode berikut ini di atas kode </head

<script>
//<![CDATA[
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("//netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css");
//]]>
</script>

Itu link ke awesome font --untuk ikon gambar media sosial. Jika sudah dipasang atau sudah ada, tak usah lagi.

Save!

6. Sekarang klik Layout/Tata Letak dan Refresh Page.

Header Blog Tiga Kolom


7. Klik Edit untuk mengubah logo/nama blog.
8. Klik Add a Gadget di kotak ketiga (headerkanan2), lalu pilih JavaScript/HTML
9. Copas kode berikut ini  untuk ikon media sosial

<div class='social-media-icons' id='social-icons'>
<ul>
<li class='media_icon'><a href='http://facebook.com'><i class='fa fa-facebook'/></i></a></li>
<li class='media_icon'><a href='http://twitter.com'><i class='fa fa-twitter'/></i></a></li>
<li class='media_icon'><a href='https://instagram.com'><i class='fa fa-instagram'/></i></a></li>
<li class='media_icon'><a href='https://youtube.com'><i class='fa fa-youtube'/></i></a></li>
<li class='media_icon'><a href='https://linkedin.com'><i class='fa fa-linkedin'/></i></a></li>
</ul>
</div>

10. Ubah Link media sosialnya dengan link akun media sosial Anda.

Demikian Cara Membuat Header Blog Tiga Kolom - All in One Blogger Header. Good Luck & Happy Blogging! (www.contohblog.com).*

Thanks for reading Cara Membuat Header Blog Tiga Kolom - All in One Blogger Header | Labels: Desain Blog edit this post
0 Komentar untuk "Cara Membuat Header Blog Tiga Kolom - All in One Blogger Header"

Contact Form

Name

Email *

Message *

Back To Top