Cara Membuat Header Blog Tiga Kolom

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.

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.

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'>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiI-q-25cMA3MR4TFgdsNGp2yIyUnDO8gUjlGJFGc8GU9HCCVO-yhDX9TalLX8kJ5FLLO5M_PvXyhos9C78_Ek5IhNpPiUJVbLYYAoXGETwoOUamLO3qyeUiiUDS1Djp6n6mDpOcYDjwxw/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 == "BEHIND"'>

<b:if cond='data:mobile'>
<div id='header-inner'>
<div class='titlewrapper' style='background: transparent'>
<b:if cond='data:blog.pageType != "item"'>
<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='"background-image: url(\"" + data:sourceUrl + "\"); " + "background-position: " + data:backgroundPositionStyleStr + "; " + data:widthStyleStr + "min-height: " + data:height + "_height: " + data:height + "background-repeat: no-repeat; "' id='header-inner'>
<div class='titlewrapper' style='background: transparent'>
<b:if cond='data:blog.pageType != "item"'>
<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/>

<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 + "_headerimg"' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>
</a>

<b:if cond='data:imagePlacement == "BEFORE_DESCRIPTION"'>
<b:include name='description'/>
</b:if>
</div>
</b:if>
<b:else/>

<div id='header-inner'>
<div class='titlewrapper'>
<b:if cond='data:blog.pageType != "item"'>
<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'>  <b:if cond='data:title != ""'> <h2 class='title'><data:title/></h2> </b:if> <div class='widget-content'> <div expr:id='data:widget.instanceId + "_form"'> <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 : ""' 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.

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).*

February 27, 2020

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