How to add moving text to Blog in 2020 – HTML5 Tutorial Marquee tag

Add Moving text or Scrolling text or Marquee text 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 Scrolling Text in WordPress / Blogger 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

how to create moving text in html ?

Use marquee tag to enter Moving Text in HTML

how to add moving text html ?

Use HTML,Marquee Tag to enter Scrolling text

how to write moving text in html ?

Wrap the text within HTML Marquee text

how to display moving text in html

Wrap the text within HTML Marquee tag to make it Scroll or Move

39 thoughts on “How to add moving text to Blog in 2020 – HTML5 Tutorial Marquee tag”

  1. Was thinking it as animation
    M noob Thank God u describe so great I Just copied Code and Edited
    Marque tag and text and everything worked Great

Leave a Comment

Your email address will not be published. Required fields are marked *

You cannot copy content of this page