How To Make Css Notification Bell Hover Button ? without any Java Script
Here is two awesome style of Bell Hover. First one is Top Bell icon when you touch your computer cursor a new box hover from top. Another one is Bottom Bell icon when you touch your computer cursor a new box hover from bottom.
You can use this code on your site, it is 100% effective. This option is usually used to keep visitors on the site for a little longer. Using this code is more likely to reduce the bounce rate of your website which in turn leads to improvement of your website distance.
How to use this code? Those who have a little idea about coding can use the code. Another advantage is that you can use this code in both WordPress and Blogger. Although that can be done using various WordPress plugins, you can easily connect to the WordPress site using this code if you want. In order to use this code properly, you need to work in three steps - 1. Attaching CSS section 2. Attach the HTML file where the button is going to show. 3. And attach the required JavaScript. Those who use Blogger need to go to the Blogger Templates section and add CSS code and JavaScript code. And the third step is to attach the HTML code where you are going to show the download-button.
How do you use this code in WordPress ? They will install a WordPress plugin to add additional script CSS. This will make your job a little easier. Once the required CSS and script are attached, attaching the HTML code to the part of your post where you are going to display the download button will work.
Suggestion: First of all, make a backup of your Blogger/Wordpress template so that you can use your theme in case of any mistake.
Don't be hurry ! At first read how to use this code poperly. We will give you opportunity to download full script. Otherwise it's may not working poperly.
CSS Bottom Notification Bell icon - Hoverable Notification Box
Both CSS Script are same But you have to change Bell position as you want.
Css Notification Bell Hover From Bottom
.noti-Btn{
transition: 0.9s;
cursor: pointer;
font-size: 28px;
position: fixed;
z-index: 99999999;
bottom: 0px;
left: 10px;
width: 10%;
}
How To Add CSS Notification On Blogger ?
Go To Blogger Dashboard
Step:01 ➡ Layout
Step:02 ➡ Add a Gadget
Step:03 ➡ Select HTML/JavaScript
Step:04 ➡ Paste This Code
Don't be hurry ! At first read how to use this code poperly. We will give you opportunity to download full script. Otherwise it's may not working poperly.
Now Click on Add a Gadget
Paste This Css Notification Bottom Bell Hover Code and Save !
It's Done.
How To Download This Code ?
Well' This is free of cost. Just Click on Download Now ! Button from below and Enjoy !
How To Set up Css Notification Bell Hover in WordPress ?
WordPress has a lot of options to implement the sticky footer Adsense code. You can use the Ad Inserter plugin to show the sticky ad inside the article or put the code inside a “Custom HTML” widget to show it all over the site.
- Go To > WordPress Dashboard
- Go to Appearance → Widgets → Custom HTML and add it to the sidebar.
- Now, put the above code and save it.
- Done !