Up next in 10
How To Add Cookie Consent Popup in Blogger & WordPress website
985 views
Jan 27, 2024
In the video titled "How To Add Cookie Consent Popup in Blogger & WordPress website," viewers will learn how to implement a cookie consent popup to comply with privacy regulations on their Blogger and WordPress websites. The tutorial provides a step-by-step guide, explaining the importance of cookie consent and demonstrating how to add a customizable popup that informs users about the use of cookies on the site. Whether you're a blogger, website owner, or someone concerned about privacy compliance, this video offers practical insights into creating a user-friendly and legally compliant cookie consent solution. Follow along to understand how to enhance the privacy and transparency of your website by adding a cookie consent popup.
View Video Transcript
0:00
Hello everyone, welcome to Keytube blogging and in this video, I will show you how you
0:03
can add a cookie consent pop-up in your WordPress and blogger website
0:08
So let's check how you can add this cookie consent pop-up in your blogger website
0:13
So to add this, you have to go to your blogger website and here click on theme section
0:20
And before proceeding further, you have to take a backup of your theme
0:24
So in case if you do anything wrong in this process, then you can easily restore it by
0:29
copy and pasting the backup code. So here I will scroll down to the bottom and search for closing body tag
0:37
Now I have to copy a code like this. So just copy this code
0:42
So it will disable the previous cookie consent pop-up. Just click on paste and then you have to copy the CSS code
0:52
So let me just copy the CSS code and I will find the CSS code in the theme section
1:02
So let's scroll up and here it is. So these are the CSS code
1:09
So let me just find a space around it and I will paste it here
1:15
So make sure to paste the CSS code just above the B-skin tag
1:22
Now let me just copy the HTML code from here. And I will go to the closing body tag and I will paste it above the body tag
1:36
Now let's go to the code and here I will copy the JavaScript code and I will paste it after
1:46
the HTML code. And here you can adjust the cookie consent message and here you can add a link
1:56
So before that, let me just save this code. Okay, now the code is saved
2:01
Let me just copy the blog URL and I will open it in incognito mode
2:08
So make sure to open the website in incognito mode. And let me just scroll down and as you can see the cookies consent pop-up is showing
2:18
And here you can add a learn more link. So here basically you can link this button to a privacy policy page
2:26
So let me just go to the template and let me just search for privacy policy
2:34
So I will go to the pages section and I will copy the privacy policy link here
2:41
And I will go to the theme and I will click on edit HTML
2:47
And here I will scroll down to the bottom and I will find the learn more section
2:53
So here in the hash value, I will change the privacy policy link
2:58
Now let me just save the code. Now again go to the incognito mode and I will refresh this page
3:07
Now scroll down and as you can see the learn more button link is now added
3:13
So if you click on accept cookies, it will gone for 30 days
3:19
So once you accept the cookies, the cookies consent pop-up will be gone for 30 days
3:27
So you can also further adjust the date. Like let me just go to the coding and let's search for the JavaScript code
3:38
So here this is the max age. So you can change this number
3:43
So as you can see, this is in seconds. So you can change this number to your own value
3:48
So this is basically set to 30 days. So once you click on the accept cookies, it will turn this cookies consent button permanently
3:59
But it will not store the cookies as we open this website in incognito mode
4:05
So let me just open the website here. And I will open a page from here
4:13
And scroll down and there is no cookies consent pop-up. Let's click on homepage
4:18
So once you click on accept cookies, it will gone for 30 days
4:23
And once let me just clear the cookies from here. So I will click on remove and let's click on refresh
4:32
Now scroll down and here as you can see the cookies consent pop-up is showing
4:37
So let me just open a blog post from here. Now scroll down and as you can see the cookies consent pop-up is showing
4:45
And once I click on this button, it will gone for 30 days
4:50
So in this way you can add a cookies consent pop-up in your blogger website
4:55
And you can also add the same code to your WordPress website
4:58
So here you can use any plugin like header footer manager. So let me just click on add plugin and I will search for header footer code
5:10
Something like that. And you can install any header footer manager. So I prefer 99 robots header footer code manager
5:20
So just install this plugin and you can paste this code in the footer section
5:25
Or you can go to the appearance section and here click on theme file editor
5:33
And here you have to search for footer.psp. Now scroll down and here this is the closing body tag
5:40
So you can paste this code above the closing body tag. And make sure to add the style tag here
5:47
So here I will add the style tag like this. And I will scroll up and I will add the style tag
6:01
Just add the style tag above the CSS code and close the style tag after the CSS code
6:07
Now you have to copy the whole code and paste it above the closing body tag
6:12
After that it will be added in your WordPress website. So let me just add this code
6:19
So let me just copy this code from here. And I will paste it here
6:28
Now I will click on enter. And I can add the HTML code from here
6:39
And I will click on enter. And let's add this JavaScript code
6:48
Now click on update file. So before changing anything make sure to take the backup of your footer.php file or take
6:58
a full site backup of your WordPress website in case if you do anything wrong in this process. Okay
7:05
Now let me just visit the website. And as you can see the cookies consent popup is now showing
7:13
And here you can click on accept cookies to close this. So in this way you can add cookies consent popup in your blogger and WordPress website
7:23
So let me just remove this cookies consent popup and let's refresh this page
7:29
And if you have any doubt regarding this, then you can ask me in the comment section
7:33
and you can also further customize the color and the border radius, etc
7:39
So let me just show you how can customize the color. So to customize the color, you have to search for the CSS code and here you can see this
7:48
option like background color. So you can change the background color here and here you can adjust the width, padding, etc
7:59
So just right click on it
8:09
And here you can adjust the background color like this. And if you find this content valuable, then make sure to hit the like button and I will
8:20
see you in the next video. Thank you