Hello, fellow web enthusiasts!
Today, I want to share a fun and interactive feature that you can easily add to your website or blog: a floating notification button. This button will display a notification panel when clicked, letting you show your users updates, alerts, or even embedded content like images or videos. It's a great way to keep your audience engaged without interrupting their browsing experience! It's only on this site bottom left float.
What Is a Floating Notification Button?
A floating notification button is a small, fixed-position button that stays visible as your users scroll down the page. When clicked, it toggles a notification panel where you can show updates, messages, or even rich content like videos and images. It's a simple but effective way to alert users to new content or updates without being too intrusive.
How to Implement the Floating Notification Button
Here’s the code you’ll need to implement this feature on your site, including a floating button and a dynamic notification panel.
Simply copy and paste the following code into your site's HTML. If you're using Blogger, you can directly paste this into a post or add it to your template.
<!-- Include FontAwesome in your template or replace the Icon to SVGfor styling -->
<!-- Floating notification button and panel -->
<div class="notification-widget">
<div class="notfloating-button">
<i class="fas fa-bell fa-2x"></i> <!-- Font Awesome bell icon -->
</div>
<div class="notification-panel">
<!-- Notifications will be dynamically added here -->
</div>
</div>
<style>
/* Floating button styles */
.notfloating-button {
position: fixed;
bottom: 100px;
left: 20px;
background-color: #007BFF;
color: #fff;
font-size: 20px;
padding: 15px;
border-radius: 50%;
cursor: pointer;
z-index: 999;
animation: pulsate 1s ease-in-out infinite;
}
@keyframes pulsate {
0% { transform: scale(1); }
50% { transform: scale(1.1); }
100% { transform: scale(1); }
}
/* Notification panel styles */
.notification-panel {
position: fixed;
bottom: 140px;
left: 20px;
width: 300px;
max-height: 300px;
overflow-y: auto;
background-color: #f1f1f1;
border: 1px solid #ccc;
border-radius: 5px;
z-index: 998;
display: none;
padding: 10px;
}
.notification-panel.show {
display: block;
}
/* Notification item styles */
.notification-item {
margin-bottom: 10px;
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function() {
const notfloatingButton = document.querySelector(".notfloating-button");
const notificationPanel = document.querySelector(".notification-panel");
// Simulated notifications
const notifications = [
"New blog post published!",
"<img src='https://example.com/image.jpg' alt='New post image'>",
"<iframe width='300' height='200' src='https://www.youtube.com/embed/VIDEO_ID' frameborder='0' allow='autoplay; encrypted-media' allowfullscreen></iframe>",
"Check out our latest video."
];
// Function to add notifications to the panel
function addNotifications() {
notifications.forEach(notification => {
const notificationItem = document.createElement("div");
notificationItem.classList.add("notification-item");
notificationItem.innerHTML = notification; // Render HTML content
notificationPanel.appendChild(notificationItem);
});
}
// Toggle notification panel visibility when the button is clicked
notfloatingButton.addEventListener("click", function() {
notificationPanel.classList.toggle("show");
});
// Simulate loading notifications
setTimeout(function() {
addNotifications();
}, 1000);
});
</script>
How It Works
The code above includes a floating button with a bell icon that uses Font Awesome for the icon. You can change it to SVG or any Icon you want.
The button is fixed at the bottom left of your page and has a pulsating animation to grab the user's attention.
When the button is clicked, it toggles the visibility of a notification panel. The notifications themselves are dynamically added to the panel. You can display simple text notifications, images, and even embed videos. It's a great way to share updates, alerts, or any other important information with your users!
How to Customize
- Change button color: Modify the
background-colorproperty of the.notfloating-buttonclass. - Change button position: Adjust the
bottomandleftproperties to place the button where you like. - Add your own notifications: Update the
notificationsarray with your own content, including text, images, or embedded videos. Further explained below
How to Modify, Add, or Remove Content in the Notification Panel
To edit, modify, remove, or add content in the floating notification panel, you can follow these steps:
1. Edit Existing Content
To edit existing content in the notification panel, simply change the text or HTML inside the strings in the notifications array.
const notifications = [
"New blog post published!", // Modify this text as needed
"<img alt="New post image" src="https://example.com/image.jpg" />", // Change the image URL or add your own
"<iframe allow="autoplay; encrypted-media" allowfullscreen="" frameborder="0" height="200" src="https://www.youtube.com/embed/VIDEO_ID" width="300"></iframe>", // Change the video URL or ID
"Check out our latest video." // Modify the text as needed
];
2. Modify the Content Type
You can modify the content type (text, images, videos) within the notifications array. For example, change the text or add new media types like images and videos.
3. Remove Content
To remove a notification, simply delete the corresponding line in the notifications array.
// Remove this line // "<iframe allow="autoplay; encrypted-media" allowfullscreen="" frameborder="0" height="200" src="https://www.youtube.com/embed/VIDEO_ID" width="300"></iframe>",
4. Add New Content
To add new notifications, you can add new strings to the notifications array. You can add text, images, or videos as needed.
const notifications = [
"New blog post published!", // Text notification
"<img src='https://example.com/new-image.jpg' alt='New Image'>", // New image notification
"<iframe width='300' height='200' src='https://www.youtube.com/embed/dQw4w9WgXcQ' frameborder='0' allow='autoplay; encrypted-media' allowfullscreen></iframe>", // Embedded video
"Check out our latest video!" // Updated text
];
5. Customize How Content Is Displayed
- Text Content: Directly modify or add text content inside the quotes (
""). - Images: Add images inside notifications using the
<img>tag. - Videos: Embed videos using the
<iframe>tag. - Links: Add clickable links using the
<a href="URL">tag.
Once you've made the changes, the floating notification panel will reflect your updates the next time it loads.
How to Add This to Blogger
If you're using Blogger, you can add this code directly to a post or to the HTML of your template:
- Go to your Blogger dashboard.
- Click on the "Posts" section and either create a new post or edit an existing one.
- Switch to the "HTML" tab and paste the code where you want the notification button to appear.
- Save and publish the post!
Bottomline
This floating notification button is a great way to add a dynamic and engaging feature to your website or blog. With just a few lines of code, you can offer your users real-time updates, keep them informed about new content, and make your site more interactive.
Feel free to tweak the code to fit your design needs, and happy coding!
