July 26, 2018

How to add Marquee texts in Blog?

Animated text/moving texts are added in blog contents to make it look a little bit spicy. Sometimes they keep flashing on the sidebar or below in the footer region informing the visitor about upcoming releases. Such animated texts are referred to as Marquee texts.

How to Add Marquee Texts in Blogger/Blog?
How to add Marquee texts in Blog?

In this article I'm going to explain different types of marquee animations that are possible in your content. Starting from the basic output Marquee text to a slow-mo marquee, also keep reading the contents below to find out the variety of Marquee texts that can be put in Blog/Blogger.

Samples of Marquee texts available:

Sample 1: Default Marquee theme

YOUR TEXT GOES HERE!

<marquee>YOUR TEXT GOES HERE!</marquee>

In the above code, I have shown default marquee behaviour, i.e. LTR.

Sample 2:  Let's go RTL.

YOUR TEXT GOES HERE!

<marquee direction="right">YOUR TEXT GOES HERE!</marquee>

In this code, I have shown the opposite of first one, tha means the direction of scroll is from Right to Left.

Sample 3: Let's adjust the Marquee width

YOUR TEXT GOES HERE!

<marquee direction="right" width="75%">YOUR TEXT GOES HERE!</marquee>

In case you want to adjust the width of Marquee column then simply add the width attribute and mention the percentage of width with it.

Sample 4: Let's Change the BG colour

YOUR TEXT GOES HERE! with a BG colour

<marquee direction="right" style="background: #FFFF00;">YOUR TEXT GOES HERE! with a BG colour</marquee>


Also, if you want to change the background colour, just highlight the text and then apply marquee tags on it.

Sample 5: Let's Change the Font colour as well!

YOUR TEXT GOES HERE! with a BG colour and font colour

<marquee direction="right" style="background: #FFFF00;"><span style="color: yellow;">YOUR TEXT GOES HERE! with a BG colour and font colour</span></marquee>

Again if you choose to use a contrasting effect on your blog's marquee then choose a font colour apply background colour and then apply marquee tags.

Sample 6:  Slow Down and Chill!

THIS IS A SLOW-MOTION TEXT!

<marquee direction="right" scrollamount="1">THIS IS A SLOW-MOTION TEXT</marquee>

Wanna ride slowly? Friends, if you have a large text segment and want viewers to read with slowly, you can use this scroll amount attribute with a corresponding value beside it.

Sample 7: Animated Links!

How to add marquee text for Blogger

<marquee><a href='https://www.techgydbysm.com/2018/05/how-to-add-moving-text-in-blog.html'>How to add marquee text for  Blogger</a></marquee>

Finally, friends you can also add Hyperlinks to Marquee. Steps almost the same and you first create a link in blog's compose page and add marquee tags with attributes that you wanna apply.

Video Tutorial:



So guys, this was the list of codes that you can apply on your blogs and make it look attractive! Feel free to comment below. Also if you are interested in the contents of this blog, then do subscribe to our newsletter.

0 Comments

Post a Comment

Avoid Spammy Comments