Adding a scrolling text bar or news ticker to your WordPress site is an excellent way to share important announcements, promotions, or news updates with your readers in a dynamic way.

In this guide, we’ll walk you through the process of embedding a scrolling text bar using simple HTML code. Whether you want text scrolling up, down, or sideways—or even blinking text—this tutorial will help you implement it seamlessly on your website.

Scrollbars are an engaging visual element for any blog. By integrating them, you can highlight announcements, share the latest updates, or promote events that grab visitors’ attention without taking up too much space.

Plus, they are quite easy to customize and implement on WordPress using a Custom HTML block.

Let’s dive into the details!

Watch the Video for Visual Instructions

For those who prefer visual guidance, watch the following video where we walk you through the entire process of adding scrolling text to your WordPress blog.

This video provides a step-by-step tutorial that complements this guide:

By watching the video, you’ll be able to follow along as we demonstrate each step in real time, making the process easier to understand.

Adding Auto-Scrolling Text Bar to WordPress

If you’re looking to add an auto-scrolling text bar to your WordPress blog, all you need is a few snippets of code. The key advantage is that you can customize it to match the style and speed of scrolling based on your preferences.

Here’s a breakdown of how to add scrolling text and customize it for various directions and effects:

1. Left-to-Right and Right-to-Left Scrolling

For a classic horizontal scroll, either left-to-right or right-to-left scrolling can be added by adjusting the direction attribute.

Here’s how:

  • Left to Right:

Scroll Left to Right Code

<marquee width=”100%” direction=”right” height=”100px”> This is a sample scrolling text that has scrolls texts to the right. </marquee>

Scroll Left to Right Code Output:

This is a sample scrolling text that has scrolls texts to the right.
  • Right to Left:

Scroll Right to Left Code

<marquee width=”100%” direction=”left” height=”100px”> This is a sample scrolling text that has scrolls texts to the left. </marquee>

Scroll Right to Left Code Output:

This is a sample scrolling text that has scrolls texts to the left.

2. Upward Scrolling Text

To create a scrolling text that moves upward, simply use the following code:

Scroll Up Code

<marquee width=”100%” direction=”up” height=”100px”> This is a sample scrolling text that has scrolls in the upper direction. </marquee>

Scroll Up Code Output:

This is a sample scrolling text that has scrolls in the upper direction.

This code allows you to adjust the text’s height and direction. The default height is set at 100 pixels, but you can modify it to fit your design.

Example Customization:

  • Change Height: You can set the height to fit any part of your page (e.g., 200px, 300px).
  • Edit Text: Replace “Your scrolling text goes here!” with your announcement or news.

3. Downward Scrolling Text

To make the text scroll downward, the process is just as easy.

Modify the direction of the scroll in the code to “down”:

Scroll Down Code

<marquee width=”100%” direction=”down” height=”100px”> This is a sample scrolling text that has scrolls texts to down. </marquee>

Scroll Down Code Output:

This is a sample scrolling text that has scrolls texts to down.

This change will produce a smooth downward scrolling text effect.

4. Adjusting Scrolling Speed

You can also control how fast the text scrolls by changing the scrollamount attribute in the code.

Here’s an example of adjusting the speed:

Scrolling Speed Code

<marquee behavior=”scroll” direction=”up” scrollamount=”1″>Slow Scrolling</marquee> <marquee behavior=”scroll” direction=”right” scrollamount=”12″>Little Fast Scrolling</marquee> <marquee behavior=”scroll” direction=”left” scrollamount=”20″>Fast Scrolling</marquee> <marquee behavior=”scroll” direction=”right” scrollamount=”50″>Very Fast Scrolling</marquee>

Scrolling Speed Code Output:

Slow Scrolling Little Fast Scrolling Fast Scrolling Very Fast Scrolling
  • A scroll amount of 1 creates a slow scrolling effect.
  • A scroll amount of 20 results in fast scrolling.

You can experiment with different values until you find the speed that works best for your website.

5. Scrolling Text with Blinking Effect

Adding a blinking effect to your scrolling text will make it even more eye-catching.

Use the following code for this:

Scroll With Blinking Text Code

<!DOCTYPE HTML>
<HTML>

<head>

<title>Example of a blinking text using CSS within a marquee</title>

<style>

.blink {
animation: blinker 1.5s linear infinite;
color: red;
font-family: sans-serif;
}

@keyframes blinker {
50% {
opacity: 0; }
}

</style>
</head>

<body>

<marquee class=”blink”>This is an example of blinking text using CSS within a marquee.</marquee>

</body>

</html>

Scroll With Blinking Text Code Output:

Example of a blinking text using CSS within a marquee This is an example of blinking text using CSS within a marquee.

This simple addition will create a blinking scrolling text, making your announcements more noticeable.

6. Scrolling Falling Text

Falling Code

<div style=”max-height:1000px;font-family:Cursive;font-size:14pt;color:gold;”>


<marquee style=”position:relative;left:122px;top:0px;height:397px;” scrollamount=”6″ direction=”down”>Scrolling text…</marquee>


<marquee style=”position:relative;left:8px;top:-397px;height:175px;” scrollamount=”4″ direction=”down”>Scrolling text…</marquee>


<marquee style=”position:relative;left:151px;top:-550px;height:235px;” scrollamount=”5″ direction=”down”>Scrolling text…</marquee>


<marquee style=”position:relative;left:51px;top:-735px;height:161px;” direction=”down”>Scrolling text…</marquee>


<marquee style=”position:relative;left:124px;top:-961px;height:337px;” direction=”down”>Scrolling text…</marquee>


<marquee style=”position:relative;left:122px;top:-1213px;height:397px;” scrollamount=”7″ direction=”down”>Scrolling text…</marquee>


<marquee style=”position:relative;left:55px;top:-1691px;height:231px;” scrollamount=”5″ direction=”down”>Scrolling text…</marquee>


<marquee style=”position:relative;left:98px;top:-1900px;height:127px;” scrollamount=”6″ direction=”down”>Scrolling text…</marquee>


<marquee style=”position:relative;left:93px;top:-2100px;height:355px;” scrollamount=”1″ direction=”down”>Scrolling text…</marquee>


<marquee style=”position:relative;left:279px;top:-2504px;height:475px;” scrollamount=”4″ direction=”down”>Scrolling text…</marquee>


<marquee style=”position:relative;left:185px;top:-2907px;height:373px;” scrollamount=”1″ direction=”down”>Scrolling text…</marquee>


<marquee style=”position:relative;left:140px;top:-3200px;height:296px;” scrollamount=”7″ direction=”down”>Scrolling text…</marquee>


<marquee style=”position:relative;left:26px;top:-3500px;height:300px;” scrollamount=”3″ direction=”down”>Scrolling text…</marquee>


<marquee style=”position:relative;left:22px;top:-3800px;height:253px;” scrollamount=”6″ direction=”down”>Scrolling text…</marquee>


<marquee style=”position:relative;left:211px;top:-4040px;height:325px;” scrollamount=”7″ direction=”down”>Scrolling text…</marquee>


<marquee style=”position:relative;left:203px;top:-4400px;height:481px;” scrollamount=”5″ direction=”down”>Scrolling text…</marquee>


<marquee style=”position:relative;left:107px;top:-4900px;height:330px;” scrollamount=”2″ direction=”down”>Scrolling text…</marquee>


<marquee style=”position:relative;left:132px;top:-5205px;height:331px;” scrollamount=”5″ direction=”down”>Scrolling text…</marquee>


<marquee style=”position:relative;left:57px;top:-5500px;height:94px;” scrollamount=”5″ direction=”down”>Scrolling text…</marquee>


<marquee style=”position:relative;left:5px;top:-5600px;height:471px;” direction=”down”>Scrolling text…</marquee>


<marquee style=”position:relative;left:317px;top:-6003px;height:480px;” scrollamount=”5″ direction=”down”>Scrolling text…</marquee>

</div>

Falling Code Output:

Scrolling text… Scrolling text… Scrolling text… Scrolling text… Scrolling text… Scrolling text… Scrolling text… Scrolling text… Scrolling text… Scrolling text… Scrolling text… Scrolling text… Scrolling text… Scrolling text… Scrolling text… Scrolling text… Scrolling text… Scrolling text… Scrolling text… Scrolling text… Scrolling text…

How to Customize the Code

Aside from changing the direction, speed, and height, you can further customize the text’s appearance by modifying fonts, colors, and size.

  • Font Size: You can adjust the font size by using the style attribute:
<marquee style="font-size:24px;">Your custom text here!</marquee>
  • Font Family:
<marquee style="font-family:Arial, sans-serif;">Scrolling text with custom font</marquee>
  • Text Color:
<marquee style="color:blue;">Scrolling text in blue</marquee>

Embedding the Code on Your WordPress Site

Now that you have your customized code ready, embedding it on your WordPress blog is simple.

Here’s how:

  1. Go to your WordPress dashboard.
  2. Edit the page or post where you’d like to add the scrolling text.
  3. Select the block editor and add a Custom HTML block.
  4. Paste your code in the HTML block.
  5. Save or update the page, and you’re done!

Frequently Asked Questions

Yes, you can control the scrolling direction by using the direction attribute. Set it to “up,” “down,” “left,” or “right” based on your needs.

Yes, you can adjust the speed by modifying the scrollamount value in the code. Higher values lead to faster scrolling.

Yes, you can customize the font family, size, and color by adding style attributes to the <marquee> tag.

Unfortunately, the <marquee> tag doesn’t have an option to stop scrolling after a certain point. It will loop infinitely unless you use JavaScript for more advanced control.

The scrolling text can be made responsive by setting percentage-based widths and using relative units like em or rem for font sizes.

While the <marquee> tag is generally supported, some modern browsers may not render it as intended. It’s a good idea to test it on different devices to ensure compatibility.

Conclusion

Adding a scrolling text bar to your WordPress blog is a quick and effective way to showcase important updates or promotions. Using simple HTML code, you can fully customize the appearance, direction, and speed of the scrolling text.

Remember to experiment with the options to create a visually appealing effect that matches your website’s style. If you prefer hands-on guidance, watch the video above for a detailed tutorial.

For more helpful videos like this, don’t forget to subscribe to our YouTube Channel.

Additionally, if you need assistance with formatting or publishing your blog posts, check out our Blog Post Formatting Services to ensure your content looks professional and polished!

Explore More Topics