How To Add Moving Text To Blog In 2022 – HTML5 Tutorial Marquee Tag

Puneet
Add Moving text or Scrolling text or Marquee text or Running Text with HTML CSS in the Blog.

Moving Text Effects are fun way to catch the attention of Site Visitors for giving important News or Making Blog More attractive. But, most of the novice Bloggers are left unanswered with a question finding a way to move text in a blog or slide text in the Website.

How to Create a Running / Scrolling Text in WordPress / Blogger HTML Website?

This article outlines all doubts and Solutions for the Moving Text using HTML CSS JavaScript plugin etc.

Scrolling Text using HTML Marquee tag

HTML5 Code Syntax For Simple Moving Text:

<marquee>This is moving text Moving Right to Left </marquee>

Output:
This is moving text Moving Right to Left

Plain simple moving text looks ugly to look it more attractive we need to tailor the code and add some spice to our cuisine by adding a background color to it by bgcolor: “hexadecimal code”


Moving Text HTML With Background Colour:

HTML For Scrolling Text With Background Colour

<marquee bgcolor=”#33cc99″>This is moving text with Background Colour </marquee>

Output:
This is moving text with Background Colour

Even after adding Background Colour, text may be difficult to read depending upon Background color. To address the issue, let’s change the color of the text.

Marquee Scrolling Coloured Text With Background Colour

<marquee bgcolor=”#33cc99″ style=”color:white;”>This Is Coloured Scrolling Text With Background Colour </marquee>

Output:
This Is Coloured Scrolling Text With Background Colour

To control the speed of Moving text in Marquee tag use the attribute scrollamount=”Range”

Speed Range is from 0 to 10, where 0 is for still text.

Moving Text HTML with Speed Control

<marquee bgcolor=”#33cc99″ scrollamount=”4″>This Is Scrolling Text with scrollamount=”4″ </marquee>

Output:
This Is Scrolling Text with scrollamount=”4″

To further format the Moving text in HTML ,Webmaster may use following HTML Tags

<b> – for bold text

<i> – for italic text

<u> – for use

Dont forget to close the tag.

new HTML CSS Code for Moving text will be

<marquee bgcolor=”#33cc99″ style=”color:white;”><b><i><u>This Is Coloured Scrolling Italic , Underlined and Bolded Text With Background colour </i></u> </b> </marquee>

Output:
This Is Coloured Moving Italic , Underlined and Bolded Text With Background colour and speed control

Now, to add direction to moving text use Direction attribute in Marquee tag .

Direction = “Option”

Options right, up, down

By default, the text moves from Right to Left

Marquee Text

This Is Moving Text with Up Direction

<marquee bgcolor=”#33cc99″ style=”color:white;”><b><i><u>This Is Coloured Scrolling Italic , Underlined and Bolded Text With Background colour </i></u> </b> </marquee>

HTML Code for Moving Text Effects Up And Down

<marquee bgcolor=”#33cc99″ direction=”up” scrollamount=”2″>This Is Moving Text Effect with Up Direction Using HTML </marquee>

This Is Moving Text with Up Direction

<marquee bgcolor=”#33cc99″ direction=”Down” scrollamount=”2″>This Is Moving Text Effect with Down Direction Using HTML</marquee>

This Is Moving Text with Down Direction

<marquee bgcolor=”#33cc99″ direction=”Right” scrollamount=”2″>This Is Moving Text Effect with Right Direction Using HTML</marquee>

This Is Moving Text with Right Direction

<marquee bgcolor=”#33cc99″ scrollamount=”2″>This Is Moving Text Effect with left Direction Using HTML</marquee>

This Is Moving Text with Left Direction

Moving text with Bounce effect – Alternate Behaviour in HTML

<marquee bgcolor=”#33cc99″ style=”color:white;”><br /> <a href=”url”>Link 1</a><br /> </marquee>

This Is Moving Text with Bounce Effect – Alternate Behavior

Moving text using HTML, JS and Pause when Cursor Point over it.

<marquee bgcolor=”#33cc99″ style=”color:white;width:500px;” onmouseover=”this.stop()” onmouseout=”this.start()”><br /> This text can be paused.Just Point Mouse Over It.<br /> </marquee> /


This text can be paused.Just Hover Mouse Cursor Over It.

How to Insert Moving Text in Blogger/Blogspot Blog?

  1. Login to Blogger.com Google Account
  2. Select the Blog
  3. Click on Layout
  4. Click on Add Element
  5. HTML/Text
  6. Paste the Code

Getting Info...

Post a Comment

Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.