بِسْــــــــــــــــمِ اﷲِالرَّØْÙ…َÙ†ِ الرَّØِيم
HEADER bergelombang di blog memberikan efek menakjubkan. Karena header tidak selalu menampilkan untaian kata-kata berupa Deskripsi, Judul Blog maupun Logo Blog. Tapi lebih dari itu, Header dalam template yang hadir sekarang sudah terdesain dengan dapatnya menampilkan efek bergelombang. Efek ini murni menggunakan koding CSS yang memang terkenal handal, fleksibel dan tidak memakan bandwidth sehingga kecepatan blog tetap terbilang aman dan terkendali. Pemakaian Header Bergelombang dengan CSS Halaman Full dan Responsive dapat kalian terapkan dengan mengikuti tutorial dibawah ini.
Keunggulan menggunakan header bergelombang adalah header jadi tampak unik dan lain dari kebanyakan yang blogger lain punya. Selain itu cukup indah dipandang mata dan juga warna gradientnya membuat style ini seakan akan terlihat hidup. Saya pernah memakai pada blog ini juga beberapa waktu lalu tapi saya ganti posisi dan sekarang berada di posisi footer-wrapper diatas credit-footer. Sekilas terlihat nanti background dari footer ini akan menjadi bergelombang seperti ombak di lautan. Keren khan? coba saja nanti kalian praktekkan pasti akan terlihat lebih bagus.
Baca Juga :
Saya mencoba cara ini di codepen saya. Dan terlihat bagus disitu. Dengan memakai svg path, maka pemakaian bandwidth dari internet dapat dikurangi berapa persen ketimbang menggunakan javascript yang memakan resource lebih banyak. System paralax atau transparant ketika obyek gelombang bergerak memberikan efek opacity atau kabur. Sehingga background menjadi tidak terlihat. Maka gelombang di header dengan CSS di header ini dapat tampil sempurna sama seperti halnya tampilan di footer. Nanti kalian lihat di blog ini, nah itu khan sudah terlihat di bagian bawah footer itu ada gelombang yang bergerak terus menerus tanpa henti. Nah itulah yang saya maksud.
Bila kalian ingin mencoba, silakan diutak-atik ya soale template setiap blog itu berbeda-beda, ada template yang dengan sangat baik menerima kode CSS ini dan tampil sesuai keinginan tetapi ada juga template yang memang kurang dapat menerima kode ini sehingga nanti tidak dapat tampil. Sehingga praktek pribadi dari kalian mesti dipergunakan di trik ini. Silakan otak-atik sendiri dan jangan lupa backup template dulu supaya nanti ketika ada yang tidak tampil atau ada kerusakan template, bisa dikembalikan seperti semula. Sudah bisa khan back up template? kalau belum bisa ini ada caranya :
Back Up Template
1. Ketika sudah masuk ke Dashboard Blogger
2. Lihat ada Tema
3. Klik Cadangkan dan nanti ada pilihan download. Download saja tema XML tersebut biasanya seperti ini formatnya
theme-908129234123xxxxx
4. Simpan di folder komputer kamu dulu buat jaga-jaga.
Sekarang ke inti ya
Membuat Header Bergelombang CSS Full Halaman dan Responsive
Caranya adalah :1. Masuk ke Dashboard Blogger
2. Klik Tema
3. Cari kode ]]></b:skin> dan tempelkan kode dibawah ini persis diatas kode ]]></b:skin>
@import url(//fonts.googleapis.com/css?family=Lato:300:400);
body {
margin:0;
}
.header {
position:relative;
text-align:center;
background: linear-gradient(36deg, rgba(129,26,80,1) 0%, rgba(232,102,210,1) 50%, rgba(223,123,238,1) 100%);
color:pink;
}
.logo {
width:50px;
fill:pink;
padding-right:15px;
display:inline-block;
vertical-align: middle;
}
.inner-header {
height:65vh;
width:100%;
margin: 0;
padding: 0;
}
.flex {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.waves {
position:relative;
width: 100%;
height:15vh;
margin-bottom:-7px;
min-height:100px;
max-height:150px;
}
.content {
position:relative;
height:20vh;
text-align:center;
background-color: white;
}
.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;
}
}4. Selanjutnya masih di template, cari kode <div id='header-wrapper'>
5. Tempelkan kode dibawah ini persis diatas kode <div id='header-wrapper'>
<div class="header">
<div class="inner-header flex">
</div>
<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>
</div>
<div class="content flex">
</div>Nah itulah Header Bergelombang. Sudah dapat tampil sempurna khan? sekarang kalian praktekkan yang sudah saya kasih tutorialnya. Semoga semakin bagus blognya. Dikala saya masih berkutat dengan buku, orang lain masih tidur terlelap. Maka kurangilah tidurmu, ketika itu juga kamu akan semakin pintar. Semoga.
bagus triknya tolong tutorial footer bergelombang dong
ReplyDelete