Why Do you need a cookie Consent Banner.?
If you are a blogger or just started blogging and you are getting traffic from all over the world, then this blog post is just for you, because without adding cookie consent banner you are loosing around 20% of your Adsense income and traffic from your blog, As per the GDPR, CCPA, LGPD privacy policy act you have to add a cookie consent banner in your blog which is mandatory, its not only about loosing your Adsense revenue, if you do not add this banner then you maybe face the penalization of Google or other privacy policy act on your blog.
And the main thing comes here that if you have your blog hosted on Wordpress then there are a lot of plugins for the cookie consent banner for the Wordpress blogs, but if we talk for the Blogger blog then there is no such tools or plugins for it.
For doing this you have to manually add the Custom cookie banner on your blog, and for doing this there are lot of websites who gives you details but in all those there are the major issue is they will give you a very complex code and ask you to edit your blog's HTML through which there are lot of unwanted Javascripts in your blog which will reduce the loading time of your blog.
But i will tell you a new way through which you do not have to add any complex code in your blog's HTML and your loading time will not decrease.
Ok now we will not talk too much lets continue the work flow and i will provide you step by step guide on how to add a cookie consent banner in a single go without any issues. One more thing if any Wordpress user also want to add this Custom cookie consent banner in their blog without using any plugin then do comment below then i will definitely write article on it too.
Some Related cool features for your blogger blog is as follows:
How To Add Custom Cookie Consent Banner In Blogger Blog.??
For adding custom cookie consent banner in blogger without editing your blog's code, you have to use Google's service Google Tag Manager, which is free and easy to setup just read the complete article carefully.
Step 1. Setup Google Tag Manager Account
- Go to Google Tag Manager and create a free account using your Google credentials, it will take your maximum of 2 minutes.
- After going on to the website click on create account and fill the details like:
- Account Name → (e.g., Your Blog Name)
- Country → (Select your country)
- Container Name → (Enter your blog URL)
- Target Platform → Select Web
- Click Create and accept the terms.
Step 2. Now Install Google Tag Manager In Blogger
- In GTM dashboard you will see 2 code snippets, which you will have to add in your blogger HTML (Do not worry these are Google code which will not slow down your blog and helps you in Google analytics and Adsense account)
- Copy the first code snippet and add it in your blogger's HTML just after the "<HEAD>" tag in Blogger HTML.
- Now copy the second code snippet and paste it right after the <Body> tag in your blogger HTML.
- Now save your theme and that's it your blogger blog theme coding is finished.
But always remember before editing your theme always take a backup of your theme first.
Step 3. Now Create A Cookie Consent Banner In GTM
- In the Google Tags Manager Dashboard you will see "Tags" named tab in the left side menu the image is shown below.
- Click on it and now in it you will see a "NEW" named button in the right side click on it and a new window comes like this.
- Now click on the pencil button it will comes up when you take your mouse to the Tag configuration block.
- Once you click on the pencil you will see a new window comes now select the "Custom HTML" option from same like the image shown below.
- After clicking on Custom HTML you will see a box in which now you have to paste the code i have given below just paste the exact code in the box without changing anything.
<!-- Custom Cookie Consent Banner -->
<style>
#cookie-banner {
position: fixed;
bottom: 15px;
left: 15px;
right: 15px;
background: rgba(0, 0, 0, 0.85);
color: #fff;
padding: 15px;
font-size: 14px;
text-align: center;
z-index: 9999;
border-radius: 8px;
display: none;
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
}
#cookie-banner a {
color: #FFD700;
text-decoration: underline;
}
#cookie-banner button {
background: #28a745;
color: white;
border: none;
padding: 10px 15px;
margin-left: 10px;
font-size: 14px;
cursor: pointer;
border-radius: 5px;
}
#cookie-banner button:hover {
background: #218838;
}
</style>
<div id="cookie-banner">
This website uses cookies to improve your experience.
<a href="/p/privacy-policy.html">Learn more</a>.
<a href="https://myzmoneymagnet.com">.</a>.
<button onclick="acceptCookies()">Got it!</button>
</div>
<script>
function getCookie(name) {
let match = document.cookie.match(new RegExp(name + '=([^;]+)'));
return match ? match[1] : null;
}
function acceptCookies() {
document.cookie = "cookiesAccepted=true; path=/; max-age=" + 60 * 60 * 24 * 30;
document.getElementById('cookie-banner').style.display = 'none';
}
// Show banner if cookies not accepted
if (!getCookie("cookiesAccepted")) {
document.getElementById('cookie-banner').style.display = 'block';
}
</script>
- First after pasting the code find "/p/privacy-policy.html" in the code and replace it with your blog's privacy policy page and save it.
- Now after pasting this code in Custom HTML, now move towards below and take your mouse on the Triggers option and you will see a pencil same like Tag configuration and then click on it, after clicking there you will se 2-3 options click on "ALL Pages".
- After setting the triggers now come back to the above section and you will see a option named "Advanced Settings" click on it and then you will see Consent Beta option in it click on it.
- After clicking on consent beta option you will see "Additional consent checks" in this you will see 3 radio type buttons click on the last one and add the 2 things same like in the image below.
- Now you are all set and now click on the save button and save the tag creation.
Now once you click on the save button you will come back automatically and it will show you your tag in the container after this, click on the Submit button on the right side as you click on the Submit button the window open and name it of your blog or website and then click on the publish button shown in the image below.
After clicking the Publish button it will take around 1 minute and you will see a phrase like "Sing Like No One Is Listening" now its done and cookie consent banner is set on your blog.
Now when anyone visit your website they will see a cookie consent button arise from the below in full width, if you want some more custom designed Cookie Consent banners then tell us in comments so in the next article we will provide you around 10 new designed cookie banners.
How It Works
- The banner only appears if the user has not accepted cookies.
- When the user clicks "Got it!", it sets a cookie (
cookieConsent=true) for 1 year. - Once accepted, the banner does not reappear.
This code ensures your Blogger site remains GDPR-friendly while keeping things simple and efficient. ✅
Conclusion:
With the method i told you above you will be able to add a Cookie consent banner with all the customization in your blog without the help of any third party scripts or editing your theme this will give you full control on design and the data in your google tag manager and analytics account.
For more information on making your blog nice looking and getting more traffic stay tuned on our other posts.