CARA MEMBUAT HEADER TEMPLATE BLOG VARIAN TERBARU BERGELOMBANG DAN BERANIMASI

Teknik ini sedikit berbeda dengan apa yang di tampilkan pada template editblogtema. Template editblogtema menggunakan pengaturan CSS yang berbeda dan lazimnya di pergunakan untuk memanipulasi pengaturan SVG ke dalam atau menjadi header. Sedangkan triks yang akan saya sampaikan sekarang ini sebenarnya lebih kepada untuk menu navigasi pada bagian header template blog.

Contoh tampilan:

tampilan header blog bergelombang dan beranimasi
DEMO

Teknik saya ambil dari sumber kode template Wordpress. Tentu saja lebih mudah di terapkan ke dalam template wordpress sebagai bagian dari plugin tema WP, untuk menerapkannya ke templat blogger blogspot saya seperti montir harus membongkar pasang bagian kode CSSnya terlebih dahulu he he he...dan untungnya itu hanya tentang CSS dan kode kode SVG standard saja. Jika tidak mending bikin template WP deh.

Mari kita terapkan ke dalam template contempo.

1. Langkah pertama menerapkannya adalah:
  • Masuk ke pengaturan dasbor blogger
  • Pilih tataletak 
  • Temukan widget header
  • REMOVE (buang) itu
Lho kok buang widget header? Apa tidak bermasalah dengan Header 1 atau H1? Tidak, kita kan belum selesai.

2. Langkah kedua:
  • Kembali ke pengaturan dasbor blogger
  • Pilih Tema
  • Pilih Edit HTML
Letakan kode CSS berikut tepat di bawah kode </head>:

<style>@keyframes waveAnimateA {
0% {
transform: translate(-40px, 5px);
}
100% {
transform: translate(40px, 0);
}
}

@keyframes waveAnimateB {
0% {
transform: translate(-40px, 10px);
}
100% {
transform: translate(40px, 0);
}
}

@keyframes waveAnimateC {
0% {
transform: translate(-20px, 5px);
}
100% {
transform: translate(-40px, 10px);
}
}

html {
box-sizing: border-box;
}

*,
*::before,
*::after {
box-sizing: inherit;
}

body {
background-color: hsla(191, 10%, 95%, 1);
}

.waves-container {
height: 154px;
transform: rotate(180deg);
width: 100%;
position: absolute;
overflow: hidden;
}

.waves {
position: relative;
top: 65px;
width: calc(100% + 400px);
margin: 0 0 0 -75px;
}

.svg {
opacity: 0.75;
animation: 14s ease-in-out infinite alternate waveAnimateA;
}

.path-1 {
animation: 14s ease-in-out infinite alternate waveAnimateB;
}

.path-2 {}

.path-3 {
animation: 10s ease-in-out infinite alternate waveAnimateC;
}
@media (min-width: 576px) {
.waves {
position: relative;
top: 5px;
width: calc(100% + 400px);
margin: 0 0 0 -200px;
}
}</style>
3. Langkah ketiga: Kembali cari kode </head> dan tambahkan kode HTML plus SVG berikut tepat di bawahnya:
<header class='bg-white shadow'>
<div class='container mx-auto flex justify-center sm:justify-start items-center'>
<center> <h1 class='mr-0 sm:mr-8 my-8 sm:my-0 text-4xl font-bold uppercase tracking-wide text-blue-dark'><a expr:href='data:blog.homepageUrl'> <font color='black'><data:blog.title/></font> </a></h1></center>
</div>
</header>
<div class='mb-4 sm:mb-8 waves-container'>
<div class='waves'>
<svg class='svg' viewBox='0 0 800 100' xmlns='http://www.w3.org/2000/svg'>
<defs>
<linearGradient id='waves-a' x1='0%' y1='50%' y2='50%'>
<stop offset='0%' stop-color='#3023AE'/>
<stop offset='100%' stop-color='#C86DD7'/>
</linearGradient>
<linearGradient id='waves-b' x1='.258%' x2='101.258%' y1='49.75%' y2='49.75%'>
<stop offset='0%' stop-color='#3023AE'/>
<stop offset='47.525%' stop-color='#53A0FD'/>
<stop offset='100%' stop-color='#B4EC51'/>
</linearGradient>
</defs>
<path class='path-1' d='M-2.48689958e-14,-7.38298311e-14 C100,-7.38298311e-14 167,50 267,50 C367,50 432,-6.54950269e-14 532,-7.38298311e-14 C632,-8.21565038e-14 700,50 800,50 C800,133.404483 800,150.071149 800,100 L5.20093986e-14,100 C-9.70686797e-17,134.422833 -2.57232001e-14,101.0895 -2.48689958e-14,-7.38298311e-14 Z' fill='url(#waves-a)' opacity='.6'/>
<path class='path-2' d='M-2.48689958e-14,-7.38298311e-14 C100,-7.38298311e-14 167,50 267,50 C367,50 432,-6.54950269e-14 532,-7.38298311e-14 C632,-8.21565038e-14 700,50 800,50 C800,133.404483 800,150.071149 800,100 L5.20093986e-14,100 C-9.70686797e-17,134.422833 -2.57232001e-14,101.0895 -2.48689958e-14,-7.38298311e-14 Z' fill='url(#waves-b)' opacity='.15'/>
<path class='path-3' d='M-2.48689958e-14,-7.38298311e-14 C100,-7.38298311e-14 167,50 267,50 C367,50 432,-6.54950269e-14 532,-7.38298311e-14 C632,-8.21565038e-14 700,50 800,50 C800,133.404483 800,150.071149 800,100 L5.20093986e-14,100 C-9.70686797e-17,134.422833 -2.57232001e-14,101.0895 -2.48689958e-14,-7.38298311e-14 Z' fill='#ECEEF7'/>
</svg>
</div>
</div> 

Perhatikan: Kode yang kami merahkan adalah pengganti H1 sehingga template tidak akan kehilangan performanya. 

4. Langkah ke empat.

Ini perlu untuk merapikan tampilan header: 

Masih di halaman editor HTML blogger cari kode berikut:
<Group description="Backgrounds">
Di bawahnya pengelompokan kode pengaturan ini akan terdapat kode kode berikut:
<Group description="Backgrounds">
  <Variable name="body.background.height" description="Background height"
      type="length"
      min="420px"
      max="640px"
      default="480px"  value="480px"/>
  1. Ganti nilai deklarasi min="420px" menjadi -10px
  2. Ganti nilai deklarasi max="640px" menjadi 10px
  3. Ganti nilai deklarasi default="480px"  value="480px"/> menjadi: default="-10px"  value="-10px"/>
Lalu save tema.

Ada banyak cara membuat header bergelombang menggunakan SVG namun cara yang paling umum adalah cara yang saya terapkan ke dalam template editblogtema yang sedang kami pergunakan sekarang.

BISAKAH DI TERAPKAN KE TEMPLATE VARIAN TERBARU LAINNYA SELAIN CONTEMPO?

Ada pertanyaan, apakah bisa di terapkan ke template varian terbaru lainnya selain contempo dan essential yang identik? Tentu saja bisa. Hanya saja pengaturannya sedikit berbeda. Contoh template Notable dengan header bergelombang dilengkapi dengan darkmode:

notable header bergelombang dengan darkmode
||
NO DOWNLOAD
(masih dalam pengembangan)

Semoga bermanfaat!

Kunjungi instagram Official kami: Editblogsite
Kunjungi Youtube : Editblogtema Channel

Ikuti terus trik, tips, teknik hack dan kabar terupdate dari blog ini! Share:

7 Komentar

Silahkan berkomentar sesuai dengan topik kita ya...

  1. Oh ini beda ya dgn yg dipakai di blog ini, sama2 manis sih, tapi lebih manis yg bergerak.

    Btw Del, blog ini tidak muncul di "daftar bacaan" di blogger 🙏

    BalasHapus
  2. header gelombang notable kapan lauchingnya?

    BalasHapus
    Balasan
    1. contoh notable bergelombang (original) lihat : https://notablered.blogspot.com/

      Hapus
    2. saya tidak ngerti bahasa amerika latin, saya lebih paham bahasa melayu, walau pun sudah kunjungi url https://notablered.blogspot.com/

      Hapus
  3. Kalo bikin buka tutup menu kaya di blog ini gimana mas..

    Kalo boleh dibikinin tutorialnya

    BalasHapus
    Balasan
    1. Di halaman blog ini banyak tutorial cara membuat menu hamburger menu degnan toggle seperti yang dinaksudkan, murni CSS tanpa JS

      Hapus
Lebih baru Lebih lama

Formulir Kontak