Kode Header Blog CB Blogger: Logo, Menu, Pencarian

Baca Juga

Tertarik menggunakan header blog seperti CB Blogger ini? Berikut ini Kode Header Blog CB Blogger: Logo, Menu, Pencarian.

Struktur Dasar Kode Header HTML

Bagian Header pada Template Blogger umumnya disusun menggunakan struktur HTML dan CSS yang menggabungkan elemen logo, menu navigasi, dan kotak pencarian secara berdampingan atau bertingkat. 

Berikut adalah kerangka contoh kode HTML untuk bagian header yang mencakup area logo, menu, dan pencarian:

<header id='masthead' class='site-header'>

  <div class='header-container'>

    

    <!-- Bagian Logo -->

    <div class='site-branding'>

      <a class='logo-link' expr:href='data:blog.homepageUrl'>

        <img alt='Logo Blog' class='logo-image' src='URL_GAMBAR_LOGO_ANDA'/>

      </a>

    </div>

    <!-- Bagian Menu Navigasi -->

    <nav class='main-navigation'>

      <ul class='menu-list'>

        <li><a href='/'>Beranda</a></li>

        <li><a href='#'>Tentang</a></li>

        <li><a href='#'>Kontak</a></li>

      </ul>

    </nav>

    <!-- Bagian Kotak Pencarian -->

    <div class='header-search'>

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

        <input name='q' placeholder='Cari artikel...' type='text'/>

        <button type='submit'>Cari</button>

      </form>

    </div>

  </div>

</header>

Tips Pengaturan

• Logo: Gunakan format gambar .png transparan agar terlihat rapi di berbagai warna latar belakang header.
• Menu: Anda bisa menyesuaikan tautan href sesuai dengan label atau halaman statis blog Anda.
• CSS Pendukung: Tambahkan properti display: flex; justify-content: space-between; align-items: center; pada kelas .header-container di bagian <b:skin> agar posisi logo, menu, dan pencarian sejajar secara horizontal.

Kode Header Blog CB Blogger: Logo, Menu, Pencarian

Berikut ini kode header CB Blogger. Desain awal sudah CB bagikan di Header Blog All in One.

KODE CSS: 

.container {max-width: 970px;margin: 0 auto;height:60px}
.header{float: left; width: 100%; background: #fff;height:auto;max-height:60px;position: relative; z-index:999; transition: 0.3s;}
.container {max-width: 970px;margin: 0 auto;height:60px}
.logo{float: left; margin:12px 0; transition: 0.3s;}
.logo .description {display:none}
.logo a,.logo p{float: left; transition: 0.3s; max-width:160px;}
.logo h1.title,.logo a,.logo p {font-size: 28px;margin: 0;padding: 0;color: #222;font-weight:700;text-transform:none;}
.logo a img {width:100%;vertical-align: middle;height: auto;}
.toggle-mobile-btn {display: none; float: left; line-height:60px; width: 28px; transition: 0.3s;}
.toggle-mobile-btn span:after,
.toggle-mobile-btn span:before {content: ""; position: absolute; left: 0; top: -7px;}
.toggle-mobile-btn span:after{top: 7px;}
.toggle-mobile-btn span {position: relative; display: inline-block;}
.toggle-mobile-btn span,
.toggle-mobile-btn span:after,
.toggle-mobile-btn span:before {width: 100%; height:4px; background-color: #888; transition: all 0.3s; backface-visibility: hidden;border-radius: 2px;}
.toggle-mobile-btn.open span {background-color: transparent;}
.toggle-mobile-btn.open span:before {transform: rotate(45deg) translate(5px, 5px);}
.toggle-mobile-btn.open span:after {transform: rotate(-45deg) translate(7px, -8px);}
.navigation {float:left; position: relative; margin-left:50px;}
.search-box {float: right; position: relative;}
.navigation ul {margin:0;padding:0}
.navigation li{float: left; margin: 0 12px; position: relative; list-style: none;}
.navigation li a{text-decoration: none; float: left;line-height: 60px; text-transform: uppercase; color: #4f4f4f; transition: 0.3s;font-size: 15px;font-weight:700}
.navigation li.sub-menu > a{padding-right: 20px;}
.navigation li.sub-menu > a:after{content:""; position: absolute; right: 0; top: 50%; border-top: 5px solid #4f4f4f; border-left: 5px solid transparent; border-right: 5px solid transparent; margin-top: -4px;}
.navigation li.sub-menu > a:hover:after{border-top-color: #F68E56;}
.navigation li.sub-menu ul{display: none; position: absolute; top: 100%; width: 160px; background: #f6f6f6; border: 1px solid #ededed; border-top: 0; z-index: 99999;}
.navigation li.sub-menu ul ul{top: 0; left: 100%;}
.navigation li.sub-menu > ul a:after{display: none;}
.navigation li.sub-menu:hover > ul{display: block;}
.navigation li.sub-menu li{margin: 0; width: 100%;}
.navigation li.sub-menu li a{padding: 8px 15px; width: 100%; box-sizing: border-box; line-height: normal; text-transform: capitalize;}
.navigation li a:hover {color: #c00;}
.navigation li.active a{color: #222;}
.navigation li.sub-menu li a:hover{background: #F68E56; color: #fff;}
.search-box a{float: left; line-height: 60px; transition: 0.3s;}
.search-icon {font-size: 20px;cursor:pointer}
.search-icon img{vertical-align: middle;}
.search-input{display: none; position: absolute; width: 230px; top: 100%; right: 0; background-color: #f6f6f6; padding: 15px; border: 1px solid #ededed; border-top: 0;}
.search-input input{width:90%; padding: 8px 10px; border: 1px solid #e9e9e9; letter-spacing: 1px;}
.header.fixed-header{position: fixed; top: 0; left: 0; width: 100%;z-index: 9999; height:auto; transition: 0.3s;box-shadow: 0 6px 8px 0 rgba(0,0,0,.08);}
.fixed-header .toggle-mobile-btn{line-height: 60px; transition: 0.3s;}
.fixed-header .logo{margin: 14px 0; transition: 0.3s;}
.fixed-header .logo a{transition: 0.3s; width:250px; text-decoration: none;}
.fixed-header .navigation li a{line-height: 60px; transition: 0.3s;}
.fixed-header .search-box a{line-height: 60px; transition: 0.3s;}

@media only screen and (max-width: 800px){
.header,.container {padding: 0;margin: 0 auto;display: block;width: 100%;}
.search-box a {padding-right: 15px;}
.toggle-mobile-btn {display: block;padding-left:15px;}
.logo{float: none; display: inline-block;margin:12px 0;height: 30px;}
.header{text-align: center; position: relative;}
.navigation{text-align: left; width: 200px; margin: 0; transition: 0.3s; position: absolute; left: -212px; top:60px; background-color: #e4e4e4; border-right: 1px solid #cdcdcd; border-bottom: 1px solid #cdcdcd;}
.fixed-header .navigation{top: 60px; transition: 0.3s;}
.navigation li{margin: 0; width: 100%;}
.navigation li a, .fixed-header .navigation li a{padding: 0 20px; width: 100%; line-height: 40px;}
.navigation li.sub-menu > a:after{right: 10px; top: 22px;}
.navigation li a:hover, .navigation li.active a{color: #222;}
.navigation li.sub-menu ul{position: relative; width: 100%; border: 0;}
.navigation li.sub-menu li a{padding: 6px 30px; font-size: 15px;font-weight:600}
}

KODE HTML:

<header class='header'>
<div class='container'>
<b:section class='logo' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Contoh Blog (Header)' type='Header' version='1'>
<b:widget-settings>
<b:widget-setting name='displayUrl'>https://blogger.googleusercontent.com/img/a/AVvXsEiL-eGGkqBeP3aMYBv0xjd5lLEEWlxbjmXBsVEziXmxhXQ0oGhzZ1HAl8YYW4km-xMulsOXQaqAVG-vD7y4XDQBhJAnYe86V59iPSuFDYKVanP2u1_UoqoE3aW7lMGsNbIBKcCWF0wEzjChzVKyFLF80FjsrGxZ2wxzePIIz2QEvr5f2QL1jLK5qx9V=s188</b:widget-setting>
<b:widget-setting name='displayHeight'>37</b:widget-setting>
<b:widget-setting name='sectionWidth'>241</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'>188</b:widget-setting>
</b:widget-settings>
<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'>
<h1 class='title' style='background: transparent; border-width: 0px'>
<b:include name='title'/>
</h1>
</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'>
<h1 class='title' style='background: transparent; border-width: 0px'>
<b:include name='title'/>
</h1>
</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: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 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>
</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;'>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<p class='title'><b:include name='title'/></p>
<b:else/>
<h1 class='title'><b:include name='title'/></h1>
</b:if>
<b:else/>
<p class='title'><b:include name='title'/></p>
</b:if>
<b:include name='description'/>
</div>
</div>
</b:if>
</b:includable>
<b:includable id='behindImageStyle'>
<b:if cond='data:sourceUrl'>
<b:include cond='data:this.image' data='{ image: data:this.image, selector: &quot;.header-widget&quot; }' name='responsiveImageStyle'/>
<style type='text/css'>
.header-widget {
background-position: <data:blog.locale.languageAlignment/>;
background-repeat: no-repeat;
background-size: cover;
}
</style>
</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='image'>
<a class='header-image-wrapper' expr:href='data:blog.homepageUrl'>
<b:include data='{ image: data:image, altText: data:blog.title.escaped, originalWidth: data:width, originalHeight: data:height }' name='responsiveImage'/>
</a>
</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>
<div class='search-box'>
<a action='/search' class='search-icon' method='get'><i class='fa fa-search'/></a>
<div class='search-input'>
<form action='/search?q='>
<input name='q' placeholder='Search...' title='Type and hit enter' type='text'/>
</form>
</div>
</div>
<a class='toggle-mobile-btn' href='javascript: void(0);'>
<span/>
</a>

<nav class='navigation'>
<ul>
<li class='active'><a href='/'>Home</a></li>
<li><a href='/p/about-cb.html'>About</a></li>
<li><a href='/p/kontak.html'>Kontak</a></li>
<li><a href='/p/disclaimer.html'>Disclaimer</a></li>
<li><a href='/p/pasang-iklan.html'>Advertise</a></li>
<li class='sub-menu'><a href='#'>Link</a>
<ul>
<li><a href='https://news.contohblog.com' target='_blank'>CB News</a></li>
<li><a href='https://mediansport.com' target='_blank'>Median Sport</a></li>
<li><a href='https://www.risalahislam.com' target='_blank'>Blog Islam</a></li>
</ul>
</li>
<li><a href='/search'>Indeks</a></li>
</ul>
</nav>
</div>
</header>

KODE JS:

<script>
//<![CDATA[
$(window).scroll(function(e){
if($(window).scrollTop() > 0){
$(".header").addClass("fixed-header");
} else{
$(".header").removeClass("fixed-header");
}
});
$(document).ready(function(e) {
if($(window).scrollTop() > 0){
$(".header").addClass("fixed-header");
}
$(".search-box .search-icon").click(function(e){
$(this).siblings(".search-input").slideToggle();
if($(window).width() < 1081){
$(".navigation").css("left", "-201px");
$(".toggle-mobile-btn").removeClass("open");
}
});
$(".toggle-mobile-btn").click(function(e){
if($(this).hasClass("open")){
$(this).removeClass("open");
$(".navigation").css("left", "-201px");
}else{
$(this).addClass("open");
$(".search-input").fadeOut();
$(".navigation").css("left", "0");
}
});
});
$(window).on("resize load", function(){
if($(window).width() > 1080){
$(".navigation").removeAttr("style");
$(".toggle-mobile-btn").removeClass("open");
}
});
//]]>
</script>

Demikian  Kode Header Blog CB Blogger: Logo, Menu, Pencarian. Three in One --Logo, Navigasi Menu, dan Kotak Pencarian.