How to add typing text animation on blogger

Dhanjee Rider

the typing animation adds a dynamic element to your blog posts, improving engagement, visual appeal, and user experience.

The typing animation on a Blogger post can offer several benefits:

Engagement: The dynamic nature of the typing animation can grab the reader's attention and encourage them to stay on the page longer.
Visual Appeal: The animation adds visual interest to the content, making it more appealing and memorable.
Emphasis: It can be used to highlight important information or key points within the post, drawing the reader's focus to specific sections.
Storytelling: The animation can be used creatively to tell a story or present information in a narrative format, enhancing the overall storytelling experience.
Modern and Trendy: Typing animations are popular in modern web design trends, giving your blog a contemporary and stylish look.
User Experience: It enhances the user experience by creating a sense of interactivity and liveliness, making the content more enjoyable to read.

How to add typing animation on blogger

Visit the blogger.com and open your blogger dashboard
Now go to the layout section and add a widget below your header or u can choose any other place as you need
Now copy these code and paste on html javascript gadget
Save and see the changes on your website
Congratulations 🎉 you have added typing animation
You can also customise the font size amd colour

<style>  @import url('https://fonts.googleapis.com/css?family=Montserrat');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font-family: 'Montserrat', sans-serif;
  background-color: #000;
  color: #eee;
}
.container {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.container p {
  font-size: 3rem;
  padding: 0.5rem;
  font-weight: bold;
  letter-spacing: 0.1rem;
  text-align: center;
  overflow: hidden;
}
.container p span.typed-text {
  font-weight: normal;
  color: #dd7732;
}
.container p span.cursor {
  display: inline-block;
  background-color: #ccc;
  margin-left: 0.1rem;
  width: 3px;
  animation: blink 1s infinite;
}
.container p span.cursor.typing {
  animation: none;
}
@keyframes blink {
  0%  { background-color: #ccc; }
  49% { background-color: #ccc; }
  50% { background-color: transparent; }
  99% { background-color: transparent; }
  100%  { background-color: #ccc; }
}
</style>
<script>
 const typedTextSpan = document.querySelector(".typed-text");
const cursorSpan = document.querySelector(".cursor");

const textArray = ["Youtuber", "Web Designer", "Programer", "Developer"];
const typingDelay = 200;
const erasingDelay = 100;
const newTextDelay = 2000; // Delay between current and next text
let textArrayIndex = 0;
let charIndex = 0;

function type() {
  if (charIndex < textArray[textArrayIndex].length) {
    if(!cursorSpan.classList.contains("typing")) cursorSpan.classList.add("typing");
    typedTextSpan.textContent += textArray[textArrayIndex].charAt(charIndex);
    charIndex++;
    setTimeout(type, typingDelay);
  } 
  else {
    cursorSpan.classList.remove("typing");
  	setTimeout(erase, newTextDelay);
  }
}

function erase() {
	if (charIndex > 0) {
    if(!cursorSpan.classList.contains("typing")) cursorSpan.classList.add("typing");
    typedTextSpan.textContent = textArray[textArrayIndex].substring(0, charIndex-1);
    charIndex--;
    setTimeout(erase, erasingDelay);
  } 
  else {
    cursorSpan.classList.remove("typing");
    textArrayIndex++;
    if(textArrayIndex>=textArray.length) textArrayIndex=0;
    setTimeout(type, typingDelay + 1100);
  }
}

document.addEventListener("DOMContentLoaded", function() { // On DOM Load initiate the effect
  if(textArray.length) setTimeout(type, newTextDelay + 250);
});</script>
 <div class="container">
    <p>I am a <span class="typed-text"></span><span class="cursor">&nbsp;</span></p>
  </div>

Code for adding typing animation

Last word

In this post we will provided information about How to add typing text animation on blogger , If you enjoy this post, kindly share it with your friends. For any queries, feel free to join our Telegram channel, where we share exclusive and informative content. Many valuable tips are exclusively available on our Telegram channel. Stay updated with your favorite source, DK Technozone.

Dhanjee Rider

Dk Technozone An Editor,Programmer, grafix Designer Website Designer,Android Geek, Instagram Filter Seller,Blloger, Seo Expert, Wordpress Geek etc. Telegram