Cara membuat header blog bergelombang menggunakan kode SVG dan CSS

Trik ini telah kami terapkan ke dalam beberapa template blogger editblogtema dan hanya dengan menggunakan teknik SVG dan CSS. Trik ini sangat mudah jika di terapkan ke dalam template contempo dan template Essential, meskipun ia juga dapat di terapkan ke dalam template template bawaan varian terbaru blogger.

Kita akan melakukan percobaan terhadap template essential karena ia adalah varian kelima dan paling mirip dengan contempo. Artinya bisa diterapkan ke essential berarti bisa juga diterapkan ke template contempo bahkan bisa juga ke soho, emporio dan notable. 

Ini hanya percobaan dasar yang saya ambil dari beberapa referensi milik Daniel Österman yang saya modifikasi. Mudah dan hanya dibutuhkan pengaturan CSS.

1. LANGKAH PERTAMA

Ok, masuk ke pengaturan blogger blogspot

• Pilih Tema
• Pilih Edit HTML

Di dalam editor HTML blogger blogspot cari kode </head> dan letakan kode CSS berikut di atasnya:

 

<style>body {
margin:0;
}

h1 {
font-family: 'Londrina Solid', cursive;
font-weight:300;
letter-spacing: 2px;
font-size:85px;
}
p {
font-family: 'Lato', sans-serif;
letter-spacing: 1px;
font-size:14px;
color: #333333;
}

.header {
position:relative;
text-align:center;
background: linear-gradient(60deg, rgba(84,58,183,1) 0%, rgb(0, 255, 0,1) 100%);
color:white;
}
.logo {
width:50px;
fill:white;
padding-right:15px;
display:inline-block;
vertical-align: middle;
}

.inner-header {
height:65vh;
width:100%;
margin: 0;
padding: 0;
}

.flex { /*Flexbox for containers*/
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}

.waves {
position:relative;
width: 100%;
height:5vh;
margin-bottom:-7px; /*Fix for safari gap*/
min-height:100px;
max-height:150px;
}

.content {
position:relative;
height:20vh;
text-align:center;
background-color: white;
}

/* Animasinya*/

.parallax > use {
animation: move-forever 25s cubic-bezier(.55,.5,.45,.5) infinite;
}
.parallax > use:nth-child(1) {
animation-delay: -2s;
animation-duration: 7s;
}
.parallax > use:nth-child(2) {
animation-delay: -3s;
animation-duration: 10s;
}
.parallax > use:nth-child(3) {
animation-delay: -4s;
animation-duration: 13s;
}
.parallax > use:nth-child(4) {
animation-delay: -5s;
animation-duration: 20s;
}
@keyframes move-forever {
0% {
transform: translate3d(-90px,0,0);
}
100% {
transform: translate3d(85px,0,0);
}
}
/*Shrinking for mobile*/
@media (max-width: 768px) {
.waves {
height:40px;
min-height:40px;
}
.content {
height:30vh;
}
h1 {
font-size:24px;
}
}</style>

2. LANGKAH KEDUA

Masih di dalam halaman editor HTML blogger letakan kode berikut di bawah kode </head> tadi:

<div class="header">
<!--Konten bergelombang di mulai-->
<div class="inner-header flex">
<!--Bisa untuk LOGO, boleh dilupakan saja-->
<svg version="1.1" class="logo" baseProfile="tiny" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 500 500" xml:space="preserve">
<path fill="#FFFFFF" stroke="#000000" stroke-width="10" stroke-miterlimit="10" d="M57,283" />
<div class="fluid">
</div>
</svg>

<h1><data:blog.title/></h1>
</div>
<!--Waves Container-->
<div>
<svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
<defs>
<path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
</defs>
<g class="parallax">
<use xlink:href="#gentle-wave" x="48" y="0" fill="rgba(255,255,255,0.7" />
<use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(255,255,255,0.5)" />
<use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(255,255,255,0.3)" />
<use xlink:href="#gentle-wave" x="48" y="7" fill="#fff" />
</g>
</svg>
</div>
<!--gelombang diakhiri-->
</div>
<!--Header berakhir-->
<!--Konten di mulai-->
<div class="content flex">
<p></p>
</div>
<!--Konten diakhiri--> 

Keterangan : <data:blog.title/> adalah title otomatis blog kita. Kalian boleh membuang header bawaan template karena title di atas sudah memiliki tag <h1>. Kalian dapat menghilangkan LOGO dengan cara menghapus sumber kode SVG-nya.

Baca juga: 

CARA MEMBUAT HEADER TEMPLATE BLOG VARIAN TERBARU BERGELOMBANG DAN BERANIMASI

Lihat DEMO

Tampilannya begini:

See the Pen by sufyan (@sufyan33) on CodePen.

Sebenarnya jika ingin membuat judul bawaan blog masuk ke dalam 'wilayah' wave header ini, kalian harus memindahkan widget header blog ke bagian atas kode </head> akan tetapi cara ini sedikit rumit, namun jika ada permintaan mungkin admin blog ini akan membuat postingan terpisah untuk itu.

Dan, walaupun cara diatas terbukti aman selalu lakukan backup sebelum pemasangan ya. Jika perlu terapkan ke halaman percobaan atau halaman dummy saja terlebih dahulu.

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