Search

Cara Memasang Efek Gelombang di Bawah Header Viomagz

Cara Membuat Efek Animasi Gelombang Wave di Blogger

Pada tutorial kali ini, Saya akan membagikan cara untuk memasang efek gelombang naik turun alias wave di blogger.

Efek wave merupakan animasi berbentuk gelombang dengan warna gradasi yang mengarah secara horizontal dari kiri ke kanan ataupun sebaliknya.

Sebagian besar, efek wave ini biasaya dipasang pada bagian bawah header atau footer blog.

Dengan memasang efek wave ini, selain menambah cantik tampilan blog Anda, juga membuat blog terlihat lebih unik.

Asal tidak dipasang secara berlebihan, tentu menggunakan efek ini tidak akan terlihat alay.

Gaya wave ini saya lihat sudah banyak blog yang menggunakannyah, salah satunya bisa Anda lihat di theme igniplex.

Sebelum memasang gaya ini tentu terlintas di benak Anda apakah memasang Wave ini akan berpengaruh terhadap performa blog? Atau dengan kata lain bisa memberatkan blog.

Jawabanya adalah tidak. Karena efek ini menggunakan SVG, bukan image.

Lain hal jika Anda menggunakan gambar, cara tersebut cukup berpengaruh terhadap kecepatan blog Anda nantinya.

Apakah sulit memasangnya di blog (blogspot)?

Buat Anda yang masih awam soal kode, saya rasa susah-susah mudah.

Namun jangan khawatir, akan saya jelaskan sesimpel mungkin agar mudah dipahami.

So, langsung menuju ke tutorialnya.

Preview

Membuat Animasi Gelombang (Wave) SVG di Blog

1. Masuk dan login ke blogger.com.

2. Di dashbor blogger, buka halaman Tema lalu klik Edit HTML.

3. Salin kode SVG di bawah ini dan pastekan tepat di bawah </header>

<!-- Smarth Tekn Wave -->
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div class='tekn-wrap' id='hero-vvv'>
<div class='tekn-content container'>
<div class='widget-wrap'>
<div class='button-wrapper'>
<div class='nameblog'><span>Blogger Demo</span><!-- Nama Blog Anda -->
</div>
</div>
<h2 class='heading-title'>Produk Gagal Industri Hiburan Era Informatika</h2><!-- Keterangan Blog Anda -->
</div>
<div class='coll'><span class='bg1'/>
</div>
</div>
<svg class='wave' height='50px' preserveAspectRatio='none' style='pointer-events: none' viewBox='0 0 1920 75' width='100%'>
<defs>
<clipPath id='a'>
<rect class='a' height='75' width='1920'/>
</clipPath>
</defs>
<g class='b'>
<path class='c' d='M1963,327H-105V65A2647.49,2647.49,0,0,1,431,19c217.7,3.5,239.6,30.8,470,36,297.3,6.7,367.5-36.2,642-28a2511.41,2511.41,0,0,1,420,48'/>
</g>
<g class='b'>
<path class='d' d='M-127,404H1963V44c-140.1-28-343.3-46.7-566,22-75.5,23.3-118.5,45.9-162,64-48.6,20.2-404.7,128-784,0C355.2,97.7,341.6,78.3,235,50,86.6,10.6-41.8,6.9-127,10'/>
</g>
<g class='b'>
<path class='d' d='M1979,462-155,446V106C251.8,20.2,576.6,15.9,805,30c167.4,10.3,322.3,32.9,680,56,207,13.4,378,20.3,494,24'/>
</g>
<g class='b'>
<path class='d' d='M1998,484H-243V100c445.8,26.8,794.2-4.1,1035-39,141-20.4,231.1-40.1,378-45,349.6-11.6,636.7,73.8,828,150'/>
</g>
</svg>
</div>
</b:if>
<!-- Smarth Tekn Wave End -->

4. Selanjutnya kita akan memperindah tampilannya dengan mengcopy CSS di bawah ini. Letakan di atas kode </style> atau </b:skin>.

/* Tekn Wrapper */
.tekn-wrap .tekn-content.container{width:100%;max-width:1000px;margin:0 auto;padding:0}
#hero-vvv{background: linear-gradient(-50deg,rgba(242,193,78,.95),rgba(247,129,84,.95)); /* Warna Backgroudnya*/
background-size: cover;z-index: 0;width: 100%;}
#hero-vvv{padding: 4rem 0 5rem;position: relative;display: inline-block;}
#hero-xxv{background:#fff;height:auto;padding-bottom:60px;min-height:320px}
.tekn-content{position:relative;z-index:2}
#hero-vvv .tekn-content h2.hero-title,#hero-vvv .tekn-content h2.hero-title,#hero-vvv .tekn-content h2.hero-title,#hero-vvv .tekn-content h2.hero-title{font-size:38px;padding:0}
#hero-vvv .tekn-content h2.hero-title{font-size:230%;}
.tekn-content h2.hero-title{margin-top:20px;color:#ffffff;font-size:48px;font-weight:300;max-width:600px;padding:0 20px 31px;text-shadow:none;}
.tekn-content h2.hero-title >span{font-weight:500}
.tekn-content h2.hero-title {font-size:38px;}
.tekn-content p.hero-description{margin-top: 10px;margin:0;color: #fff;font-size: 1.3em;line-height: 35px;text-align: center;width: 58%;font-weight: 300;}
.button-wrapper {display: block;margin: 0;padding: 10px 0;}
.button-wrapper span {font-size: 30px;font-weight: 500;padding: 5px 0;position: relative;margin: 0;color: #fff;}
.widget-wrap h2.heading-title {padding: 0;color: rgba(255,255,255,.6); /* warna teks di bawah judul */
font-weight: 400;z-index: 1;font-size: 16px;margin: 0;}svg {vertical-align: middle;}
.widget-wrap {width: 100%;margin: 3% 0 0 0;text-align: center;padding: 0;position: relative;box-sizing: border-box;-webkit-box-sizing: border-box;}
.section-header{text-align:center;width:66.66667%;margin-left:170px;}
.section-header h3{font-size:1.6em;font-weight:500;color:#555;margin:0;margin-bottom:10px;text-transform:capitalize}
.section-header p{font-size:1.3em;color:#777;display:inline-block;line-height:30px;font-weight:300}
.section-header-main {margin: 0 15px;text-align:center;text-transform: uppercase;color:#555;}
.section-header-main h4 {background:#fff;display:inline-block;z-index:1;position:relative;padding:0 15px;}
#hero-vvv svg.wave {position: absolute;bottom: -1px;left: 0;overflow: hidden;vertical-align: middle;}
.a{fill:none}.b{clip-path:url(#a)}.c,.d{fill:#fff;transition: all .5s ease;}.d{opacity:0.5;isolation:isolate}
@media only screen and (max-width:800px){
#hero-vvv .tekn-content h2.hero-title {font-size:20px;}
.tekn-content p.hero-description {width:100%;font-size:1em;}}


5. Lalu simpan tema.

Selesai deh. Silahkan dilihat hasilnya. Apakah animasi gelombang wave terpasang dengan benar di blog Anda. Akhir kata, jika merasa artikel ini bermanfaat silahkan dishare.

Keterangan:
  • Perhatikan langkah ke tiga, di situ saya menggunakan Tag Kondisional Blogger. Tag tersebut berfungsi hanya menampilkan efek wave nya hanya di halaman depan (hompage).
  • Jika ingin menampilkannya juga di halaman post, silahkan hapus kode tersebut. Kode nya seperti di bawah ini.

<b:if cond="data:blog.url == data:blog.homepageUrl">

/*Jangan lupa hapus tag penutupnya juga, seperti di bawah ini*/

</b:if>

  • Perhatikan bagian yang saya tandai seperti ini.
<!--Nama Blog Anda--> dan <!--Keterangan Blog Anda-->
Ganti bagian tersebut sesuai keinginan Anda.
  • Jangan lupa juga di langkah ke 4, tepatnya di bagian CSS. Di situ ada keterangan warna gelombannya. Silahkan nantinya di ganti. 

Previous
« Prev Post

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel