How To Add Wave Animation In Blogger Template

How To Add Wave Animation In Blogger Template
Wednesday, 1 July 2020

How To Make Wave Animation Background Pattern In Blogger Templates

How To Add Footer Animation Background With Svg In Blogger Template

Blogger Template Ke Footer Id Par Wave Animation Background Kaise Lagaye Svg Background Ke Saath Iss Article Me Ham Puri Jankari Lenge, Wese Mere Pyare Dosto Me Bata Du Yah Widget Ko Aap Apne Template Par Istemal Karenge To Koi Problem Nhi Hoga, Or Aap Kisi Na Kisi Blogger Template Me Aisa Animation Wala Background Jarur Dekhe Honge Wesa Background Animation Effect Ab Aap Apne Blogger Website Par Lagayenge, Ab Ham Baat Karte He Iss Code Ko Kyu Lagaye, To Iss Code Ko Ya Iss

Wave Animation In Blogger Template

Ko Aap Apne Template Me Daalenge To Aap Ka Website Premium Type Dikhai Dega Or Aap Ko Bhi Apna Website Dekhne Me Achha Lagega, Wese Dosto Ham Jab Koi Template Kharidte

Purchase

Karte He To Uss Template Me Ya Uska Design Jyada Achha Nhi Lagta Use Achha Dikhai De Uske Liye Hame Khud Customize Karna Padta He Iss Me Ham Apne Mann Mutaabik Design Karte He Iss Liye Baad Me Hame Template Achha Lagne Lagta He Or Mene Aise Bohat Se

Widget Code

Ke Baare Me Bataya He Jisse Aap Apne Blogger

Blogspot

Website Par Istemal Kar Sakte He Iss Ke Liye Aap Yaha Par Jaa Kar Check Kar Sakte He More Widger Yah Sabhi Code Free He

Blogger Template Me Wave Animation Pattern

Koi Bhi Template Me Wave Animation Background Effect Laga Sakte He Or Aap Ka Website Bhi Slow Nhi Chalega Kyi Ki Yah

svg

Matlab

Scalable Vector Graphics

Yah

Format

Vector

In Saab Ka Size Bahut Chhota Hota He Or Ye Baaki Images Ki Tulana Me Bahut Achha Dikhai Deta He Jiska Pixels Bhi Kharab Nhi Hita He Aap Svg Images Khud Bhi Bana Sakte He Or Adhik Jankari Ke Liye Read More Par Click Kar Ke Dekh Sakte He Chaliye Ab Jaankari Lete He Ki Haam Abhi Iss Wave Animation Background Effect Ko Blogger Template Ke Andar Kaise Daale Mene Step By Step Bataya He

Make Wave Animation Background Pattern In Blogger Template

Step 1 Sabse Pahale Aap Ko Apne Blogger Website Par Pahuch Jana He Iss Ke Baad Aap Ko Sirf Jiss Website Par Add Karna Chahte He

Animation Background In Blogger

Uss Website Ko Select Kar Lijiye Aap Aap Apne Website Menu Me Pahuch Gaye He, Step 2 Theme Par Click Karna He Aap Ko, Theme Button Par Ko Datayenge To Agla Option Aa Jaayega, Ab Aap Ko Customize Ya

Edit Template

Par Click Kar Dena He Iss Ke Baad Aap Ko Ek Code Ko Khojna He Well Sorry Step 3 Line Dusre Me Bol Diya Mene Step 3 Iss Step 3 Me Aap Ko Template Ke Beech Me Kahi Bhi Click Kar Dena He Wo Bhi Sirf Ek Baar Ab Aap Ko Ctrl+F Dabana He Ya Search Karna He Yaani Yah Code Ko
 ]]></b:skin> 
Template Ke Andar Khojana He Ab Aap Ko Css Code Ko Past Kar Dena He Ye Code Step No.4 Me He Step 4 Jo Me Code Dunga Usse Aap Past Kar Dena He
 ]]></b:skin> 
Iss Code Ke Niche Dhiyan Rahe Aap Ko
 <style type='text/css'> 
Ke Niche Daalna He Agar Aap Iss Java Script Ke Niche Past Kar Dena He Okay Samajh Gya Me Step 5 Ab Aap Ko Blogger Template Ko Save Nhi Karna He Abhi Okay Ab Aap Ko HTML Code Ko Past Karna He

Foote

Section Me To Aap Ko Yah Code Ko Past Karne Se Pahle Bata Du Iss Wave Animation Me Automatically Colour Add Ho Jayega Aap Ko Add Karne Ki Jarurat Nhi Agar Color Change Karna He To Aap Ko Footer Id Ka Colour Change Karenge To Ho Jayega To Aap Ko Ctrl+f Dabaya Ki Kosis Kare Okay Yaani
 <footer> 
Iss Code Ko Khoj Lijiye Find Kar Lijiye Iss Ke Baad Iss Code Ko
 <div id='area'>
	<svg class='wave-animation' preserveAspectRatio='none' viewBox='0 24 150 28' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'>
<defs>
<path d='M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z' id='gentle-wave'/>
</defs>
<g class='wave-bg'>
<use fill='rgba(255,255,255,0.05)' x='50' xlink:href='#gentle-wave' y='0'/>
<use fill='rgba(255,255,255,0.07)' x='50' xlink:href='#gentle-wave' y='3'/>
<use fill='#f9f9f9' x='50' xlink:href='#gentle-wave' y='6'/>
</g>
</svg> </div>
<div id='footer-wrapper'>
	<div id='area'>
	<svg class='wave-animation' preserveAspectRatio='none' viewBox='0 24 150 28' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'>
<defs>
<path d='M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z' id='gentle-wave'/>
</defs>
<g class='wave-bg'>
<use fill='rgba(255,255,255,0.05)' x='50' xlink:href='#gentle-wave' y='0'/>
<use fill='rgba(255,255,255,0.07)' x='50' xlink:href='#gentle-wave' y='3'/>
<use fill='#f9f9f9' x='50' xlink:href='#gentle-wave' y='6'/>
</g>
</svg> </div> 
Ko Copy Kariye Or Footer Id Ke Niche Past Kar Dijiyega Iss Tarah Se Aap Ke Blogger Template Ke Andar

Footer Wave Animation

Lag Jayega Install Ho Jayega Aap Iss Kaa Example bbi Dekh Sakte He

Example

Dekhiye Or Dusra Wave Animation Background Dekhiye Wave Animation With Bubble + Svg Images

2 Animation Code First Css

 svg {
  width:100%;
  overflow:visible;
}

.wave {
  animation: wave 3s linear;
  animation-iteration-count:infinite;
  fill: #4478e3;
}
.drop {
  fill: var(--col-deepblue);
  xfill: #99000055;
  animation: drop 3.2s linear infinite normal;
  stroke: var(--col-deepblue);
  stroke-width:0.5;
  transform: translateY(25px) ;
  transform-box: fill-box;
  transform-origin: 50% 100%;
}
.drop1 {
  
}
.drop2 {
  animation-delay: 3s;
  animation-duration:3s;
}
.drop3 {
  animation-delay: -2s;
  animation-duration:3.4s;
}
.drop4 {
  animation-delay: 1.7s;
}
.drop5 {
  animation-delay: 2.7s;
  animation-duration:3.1s;
}
.drop6 {
  animation-delay: -2.1s;
  animation-duration:3.2s;
}
.gooeff {
    filter: url(#goo);
}
#wave2 {
  animation-duration:5s;
  animation-direction: reverse;
  opacity: .6
}
#wave3 {
  animation-duration: 7s;
  opacity:.3;
}
@keyframes drop {
  0% {
    transform: translateY(25px); 
  }
  30% {
    transform: translateY(-10px) scale(.1);
  }
  30.001% {
    transform: translateY(25px) scale(1); 
  }
  70% {
    transform: translateY(25px); 
  }
  100% { 
    transform: translateY(-10px) scale(.1);  
  }
}
@keyframes wave {
  to {transform: translateX(-100%);}
} 

2 Wave Animation HTML Code

 
<svg viewBox="0 0 120 28">
 <defs> 
    <filter id="goo">
      <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="blur" />
      <feColorMatrix in="blur" mode="matrix" values="
           1 0 0 0 0  
           0 1 0 0 0  
           0 0 1 0 0  
           0 0 0 13 -9" result="goo" />
      <xfeBlend in="SourceGraphic" in2="goo" />
    </filter>
     <path id="wave" d="M 0,10 C 30,10 30,15 60,15 90,15 90,10 120,10 150,10 150,15 180,15 210,15 210,10 240,10 v 28 h -240 z" />
  </defs> 

   <use id="wave3" class="wave" xlink:href="#wave" x="0" y="-2" ></use> 
   <use id="wave2" class="wave" xlink:href="#wave" x="0" y="0" ></use>
 
 
  <g class="gooeff" filter="url(#goo)">
  <circle class="drop drop1" cx="20" cy="2" r="8.8"  />
  <circle class="drop drop2" cx="25" cy="2.5" r="7.5"  />
  <circle class="drop drop3" cx="16" cy="2.8" r="9.2"  />
  <circle class="drop drop4" cx="18" cy="2" r="8.8"  />
  <circle class="drop drop5" cx="22" cy="2.5" r="7.5"  />
  <circle class="drop drop6" cx="26" cy="2.8" r="9.2"  />
  <circle class="drop drop1" cx="5" cy="4.4" r="8.8"  />
  <circle class="drop drop2" cx="5" cy="4.1" r="7.5"  />
  <circle class="drop drop3" cx="8" cy="3.8" r="9.2"  />
  <circle class="drop drop4" cx="3" cy="4.4" r="8.8"  />
  <circle class="drop drop5" cx="7" cy="4.1" r="7.5"  />
  <circle class="drop drop6" cx="10" cy="4.3" r="9.2"  />
  
  <circle class="drop drop1" cx="1.2" cy="5.4" r="8.8"  />
  <circle class="drop drop2" cx="5.2" cy="5.1" r="7.5"  />
  <circle class="drop drop3" cx="10.2" cy="5.3" r="9.2"  />
    <circle class="drop drop4" cx="3.2" cy="5.4" r="8.8"  />
  <circle class="drop drop5" cx="14.2" cy="5.1" r="7.5"  />
  <circle class="drop drop6" cx="17.2" cy="4.8" r="9.2"  />
  <use id="wave1" class="wave" xlink:href="#wave" x="0" y="1" />
 </g>  
    <!-- g mask="url(#xxx)">
    <path   id="wave1"  class="wave" d="M 0,10 C 30,10 30,15 60,15 90,15 90,10 120,10 150,10 150,15 180,15 210,15 210,10 240,10 v 28 h -240 z" />
    </g>
  </g -->

</svg>
Final Ye Dono Code Widget Ek Jaise He Or Ek Hi Tarika Se Lagega Agar Aap Ko Kahi Kuchh Samajh Nhi Aya Ho To Comment Kar Ke Puchh Sakte He Thank You Aap Ka Din Subh Ho...