Widget Hero Header di Blogger adalah elemen penting dalam desain blog modern yang berfungsi sebagai bagian pembuka (hero section) untuk menarik perhatian pengunjung. Biasanya berisi judul utama, deskripsi singkat, tombol CTA (Call To Action), atau bahkan gambar background yang menarik.
Dengan menambahkan Hero Header, tampilan blog Anda akan terlihat lebih profesional, modern, dan memiliki struktur UI/UX yang lebih baik. Selain itu, ini juga dapat meningkatkan CTR (Click Through Rate), memperbaiki pengalaman pengguna, dan membantu SEO secara tidak langsung.
Apa Itu Widget Hero Header di Blogger?
Hero Header adalah bagian paling atas dari sebuah halaman web atau blog yang biasanya langsung terlihat saat pengunjung membuka situs. Dalam konteks Blogger, Hero Header bisa dibuat menggunakan HTML, CSS, dan sedikit JavaScript tanpa perlu plugin tambahan.
Fungsi utama Hero Header antara lain:
- Menampilkan identitas blog secara jelas
- Meningkatkan daya tarik visual halaman utama
- Menampilkan CTA seperti “Baca Artikel”, “Mulai”, atau “Pelajari Lebih Lanjut”
- Meningkatkan pengalaman pengguna (UX)
- Membantu struktur SEO halaman utama
Manfaat Menambahkan Hero Header di Blogger
Sebelum masuk ke tahap pemasangan, penting untuk memahami manfaatnya agar Anda tahu kenapa fitur ini sangat direkomendasikan.
1. Meningkatkan Kesan Profesional
Blog dengan Hero Header terlihat seperti website profesional, bukan sekadar blog biasa. Ini sangat penting jika Anda ingin membangun brand.
2. Meningkatkan SEO On-Page
Hero Header membantu struktur heading (H1, H2) menjadi lebih rapi sehingga Google lebih mudah memahami topik utama blog Anda.
3. Meningkatkan Engagement Pengunjung
Dengan CTA yang jelas, pengunjung lebih mudah diarahkan ke artikel penting atau halaman tertentu.
4. Meningkatkan AdSense Revenue
Tampilan yang rapi dan profesional biasanya meningkatkan waktu kunjungan (dwell time), yang berdampak pada performa iklan AdSense.
Persiapan Sebelum Menambahkan Widget Hero Header
Sebelum mulai, pastikan Anda sudah menyiapkan beberapa hal berikut:
- Akses ke dashboard Blogger
- Template Blogger yang mendukung kustomisasi HTML/CSS
- Ide desain Hero (judul, deskripsi, dan tombol CTA)
Jika sudah siap, kita lanjut ke proses pemasangan.
Cara Menambahkan Widget Hero Header di Blogger
Di bagian ini kita akan membahas langkah-langkah pemasangan secara lengkap dan mudah diikuti, bahkan untuk pemula.
Langkah 1: Masuk ke Dashboard Blogger
Silakan login ke akun Blogger Anda, lalu pilih blog yang ingin diberi Hero Header.
Langkah 2: Masuk ke Menu Tema (Theme)
Klik menu Tema lalu pilih tombol Edit HTML. Di sini Anda akan menambahkan kode Hero Header secara manual.
Langkah 3: Tambahkan CSS Hero Header
Letakkan kode CSS berikut di atas tag </head>:
<!-- ccs Widget -->
<style>
.headC{
font-family:var(--font-bodyAlt);
font-weight:900;
font-size:20px;
line-height:1.4em;
color:var(--fontC);
letter-spacing:-0.5px;
text-align:center;
display:flex;
justify-content:center;
align-items:center;
margin:0 auto 12px;
width:100%;
}
.desC{
font-family:var(--font-bodyAlt);
text-align:center;
font-size:13px;
line-height:1.6em;
padding-bottom:0;
margin:15px auto 0;
}
.desC:after{
content:'';
width:20px;
display:block;
position:relative;
bottom:-6px;
border-bottom:1.5px solid #989b9f;
margin:3px auto;
animation:animatebord 3s infinite;
}
@keyframes animatebord{
0%{width:20px}
50%{width:100px}
100%{width:20px}
}
#search-box{
position:relative;
width:100%;
margin:15px 0;
}
#search-form{
height:40px;
border:1px solid var(--linkC);
border-radius:5px;
overflow:hidden;
display:flex;
align-items:center;
background:var(--contentB);
}
#search-text{
width:100%;
border:0;
outline:none;
background:transparent;
font-size:14px;
text-align:center;
padding:10px 15px;
color:var(--fontC);
}
.btn-post{
border-radius:25px 2px 25px 2px !important;
display:inline-flex;
align-items:center;
gap:8px;
margin-bottom:-5px;
}
.btn-post svg{
width:18px;
height:18px;
}
.btn-post{
display:inline-flex;
align-items:center;
gap:8px;
padding:12px 18px;
background:var(--linkC);
color:#fff !important;
border-radius:12px;
text-decoration:none;
font-weight:600;
box-shadow:0 4px 12px rgba(0,0,0,.08);
}
</style>
<div class="widget HTML" data-version="2" id="HTML6">
<div class="widget-content">
<style>
.tnCbox {
padding: 5px;
text-align: center;
position: relative
}
.tnCbox h2 {
font-size: 1.6em;
line-height: 1.6em;
margin-bottom: 0;
padding-bottom: 0
}
.tnCbox ul {
clear: both;
margin: 15px 0 20px;
width: 100%;
display: flex;
padding: 0;
flex-wrap: wrap;
justify-content: space-between
}
.tnCbox.icon-p-2 li {
position: relative;
width: 30%;
list-style: none;
line-height: 1.3em;
text-align: center;
border-radius: 10px;
margin: 6px 0;
background: var(--contentB);
box-shadow: 0 5px 35px rgb(0 0 0/7%);
padding: 6px 0 12px;
display: flex;
align-items: center;
justify-content: center
}
.tnCbox li a {
display: block;
text-decoration: none;
color: var(--fontC)
}
.tnCbox li svg {
margin: 3px 0;
width: 35px;
height: 35px;
display: inline-block
}
.tnCbox li span {
display: block;
padding: 0 3px
}
.drK .tnCbox li {
background: var(--darkBa)
}
</style>
Langkah 4: Tambahkan HTML Hero Header
Letakkan kode berikut di bawah tag <body> atau tepat setelah header blog:
<div class="section" id="top-widget">
<!-- Welcome Widget -->
<div class="widget HTML" data-version="2" id="HTML5">
<div class="widget-content">
<div class="welcomeSec">
<div class="WelcomeSec" id="WelcomeSec">
<h2 class="headC">
Selamat Datang di TipsTechPraktis!
</h2>
<p class="desC">
<b>TipsTechPraktis</b> :
Mungkin kamu ingin mencari Blogging Tutorials, Tips, Tricks,
Templates dan lainnya...
</p>
<div id="search-box">
<form action="/search" id="search-form" method="get" target="_top">
<input
id="search-text"
name="q"
placeholder="Apa yang ingin kamu cari hari ini?"
type="text"
/>
</form>
</div>
<center>
<a class="button btn-post" href="/search" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" class="line" viewbox="0 0 24 24">
<g transform="translate(3.500000, 3.500000)" stroke="#fff" fill="none">
<line x1="9.8352" y1="16.0078" x2="16.2122" y2="16.0078"></line>
<path d="M12.5578,1.3589
C11.2138,0.3509 9.3078,0.6229 8.2998,1.9659
C8.2998,1.9659 3.2868,8.6439 1.5478,10.9609
C-0.1912,13.2789 1.4538,16.1509 1.4538,16.1509
C1.4538,16.1509 4.6978,16.8969 6.4118,14.6119
C8.1268,12.3279 13.1638,5.6169 13.1638,5.6169
C14.1718,4.2739 13.9008,2.3669 12.5578,1.3589 Z">
</path>
<line x1="7.0041" y1="3.7114" x2="11.8681" y2="7.3624"></line>
</g>
</svg>
See All Posts
</a>
</center>
</div>
</div>
</div>
</div>
<div class="tnCbox coll-3 icon-p-2">
<h2>
<span> Tutorial Categories Here
</span>
</h2>
<ul>
<li onclick="vibRate(50)">
<a href="/search/label/Linux" title="Linux"> <!--?xml version="1.0" ?-->
<svg enable-background="new 0 0 24 24" id="Layer_1" version="1.1" viewbox="0 0 24 24" space="preserve" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink">
<g>
<path d="M20.9262695,19.0742188c-0.2070313-0.1357422-0.4213867-0.2763672-0.5727539-0.4277344 c-0.0883789-0.0883789-0.0478516-0.4970703-0.0263672-0.7167969c0.0415039-0.421875,0.0844727-0.8574219-0.1992188-1.1704102 c-0.0360107-0.0397949-0.0986938-0.0784912-0.1565552-0.1172485C19.9853516,16.4384155,20,16.2368164,20,16 c0-3.246582-1.4956055-5.1196289-2.6972656-6.625C16.5751953,8.4633789,16,7.7431641,16,7l0.0009766-0.2329102 c0.0078125-1.3803711,0.0239258-4.253418-1.5019531-5.7880859C13.8530273,0.3295898,13.012207,0,12,0 C9.8994141,0,8.5,1.0205078,8.5,6c0,1.3706055-0.5766602,2.4931641-1.1870117,3.6816406 c-0.2675781,0.5209961-0.5444336,1.0600586-0.7763672,1.6298828c-0.4187622,1.0296631-1.3328247,3.399231-1.5014648,4.7835693 c-0.5404663,0.227417-0.6967773,0.8345337-0.784668,1.1973877c-0.0302734,0.1245117-0.0761719,0.3120117-0.0805664,0.3339844 c-0.0742188,0.0458984-0.3535156,0.1010742-0.5380859,0.1376953C3.0214844,17.8852539,2,18.0874023,2,19 c0,0.265625,0.0395508,0.4912109,0.0830078,0.7260742C2.1601563,20.1420898,2.2329102,20.534668,2.0161133,21.375 C2.0053711,21.4155273,2,21.4580078,2,21.5c0,1.2021484,1.8671875,1.3579102,2.9829102,1.4506836 c0.1855469,0.015625,0.3398438,0.0273438,0.4389648,0.0429688c0.1538086,0.0244141,0.4760742,0.1728516,0.7875977,0.3164063 C6.8759766,23.6176758,7.7055664,24,8.5,24c0.3646851,0,0.6731567-0.1640015,0.906189-0.4336548l0.0108032,0.0093384 C9.6391602,23.328125,11.1118164,23,12,23h3.0606689c0.0551147,0.192749,0.1345215,0.3848877,0.2879639,0.5532227 C15.6186523,23.8496094,16.0058594,24,16.5,24c1.2978516,0,1.9272461-0.6689453,2.5356445-1.3154297 c0.1025391-0.109375,0.2075195-0.2207031,0.3178711-0.3310547c0.253418-0.253418,0.7490234-0.434082,1.1865234-0.59375 C21.2578125,21.4975586,22,21.2265625,22,20.5C22,19.7788086,21.4047852,19.3881836,20.9262695,19.0742188z" fill="#303C42">
</path>
<path d="M7.4633789,11.6884766c0.2148438-0.5292969,0.4814453-1.0483398,0.7392578-1.5498047 C8.5454712,9.4708862,8.8910522,8.7890015,9.140686,8.0525513C9.7478638,8.588623,10.62146,9,11,9 c0.2092285,0,1.8739014-0.5585938,2.8296509-1.1994629c1.9204712,3.9281616,2.1564941,6.5164185,2.168457,8.9494019 c-0.4832153,0.5229492-0.7327271,1.7857056-0.8618774,2.9510498c-1.4706421,1.4830322-4.4118652,1.3833618-5.7052612,1.1768188 c-0.2506714-0.4736938-0.6253662-0.9259644-1.1453247-1.2879639c-0.4926758-0.3432617-0.875-1.1435547-1.2124023-1.8496094 c-0.3257446-0.6814575-0.6207275-1.2914429-1.0437012-1.5733032C6.1688232,15.1281128,6.8590088,13.1733398,7.4633789,11.6884766z" fill="#FFFFFF">
</path>
<path d="M8.5,23c-0.5751953,0-1.2939453-0.331543-1.8720703-0.5976563 c-0.4243164-0.1958008-0.7592773-0.3505859-1.0498047-0.3959961c-0.1157227-0.0185547-0.2954102-0.0341797-0.512207-0.0522461 c-1.4892578-0.1240234-1.9453125-0.3046875-2.0537109-0.4418945c0.2368164-0.9829102,0.1357422-1.527832,0.0541992-1.9682617 C3.0336914,19.3676758,3,19.1992188,2.9946289,19.0092773c0.0830078-0.1157227,0.5883789-0.2158203,0.831543-0.2641602 c0.425293-0.0839844,0.7924805-0.1567383,1.0273438-0.3916016c0.222168-0.2216797,0.2963867-0.5283203,0.3686523-0.824707 C5.3505859,17,5.4038086,17,5.4697266,16.9951172c0.1767578,0.0791016,0.4921875,0.7392578,0.7011719,1.1762695 c0.390625,0.8178711,0.8334961,1.7446289,1.543457,2.2387695c1.0058594,0.7006836,1.2216797,1.7685547,1.0541992,2.3032227 C8.7084961,22.9033203,8.6186523,23,8.5,23z" fill="#F68919">
</path>
<path d="M20.1967773,20.8203125c-0.534668,0.1953125-1.140625,0.4160156-1.550293,0.8261719 c-0.1176758,0.1176758-0.2294922,0.2363281-0.3388672,0.3530273C17.7607422,22.5800781,17.3657227,23,16.5,23 c-0.2006836,0-0.3393555-0.0405273-0.4121094-0.1201172c-0.1499023-0.1650391-0.1137695-0.5561523-0.0981445-0.7231445 C15.9960938,22.0888672,16,22.034668,16,22.0004883c0.0041504-0.6550903,0.1497192-2.4380493,0.3689575-3.5844116 c0.0401611,0.0574341,0.0797729,0.1152344,0.1290894,0.1674194C16.7558594,18.855957,17.1020508,19,17.5,19l0.1762695,0.0009766 c0.0561523,0.0004883,0.112793,0.0009766,0.1704102,0.0009766c0.4997559,0,1.0383911-0.0415039,1.465271-0.4483643 c0.0254517,0.2883911,0.1088257,0.5742188,0.3345337,0.7999268c0.2241211,0.2241211,0.4936523,0.4008789,0.7314453,0.5571289 C20.7539063,20.1572266,21,20.3310547,21.0161133,20.4404297C20.9360352,20.550293,20.4912109,20.7128906,20.1967773,20.8203125z" fill="#F68919">
</path>
<path d="M11.4536133,6.0009766C12.3564453,6.190918,13.2333984,6.5839844,13.449707,6.875 c-0.5048828,0.3613281-2.1108398,1.0878906-2.4375,1.1254883C10.6669922,7.9614258,9.59375,7.2631836,9.4956055,7.0356445 C9.590332,6.7490234,10.6967773,6.0297852,11.4536133,6.0009766z" fill="#F68919">
</path>
<path d="M13.2962036,5.5737915c0.1577759-0.1502075,0.2684937-0.4021606,0.2684937-0.7032471 c0-0.4677734-0.2528076-0.8470459-0.5646973-0.8470459s-0.5646973,0.3792725-0.5646973,0.8470459 c0,0.1412964,0.0287476,0.2685547,0.069519,0.3856812C12.7561646,5.3391724,13.0296021,5.444458,13.2962036,5.5737915z" fill="#303C42">
</path>
<path d="M13,3.1764526c-0.4678345,0-0.8470459,0.5688477-0.8470459,1.2705688 c0,0.2883911,0.0755005,0.5413818,0.1834717,0.7546387c0.0739136,0.022644,0.1901855,0.0617676,0.168396,0.0545654 c-0.0407715-0.1171265-0.069519-0.2443848-0.069519-0.3856812c0-0.4677734,0.2528076-0.8470459,0.5646973-0.8470459 s0.5646973,0.3792725,0.5646973,0.8470459c0,0.3010864-0.1107178,0.5530396-0.2684937,0.7032471 c0.0211859,0.0117068-0.0020142,0.0001831,0.0507202,0.0265503c0.2937012-0.1994629,0.5001221-0.6382446,0.5001221-1.1533203 C13.8470459,3.7453003,13.4678345,3.1764526,13,3.1764526z" fill="#FFFFFF">
</path>
<path d="M10.9050903,5.0831299c0.0752563-0.1898193,0.130188-0.3991699,0.130188-0.6361084 c0-0.7017212-0.3792114-1.2705688-0.8470459-1.2705688S9.3411865,3.7453003,9.3411865,4.4470215 c0,0.4717407,0.1791992,0.8669434,0.4336548,1.0861206c0.011096-0.0143919,0.0360966-0.0190797,0.0510864-0.0261841 C9.7046509,5.3515625,9.6235352,5.12854,9.6235352,4.8705444c0-0.4677734,0.2528076-0.8470459,0.5646973-0.8470459 s0.5646973,0.3792725,0.5646973,0.8470459c0,0.0935669-0.0168457,0.1796265-0.0355225,0.2637939 C10.7624674,5.1249032,10.7629395,5.1174927,10.9050903,5.0831299z" fill="#FFFFFF">
</path>
<lineargradient gradientunits="userSpaceOnUse" id="SVGID_1_" x1="10.3759308" x2="17.1543121" y1="6.8173065" y2="13.5956879">
<stop offset="0" style="stop-color:#000000;stop-opacity:0.1">
</stop>
<stop offset="1" style="stop-color:#000000;stop-opacity:0">
</stop>
</lineargradient>
<path d="M13.8296509,7.8005371C12.8739014,8.4414063,11.2092285,9,11,9 c-0.37854,0-1.2521362-0.411377-1.859314-0.9474487l6.7783813,6.7783813 C15.7537231,12.9036255,15.258728,10.7236328,13.8296509,7.8005371z" fill="url(#SVGID_1_)">
</path>
<lineargradient gradientunits="userSpaceOnUse" id="SVGID_2_" x1="5.2450533" x2="23.0856457" y1="10.0596561" y2="18.3788605">
<stop offset="0" style="stop-color:#FFFFFF;stop-opacity:0.2">
</stop>
<stop offset="1" style="stop-color:#FFFFFF;stop-opacity:0">
</stop>
</lineargradient>
<path d="M20.9262695,19.0742188c-0.2070313-0.1357422-0.4213867-0.2763672-0.5727539-0.4277344 c-0.0883789-0.0883789-0.0478516-0.4970703-0.0263672-0.7167969c0.0415039-0.421875,0.0844727-0.8574219-0.1992188-1.1704102 c-0.0360107-0.0397949-0.0986938-0.0784912-0.1565552-0.1172485C19.9853516,16.4384155,20,16.2368164,20,16 c0-3.246582-1.4956055-5.1196289-2.6972656-6.625C16.5751953,8.4633789,16,7.7431641,16,7l0.0009766-0.2329102 c0.0078125-1.3803711,0.0239258-4.253418-1.5019531-5.7880859C13.8530273,0.3295898,13.012207,0,12,0 C9.8994141,0,8.5,1.0205078,8.5,6c0,1.3706055-0.5766602,2.4931641-1.1870117,3.6816406 c-0.2675781,0.5209961-0.5444336,1.0600586-0.7763672,1.6298828c-0.4187622,1.0296631-1.3328247,3.399231-1.5014648,4.7835693 c-0.5404663,0.227417-0.6967773,0.8345337-0.784668,1.1973877c-0.0302734,0.1245117-0.0761719,0.3120117-0.0805664,0.3339844 c-0.0742188,0.0458984-0.3535156,0.1010742-0.5380859,0.1376953C3.0214844,17.8852539,2,18.0874023,2,19 c0,0.265625,0.0395508,0.4912109,0.0830078,0.7260742C2.1601563,20.1420898,2.2329102,20.534668,2.0161133,21.375 C2.0053711,21.4155273,2,21.4580078,2,21.5c0,1.2021484,1.8671875,1.3579102,2.9829102,1.4506836 c0.1855469,0.015625,0.3398438,0.0273438,0.4389648,0.0429688c0.1538086,0.0244141,0.4760742,0.1728516,0.7875977,0.3164063 C6.8759766,23.6176758,7.7055664,24,8.5,24c0.3646851,0,0.6731567-0.1640015,0.906189-0.4336548l0.0108032,0.0093384 C9.6391602,23.328125,11.1118164,23,12,23h3.0606689c0.0551147,0.192749,0.1345215,0.3848877,0.2879639,0.5532227 C15.6186523,23.8496094,16.0058594,24,16.5,24c1.2978516,0,1.9272461-0.6689453,2.5356445-1.3154297 c0.1025391-0.109375,0.2075195-0.2207031,0.3178711-0.3310547c0.253418-0.253418,0.7490234-0.434082,1.1865234-0.59375 C21.2578125,21.4975586,22,21.2265625,22,20.5C22,19.7788086,21.4047852,19.3881836,20.9262695,19.0742188z" fill="url(#SVGID_2_)">
</path>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>
<span> Linux
</span>
<!--?xml-->
</a>
</li>
<li onclick="vibRate(50)">
<a href="/search/label/Windows" title="Windows"> <!--?xml version="1.0" ?-->
<!--?xml version="1.0" ?-->
<svg enable-background="new 0 0 24 24" id="Layer_1" version="1.1" viewbox="0 0 24 24" space="preserve" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink">
<g>
<polygon fill="#009ADA" points="12,11 23,11 23,1 12,2 ">
</polygon>
<polygon fill="#009ADA" points="10,11 10,2.1818237 1,3 1,11 ">
</polygon>
<polygon fill="#FFFFFF" opacity="0.2" points="12,2 12,2.25 23,1.25 23,1 ">
</polygon>
<rect height="0.25" opacity="0.1" width="11" x="12" y="10.75">
</rect>
<polygon fill="#FFFFFF" opacity="0.2" points="1,3 1,3.25 10,2.4318237 10,2.1818237 ">
</polygon>
<rect height="0.25" opacity="0.1" width="9" x="1" y="10.75">
</rect>
<polygon fill="#009ADA" points="12,13 23,13 23,23 12,22 ">
</polygon>
<polygon fill="#009ADA" points="10,13 10,21.8181763 1,21 1,13 ">
</polygon>
<polygon opacity="0.1" points="12,22 12,21.75 23,22.75 23,23 ">
</polygon>
<rect fill="#FFFFFF" height="0.25" opacity="0.2" width="11" x="12" y="13">
</rect>
<polygon opacity="0.1" points="1,21 1,20.75 10,21.5681763 10,21.8181763 ">
</polygon>
<rect fill="#FFFFFF" height="0.25" opacity="0.2" width="9" x="1" y="13">
</rect>
<lineargradient gradientunits="userSpaceOnUse" id="SVGID_1_" x1="-0.0995096" x2="25.6315994" y1="5.3579059" y2="17.3565197">
<stop offset="0" style="stop-color:#FFFFFF;stop-opacity:0.2">
</stop>
<stop offset="1" style="stop-color:#FFFFFF;stop-opacity:0">
</stop>
</lineargradient>
<path d="M12,2v9h11V1L12,2z M1,11h9V2.1818237L1,3V11z M12,22l11,1V13H12V22z M1,21l9,0.8181763V13H1V21z" fill="url(#SVGID_1_)">
</path>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>
<span> Windows
</span>
<!--?xml-->
<!--!doctype-->
<!--?xml-->
</a>
</li>
<li onclick="vibRate(50)">
<a href="/search/label/Android" title="Android"> <!--?xml version="1.0" ?-->
<svg height="512px" style="enable-background:new 0 0 512 512;" version="1.1" viewbox="0 0 512 512" width="512px" space="preserve" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink">
<g id="_x31_32-android">
<g>
<g>
<g>
<path d="M77.049,196.193c-16.467,0-29.826,13.397-29.826,29.907V345.72 c0,16.51,13.359,29.905,29.826,29.905c16.463,0,29.826-13.396,29.826-29.905V226.101 C106.875,209.591,93.512,196.193,77.049,196.193L77.049,196.193z M77.049,196.193" style="fill:#9CDB53;">
</path>
<path d="M434.949,196.193c-16.463,0-29.822,13.397-29.822,29.907V345.72 c0,16.51,13.359,29.905,29.822,29.905c16.469,0,29.828-13.396,29.828-29.905V226.101 C464.777,209.591,451.418,196.193,434.949,196.193L434.949,196.193z M434.949,196.193" style="fill:#9CDB53;">
</path>
<g>
<path d="M136.698,377.361c0,16.51,13.359,29.905,29.828,29.905v58.078 c0,16.51,13.363,29.905,29.82,29.905c16.467,0,29.826-13.396,29.826-29.905v-58.078h59.648v58.078 c0,16.51,13.365,29.905,29.834,29.905c16.457,0,29.82-13.396,29.82-29.905v-58.078c16.463,0,29.826-13.396,29.826-29.905 V197.928H136.698V377.361z M136.698,377.361" style="fill:#9CDB53;">
</path>
<path d="M330.441,73.489l26.545-32.268c5.254-6.371,4.355-15.793-1.996-21.053 c-6.381-5.236-15.746-4.369-21,2.002l-29.016,35.258C290.004,50.641,273.508,46.663,256,46.663 c-17.748,0-34.449,4.125-49.566,11.124l-28.251-35.405c-5.156-6.437-14.521-7.505-20.963-2.335 c-6.412,5.171-7.457,14.563-2.324,21.028l26.185,32.831c-26.875,21.923-44.382,54.936-44.382,92.377h238.603 C375.301,128.604,357.582,95.408,330.441,73.489L330.441,73.489z M226.172,121.427c-8.23,0-14.91-6.697-14.91-14.953 c0-8.253,6.68-14.953,14.91-14.953c8.238,0,14.918,6.699,14.918,14.953C241.09,114.73,234.41,121.427,226.172,121.427 L226.172,121.427z M285.82,121.427c-8.23,0-14.91-6.697-14.91-14.953c0-8.253,6.68-14.953,14.91-14.953 c8.236,0,14.916,6.699,14.916,14.953C300.736,114.73,294.057,121.427,285.82,121.427L285.82,121.427z M285.82,121.427" style="fill:#9CDB53;">
</path>
</g>
</g>
</g>
</g>
</g>
<g id="Layer_1">
</g>
</svg>
<span> Android
</span>
<!--!doctype-->
<!--?xml-->
</a>
</li>
<li onclick="vibRate(50)">
<a href="/search/label/WordPress" title="WordPress"> <!--?xml version="1.0" ?-->
<svg enable-background="new 0 0 515.91 728.5" height="512" id="Layer_1" version="1.1" viewbox="0 0 512.00003 512" width="512" space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:svg="http://www.w3.org/2000/svg">
<defs id="defs7">
</defs>
<g id="g3075">
<rect height="512" id="rect2984" rx="64" ry="64" style="fill:#2984b8;fill-opacity:1;fill-rule:nonzero;stroke:none" width="512" x="0" y="0">
</rect>
<path d="M 56.003263,256.10805 C 55.370063,145.96554 146.73377,55.22824 257.47508,55.92914 366.32089,56.63174 456.0702,146.55864 456,256.24895 455.964,366.28886 365.65239,456.13746 255.19057,456.07486 145.71447,456.00486 56.003263,365.93406 56.003263,256.10805 z m 120.295507,160.74081 0.351,-0.035 v -0.3496 c -0.6317,-2.0052 -1.1597,-4.0417 -1.8617,-6.0087 -27.0318,-74.05031 -54.0346,-148.10421 -81.104507,-222.15461 -0.4593,-1.2643 -0.5645,-3.3704 -1.9669,-3.4713 -1.8253,-0.1043 -1.8618,2.1374 -2.4249,3.4713 -10.4273,25.3131 -14.8176,51.793 -12.852,79.0348 3.7233,51.8938 25.841407,94.66421 65.835107,127.98771 10.3554,8.64 21.4497,16.2608 34.0239,21.5252 z m 169.65902,-54.1774 c 0.4548,-1.0504 0.9125,-1.753 1.1231,-2.5269 8.9913,-29.98441 18.1199,-59.90091 26.7571,-89.98601 6.1407,-21.3565 4.0318,-42.2435 -5.6553,-62.2922 -3.5176,-7.2313 -7.7981,-13.9756 -11.9397,-20.826 -4.7412,-7.8278 -9.0553,-15.8348 -10.7796,-24.99831 -3.7219,-19.3443 8.3534,-36.1304 27.7718,-38.6938 0.8102,-0.1044 1.7214,0.035 2.2814,-0.8835 0,-1.3305 -1.1216,-1.8574 -1.9654,-2.5218 -40.3066,-34.090398 -86.86671,-48.314699 -139.18302,-42.485098 -38.5852,4.3182 -72.1224,20.363401 -100.7382,46.559898 -9.5497,8.7774 -17.9412,18.6052 -25.3469,29.2487 -0.6319,0.8748 -1.6879,1.8209 -1.2331,2.9478 0.5646,1.4661 2.1776,0.9131 3.3739,0.9444 3.3696,0.1043 6.7054,0.052 10.1099,0.1043 14.4666,0.2139 28.8661,-1.3635 43.2976,-1.8922 5.5821,-0.1739 8.6676,2.1444 9.0568,6.6 0.3877,4.1826 -2.5636,7.2678 -7.9001,8.0087 -4.3186,0.5948 -8.6388,0.94611 -12.9894,1.33221 -6.1484,0.56 -6.2155,0.56 -4.2164,6.4956 20.4348,60.8122 40.8711,121.5965 61.3059,182.40861 0.493,1.3704 0.5327,3.0574 2.1807,3.8939 1.2285,-0.8105 1.4344,-2.1061 1.8221,-3.2626 12.1485,-36.34261 24.262,-72.71471 36.374,-109.06081 0.6379,-1.8922 1.0178,-3.7165 0.2868,-5.7183 -8.712,-23.7373 -17.3873,-47.473 -25.9817,-71.2086 -0.9172,-2.5235 -2.4967,-3.2991 -5.0572,-3.4765 -5.1611,-0.3496 -10.3633,-0.91651 -15.4861,-1.65221 -4.1109,-0.6313 -6.5297,-3.8991 -6.1421,-7.6887 0.4166,-4.0765 3.0505,-6.4591 7.2988,-6.673 0.9828,-0.07 1.9656,0 2.9484,0.07 19.6335,1.153 39.2566,2.3895 58.91761,1.6869 11.2026,-0.4261 22.4004,-1.2643 33.60281,-1.7269 4.7414,-0.207 7.5172,2.2487 7.9337,6.3234 0.4244,4.1774 -2.1043,7.3757 -6.7708,8.0748 -4.5994,0.6661 -9.20031,1.05571 -13.79981,1.47831 -6.4932,0.6313 -6.5297,0.593 -4.497,6.6365 20.22731,60.1095 40.45601,120.2503 60.71071,180.36851 0.4593,1.4122 0.5967,3.0957 2.5287,4.3913 z m -86.40891,-89.46771 c -2.0769,1.793 -2.2494,3.553 -2.8155,5.0939 -4.45601,12.8504 -8.84631,25.7687 -13.26871,38.6208 -12.1837,35.43131 -24.3657,70.85731 -36.6243,106.28171 -1.1552,3.3391 -1.6512,5.5513 2.9483,6.7095 34.0621,8.6365 67.76551,7.8278 101.29822,-2.7061 3.3725,-1.0852 3.9309,-2.4521 2.7391,-5.753 -16.3587,-44.5234 -32.58481,-89.11121 -48.84311,-133.63991 -1.7121,-4.7356 -3.5052,-9.4104 -5.434,-14.6069 z m 87.92111,136.58591 c 24.1172,-5.8278 66.3937,-57.5095 79.139,-97.29201 15.48441,-48.2417 11.34441,-94.9739 -11.4832,-140.4434 -1.1919,0.9843 -1.0193,1.713 -0.9477,2.3826 2.46,22.9304 -1.2635,45.0521 -8.741,66.6452 -18.7852,54.2451 -37.6772,108.45731 -56.4991,162.67111 -0.6638,1.9357 -1.7471,3.7948 -1.468,6.0365 z" id="path6-8" style="fill:#ffffff;fill-opacity:1">
</path>
</g>
</svg>
<span> WordPress
</span>
<!--?xml-->
</a>
</li>
<li onclick="vibRate(50)">
<a href="/search/label/Blogger?" title="Blogger"> <!--?xml version="1.0" ?-->
<svg height="1.04167in" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd" version="1.1" viewbox="0 0 384 384" width="1.04167in" space="preserve" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink">
<defs>
<style type="text/css">
.fil1 {fill:#FEFEFE}
.fil0 {fill:#F58220}
</style>
</defs>
<g id="Layer_x0020_1">
<g id="_521246608">
<rect class="fil0" height="384" rx="37" ry="37" width="384">
</rect>
<path class="fil1" d="M240 256l-96 0c-9,0 -17,-7 -17,-16 0,-9 8,-16 17,-16l96 0c9,0 16,7 16,16 0,9 -7,16 -16,16zm-96 -129l47 0c9,0 16,7 16,16 0,9 -7,16 -16,16l-47 0c-9,0 -17,-7 -17,-16 0,-9 8,-16 17,-16zm181 42l-2 -5 -4 -3c-5,-3 -30,1 -37,-5 -4,-5 -5,-13 -7,-23 -2,-21 -4,-22 -7,-29 -12,-25 -44,-44 -66,-46l-59 0c-47,0 -85,38 -85,84l0 42 0 57c0,47 38,85 85,85l97 0c47,0 85,-38 85,-85l1 -56 0 -12 -1 -4z">
</path>
</g>
</g>
</svg>
<span> Blogger
</span>
<!--!doctype-->
<!--?xml-->
</a>
</li>
<li onclick="vibRate(50)">
<a href="/search/label/Code" title="Code"> <!--?xml version="1.0" ?-->
<svg height="72" viewbox="0 0 72 72" width="72" xmlns="http://www.w3.org/2000/svg">
<g fill="none" fill-rule="evenodd">
<path d="M8,72 L64,72 C68.418278,72 72,68.418278 72,64 L72,8 C72,3.581722 68.418278,-8.11624501e-16 64,0 L8,0 C3.581722,8.11624501e-16 -5.41083001e-16,3.581722 0,8 L0,64 C5.41083001e-16,68.418278 3.581722,72 8,72 Z" fill="#3E75C3">
</path>
<path d="M35.9985,12 C22.746,12 12,22.7870921 12,36.096644 C12,46.7406712 18.876,55.7718301 28.4145,58.9584121 C29.6145,59.1797862 30.0525,58.4358488 30.0525,57.7973276 C30.0525,57.2250681 30.0315,55.7100863 30.0195,53.6996482 C23.343,55.1558981 21.9345,50.4693938 21.9345,50.4693938 C20.844,47.6864054 19.2705,46.9454799 19.2705,46.9454799 C17.091,45.4500754 19.4355,45.4801943 19.4355,45.4801943 C21.843,45.6503662 23.1105,47.9634994 23.1105,47.9634994 C25.2525,51.6455377 28.728,50.5823398 30.096,49.9649018 C30.3135,48.4077535 30.9345,47.3460615 31.62,46.7436831 C26.2905,46.1352808 20.688,44.0691228 20.688,34.8361671 C20.688,32.2052792 21.6225,30.0547881 23.1585,28.3696344 C22.911,27.7597262 22.0875,25.3110578 23.3925,21.9934585 C23.3925,21.9934585 25.4085,21.3459017 29.9925,24.4632101 C31.908,23.9285993 33.96,23.6620468 36.0015,23.6515052 C38.04,23.6620468 40.0935,23.9285993 42.0105,24.4632101 C46.5915,21.3459017 48.603,21.9934585 48.603,21.9934585 C49.9125,25.3110578 49.089,27.7597262 48.8415,28.3696344 C50.3805,30.0547881 51.309,32.2052792 51.309,34.8361671 C51.309,44.0917119 45.6975,46.1292571 40.3515,46.7256117 C41.2125,47.4695491 41.9805,48.9393525 41.9805,51.1877301 C41.9805,54.4089489 41.9505,57.0067059 41.9505,57.7973276 C41.9505,58.4418726 42.3825,59.1918338 43.6005,58.9554002 C53.13,55.7627944 60,46.7376593 60,36.096644 C60,22.7870921 49.254,12 35.9985,12" fill="#FFF">
</path>
</g>
</svg>
<span> Code
</span>
<!--?xml-->
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
Langkah 5: Simpan dan Periksa Tampilan
Setelah semua kode ditambahkan, klik Simpan Tema dan buka blog Anda untuk melihat hasilnya.
Tips Desain Hero Header Agar Lebih Menarik
Agar Hero Header Anda terlihat lebih profesional, berikut beberapa tips penting:
1. Gunakan Warna yang Konsisten
Pilih warna yang sesuai dengan branding blog Anda agar terlihat harmonis.
2. Gunakan Font yang Jelas
Hindari font terlalu dekoratif. Gunakan font sederhana seperti Arial, Roboto, atau Poppins.
3. Jangan Terlalu Banyak Teks
Hero Header harus singkat, jelas, dan langsung ke inti pesan.
4. Tambahkan CTA yang Jelas
CTA seperti “Mulai Baca”, “Pelajari Lebih Lanjut”, atau “Lihat Artikel” sangat penting untuk meningkatkan klik.
5. Optimalkan untuk Mobile
Pastikan Hero Header responsif agar tampilan tetap bagus di perangkat HP.
Kesalahan yang Harus Dihindari
Beberapa kesalahan umum saat membuat Hero Header di Blogger:
- Terlalu banyak animasi berat
- Ukuran teks terlalu kecil
- Warna terlalu mencolok dan tidak enak dilihat
- Tidak responsif di perangkat mobile
Struktur SEO Hero Header yang Baik
Untuk SEO yang optimal, pastikan struktur berikut diterapkan:
- H1 hanya digunakan untuk judul utama
- Deskripsi menggunakan paragraf pendek
- CTA mengarah ke halaman penting
- Gunakan keyword secara natural
Integrasi Hero Header dengan Blogger Theme
Jika Anda menggunakan template Blogger modern, Hero Header biasanya bisa diintegrasikan langsung di bagian Layout. Namun jika template lama, metode manual HTML seperti di atas adalah cara terbaik.
Beberapa template juga menyediakan widget HTML/Javascript yang bisa digunakan tanpa edit kode tema.
Optimasi AdSense pada Hero Header
Walaupun Hero Header bukan area iklan, Anda tetap bisa mengoptimalkannya untuk mendukung AdSense:
- Jangan menempatkan iklan terlalu dekat dengan CTA
- Pastikan tidak mengganggu navigasi utama
- Gunakan desain bersih agar tidak menurunkan CTR iklan
Lihat juga postingan lainnya :
Kesimpulan
Menambahkan Widget Hero Header di Blogger adalah langkah penting untuk meningkatkan tampilan blog agar lebih profesional, modern, dan SEO-friendly. Dengan mengikuti langkah-langkah di atas, Anda bisa membuat Hero Header tanpa plugin tambahan, hanya dengan HTML dan CSS sederhana.
Selain mempercantik tampilan, Hero Header juga membantu meningkatkan engagement pengunjung, memperbaiki struktur SEO, dan secara tidak langsung mendukung performa AdSense.
Jika diterapkan dengan benar, Hero Header bisa menjadi elemen penting yang membuat blog Anda terlihat jauh lebih berkualitas dibandingkan blog biasa.