This article describes how to add Breaking News text or Scrolling text using Marquee.
Marquee is an HTML tag. It is used to create a moving/scrolling text or an image.
When Marquee is Needed?
If you want to use a Banner with Scrolling Text Marquee will be helpful. Marquee can be used to display Breaking News or any important news on a News Website.
There are two ways you can display a Breaking News in Blogger. One way is to use display the latest posts as Breaking News using Breaking News Ticker. Another way is to feed text manually in the Marquee tag.
This article discusses about the second technique - Moving Static Text using Marquee.
Marquee is deprecated and may not be supported by some browsers.
We have tested this technique in Chrome, Mozilla Firefox, Safari, IE and Opera Browser. For testing, we have taken the latest browsers and this technique works without any issues.
Marquee tag is deprecated and the support is stopped. This means use Cascading Style Sheets (CSS) as an alternate solution.
We have an alternate solution and will be shared in the feature article.
Breaking News Marquee code
<div class="container">
<div class="headertext">Breaking News</div>
<div>
<marquee style="width:1140px;color:red;"
onmouseover="this.stop();" onmouseout="this.start();"
direction="left" behavior="scroll" scrollamount="7">
This is Scrolling Text1
This is Scrolling Text2
This is Scrolling Text3
</marquee>
</div>
</div>
<style type="text/css">
.container {
position: relative;
}
.container, .container .headertext {
padding: 10px;
background-color: #fff;
color: #626060;
font-weight: bold;
}
.container .headertext {
position: absolute;
top: 0;
left: 0;
z-index: 10;
}
.container marquee {
line-height: 1.5;
}
.container marquee p {
margin: 0;
}
</style>
The above code uses a combination of HTML, JavaScript, and CSS. This code moves text from right to left.
Steps to Add Scrolling Text
- Go to Layout
- In Header section click Add a Gadget
- Select HTML/JavaScript
- In Configure HTML/JavaScript leave the title blank and
- In the Content section add the given script
- Click Save.