Cara buat header blogger keren dengan logo

Ingin punya header blogger keren, ikuti langkah-langkah berikut. Mungkin bagi yang para pecinta blog baru masih sangat awam.

https://www.bourncreative.com/how-to-design-a-website-header/

Tapi jangan kuatir anda bisa mempunyai blog keren dengan menerapkan kode berikut.

Pertama anda cukup menambahkan beberapa kode berikut ke dalam template anda.

Jangan lupa untuk menonaktifkan header bawaan dengan menambahkan display:none; pada header h1 yang ada pada template anda.

Kemudian tambahkan css berikut tepat di atas ]]></b:skin>

header{display:block;position:relative;top:0;left:0;width:100%;background-color:#0d68b1;z-index:1000;height:65px;}
header a,header h1,header h1 a,header p{color:#fff;font-size:25px;font-weight:600}
header .header-inner{width:100%;height:64px;color:#fff;padding:0 20px;margin:0 auto;max-width:1040px}
header .header-logo {display: inline-block;overflow: hidden;float: left;padding: 0;width: 210px;color: #fff;margin-top: 12px;margin-right: 100px;}
header .header-logo img{display:block;width:auto;height:auto;vertical-align:middle}
.descriptionwrapper{display:none}
header .header-categories{display:block;position:relative;float:left;border-left:1px solid rgba(255,255,255,0.157);font-family:'Roboto',Arial;}
header .header-search {float:left;display:block;position:relative;width:calc(100% - 600px);height:55px;margin:5px auto;padding:10px;}
header .header-search .search{display:block;position:relative;width:calc(100% - 35px);margin:0 auto}
header .header-search .search i{position:absolute;top:8px;left:10px;color:#333;font-size:28px;cursor:pointer}
header .header-search .search input[type="search"]{width:100%;height:44px;padding:0 15px 0 50px;color:#666;font-size:16px;outline:none;border:1px solid #f1f1f1;border-radius:5px;background-color:#fff}
header .header-search .search ::-webkit-input-placeholder{color:#666}
header .header-search .search ::-moz-placeholder{color:rgba(255,255,255,0.8)}
header .header-search .search :-moz-placeholder{color:rgba(255,255,255,0.8)}
header .header-search .search :-ms-input-placeholder{color:rgba(255,255,255,0.8)}
header .header-menu{float:right}
header .header-menu ul{height:64px}
header .header-menu ul li{display:block;position:relative;float:left;margin:0;padding:0 0 0 12px;line-height:64px}
header .header-menu ul li a{color:#fff;font-size:17px;padding:4px}
header .header-menu ul li a:hover{color:#ff6;text-decoration:none}
#search {border-radius: 15px;border: 1px solid #f1f1f1;background:#fafafc}
#search form{margin:0 10px;padding:0;background:#fafafc}
#search fieldset{margin:0;padding:0}
#s{padding:0;font-weight:normal;color:#666;width:88%;margin:0;padding-left:3%;height:32px;border:0;background: #f9f9f9;}
input#searchsubmit{display:none;}
#search button{float:right;width:12%;padding:5px;background:transparent;color:#222;font-size:20px;cursor:pointer;border:0}
@media only screen and (max-width: 1024px) {
header .header-search{width:calc(100% - 440px)}
header .header-logo {margin-right:35px}
}
@media only screen and (max-width: 860px) {
header .header-search{display:none}
header .header-logo {margin-right:10px;}
header .header-search {display: block;width: 340px;margin-left: 10px;}
}
@media only screen and (max-width:768px) {
header .header-search {display: block;width: 300px;margin-left: 15px;}
}
@media only screen and (max-width:600px) {
header .header-search {display:none}
header .header-logo {margin-right:0;}
}
@media only screen and (max-width: 480px) {
header .header-inner{padding:0 12px;text-align:center}
header .header-logo{float:none;padding-left:0;padding-right:0}
header .header-search,header .header-menu{display:none}
}
.ul-base{margin:0;padding:0;list-style:none}
.clearfix{*zoom:1}
.clearfix::after{content:"";display:table;line-height:0;clear:both}

Tambahkan juga kode HTML berikut di bawah <header> atau yang serupa <herader...

<div class='header-inner clearfix'>

<div class='header-logo' itemscope='itemscope' itemtype='http://schema.org/WPHeader'>

<div class='logo section' id='header'><div class='widget Header' data-version='1' id='Header1'>

<div id='header-inner'>

<h1 style='text-indent:-9999px;margin:0 0 0 0;padding:0 0 0 0;height:0px;'>

</h1>

<a href='https://www.tulismind.blogspot.com/' style='display: block'>

<data:blog.title/>

</a>

</div>

</div></div>

</div>

<div class='header-search'>

<div id='search'>

<form action='/search' id='searchform' method='get'>

<input id='searchsubmit' type='submit' value='Search'/>

<input id='s' name='q' placeholder='Search...' type='text' value=''/>

<button type='submit'><i class='fa fa-search'></i></button>

</form>

</div>

</div>

<div class='header-menu'>

<ul class='ul-base'>

<li><a class='facebook' href='https://www.facebook.com/ tulismind.blogspot.com /' rel='nofollow' target='_blank'><i class='fa fa-facebook'></i></a></li>

<li><a class='twitter' href='https://twitter.com/ tulismind.blogspot.com ' rel='nofollow' target='_blank'><i class='fa fa-twitter'></i></a></li>

<li><a class='linkedin' href='https://www.linkedin.com/in/ tulismind.blogspot.com ' rel='nofollow' target='_blank'><i class='fa fa-linkedin'></i></a></li>

<li><a class='youtube' href='https://www.youtube.com/user/ tulismind.blogspot.com' rel='nofollow' target='_blank'><i class='fa fa-youtube'></i></a></li>

<li><a class='rss' href='https://feedburner.google.com/fb/a/mailverify?uri= tulismind.blogspot.com ' rel='nofollow' target='_blank'><i class='fa fa-rss'></i></a></li>

</ul>

</div>

</div>

dan terakhir tambahkan Kode skrip berikut di atas </body>

<script type='text/javascript'>
//<![CDATA[
//CSS Ready
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("https://fonts.googleapis.com/css?family=Roboto:400,400i,700,700i");loadCSS("https://fonts.googleapis.com/css?family=Oswald:300,400,500");loadCSS("https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css");loadCSS("https://fonts.googleapis.com/css?family=Droid+Sans:400,400i,700,700i");loadCSS("https://fonts.googleapis.com/icon?family=Material+Icons");
//]]>
</script>

Selesai dan lihat hasilnya ...