Cara Memasang Animasi Efek Gelombang Mave Pada Tampilan Blog
Agustus 21, 2020
Efek gelombang mave adalah animasi berbentuk gelombang dengan warna gradasi yang yang bergerak secara horizontal dari kiri ke kanan atau sebaliknya. Efek wave biasaya dipasang pada bagian header atau footer blog sebagai pengganti warna background tersebut.
Cara Memasang Animasi Efek 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='bape-vvv'>
<div class='tekn-content container'>
<div class='widget-wrap'>
<div class='button-wrapper'>
<div class='nameblog'><span>Nama Blog</span><!-- Nama Blog Anda -->
</div>
</div>
<h2 class='heading-title'>Isi Dengan Description Kalian</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}
#bape-vvv{ background: linear-gradient(-50deg,rgba(0,86,255,.95),rgba(51,98,255,.95)); /* Warna Backgroudnya*/
background-size: cover;z-index: 0;width: 100%;}
#bape-vvv{padding: 4rem 0 5rem;position: relative;display: inline-block;}
#bape-xxv{background:#00ffffff;height:auto;padding-bottom:60px;min-height:320px}
.tekn-content{position:relative;z-index:2}
#bape-vvv .tekn-content h2.bape-title,#bape-vvv .tekn-content h2.bape-title,#bape-vvv .tekn-content h2.bape-title,#bape-vvv .tekn-content h2.bape-title{font-size:38px;padding:0}
#bape-vvv .tekn-content h2.bape-title{font-size:230%;}
.tekn-content h2.bape-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.bape-title >span{font-weight:500}
.tekn-content h2.bape-title {font-size:38px;}
.tekn-content p.bape-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;}
#bape-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){
#bape-vvv .tekn-content h2.bape-title {font-size:20px;}
.tekn-content p.bape-description {width:100%;font-size:1em;}}
5. Lalu simpan tema.
Perhatikan bagian yang saya tandai seperti ini.
<!--Nama Blog Anda--> dan
<!--Keterangan Blog Anda-->
Ganti bagian tersebut sesuai keinginan Anda.
1. Perhatikan langkah ke tiga, di situ saya menggunakan Tag Kondisional Blogger. Tag tersebut berfungsi hanya menampilkan efek wave nya hanya di halaman depan (hompage).
2. 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>
Selesai deh. Silahkan dilihat hasilnya. Apakah animasi efek gelombang wave terpasang dengan benar di blog Anda. Itulah tutorial yang bisa saya berikan jika merasa artikel ini bermanfaat silahkan dishare ke temen kalian siap tau dia juga membutuhkan.
