How to Add a Stylish Scrolling Message Bar with Pure CSS – Step-by-Step Tutorial
Create a stylish and fully functional scrolling message bar for your website or blog using only pure CSS, without relying on any external libraries or JavaScript for basic functionality.
This comprehensive tutorial explains in detail how to build a modern, responsive, and interactive message bar that scrolls smoothly from right to left across your webpage. The message bar includes a pause-on-hover feature to improve user experience and ensures that your important messages are always visible without being intrusive.
A clean, well-designed message bar can significantly enhance the visual appeal of your site while helping to highlight announcements, promotional offers, updates, or other important information that your visitors should notice immediately.Quick Key Takeaways
- Uses pure CSS animation to achieve a smooth scrolling effect for messages, eliminating the need for complex scripts or libraries.
- Includes a hover-to-pause feature, allowing users to stop the scrolling temporarily and read messages without rushing.
- Designed to be fully responsive and adaptable to different screen sizes, ensuring a consistent experience across desktops, tablets, and mobile devices.
- Highly customizable styling options, allowing you to change heading styles, background colors, text colors, font sizes, and more according to your site’s design.
Full Tutorial Code
<style>
.message-bar {
border: 1px solid transparent;
background: transparent;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0,0,0,.06);
padding: 16px;
margin: 16px;
font-family: inherit;
color: inherit;
display: flex;
align-items: center;
overflow: hidden;
}
.message-heading {
font-weight: bold;
padding: 16px;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0,0,0,.06);
flex-shrink: 0;
background: transparent !important;
color: inherit !important;
}
.message-container {
display: flex;
flex-wrap: nowrap;
overflow: hidden;
flex: 1;
margin-left: 12px;
}
.message {
flex-shrink: 0;
display: inline-flex;
padding-left: 100%;
animation: scroll-left 10s linear infinite;
}
.message-container:hover .message {
animation-play-state: paused;
}
@keyframes scroll-left {
0% { transform: translateX(0%); }
100% { transform: translateX(-100%); }
}
</style>
<div class="message-bar">
<div class="message-heading">Message</div>
<div class="message-container">
<div class="message">
<p>Text <a href="#">Link</a></p>
</div>
</div>
</div>
How to Add in Blogger Blog
You can easily add this scrolling message bar to your Blogger blog using one of two main methods, depending on your level of comfort with editing HTML templates or using Blogger’s built-in layout gadgets. Both methods are straightforward and can be completed in just a few minutes.
Option 1: Add via Theme HTML
- Log in to your Blogger account and navigate to Theme → Edit HTML.
- Paste the provided CSS block inside the
<head>section of your theme to ensure that the styling is applied throughout the page. - Insert the HTML snippet in the exact location where you want the message bar to appear, such as the header, footer, or any custom section of your layout.
- Save the theme changes and preview your blog to confirm that the message bar is displayed and functions correctly.
This method fully integrates the message bar into your template, allowing it to appear on every page of your site without additional steps.
Option 2: Add via Layout Gadget
- Go to Layout → Add a Gadget → HTML/JavaScript in your Blogger dashboard.
- Copy the full code provided above, including the CSS and HTML, and paste it into the gadget’s content box.
- Drag and position the gadget in your desired location, such as the sidebar, footer, or any other visible section.
- Save the gadget and preview your blog to verify that the message bar is functioning as expected.
This method is ideal for beginners because it does not require editing the main template, reducing the risk of breaking other parts of your blog design.
Customization Tips
- Change the scroll speed by adjusting the
animation: scroll-left 10sduration to make messages scroll faster or slower. - The pause-on-hover feature is already included using the
:hoverCSS rule, which ensures that users can read long messages without interruption. - Modify the heading style by customizing the
.message-headingCSS rules to change color, font size, font family, background, or shadow effects. - Add multiple messages by duplicating the
.messagediv or by using JavaScript to dynamically inject messages, allowing continuous rotation of content.
Final Thoughts
This scrolling message bar is an excellent way to highlight important announcements, promotions, or updates on your website or blog. Its responsive design ensures it looks great on all devices, and the hover-pause behavior enhances accessibility and readability while keeping the overall design sleek, modern, and user-friendly.
FAQs
Can I make the scrolling vertical instead of horizontal?
Yes, you can make the messages scroll vertically by modifying the CSS transform property and keyframes. Instead of translating along the X-axis, you would adjust translation along the Y-axis, allowing messages to scroll up or down according to your preference.
Can I add multiple messages in rotation?
Yes, it is possible to add multiple messages by duplicating the .message div or using JavaScript to dynamically cycle messages. This approach allows you to display several announcements or promotional items in a continuous scrolling loop.
Is this compatible with all modern browsers?
Yes, this scrolling message bar relies on standard CSS animations and Flexbox layout techniques, which are supported by all modern browsers. Users will see consistent scrolling behavior on desktops, tablets, and mobile devices without compatibility issues.
Comments
Post a Comment