How to Make Responsive Cookie Notification Widget in blogger

As you know, European Union (EU) laws require, to provide EU visitors with information about the cookies you use. this law also requires you to get approval.

What Are Cookies?

Cookie is a term for a collection of information that contains a track record and activity when browsing a website. In simple terms, cookies are a collection of data that the computer receives from a site and sends it back to the sites visited.
Uses and Functions of Cookies in Browsers With cookies, websites can store track records and activities of visitors. What functions do cookies provide?

There are two types of cookies:

First party cookies are created by the sites you visit. The site is displayed in the address bar.

Third party cookies are created by other sites. This site contains some content, such as advertisements or images, that you see on the web pages you visit.

Check out the full explanation below:

1. Saving Login Information 

The first function of cookies is to store login information. So, you don’t need to write your username and password repeatedly to visit the same website.

2. Saving Website Settings 

Cookies also serve to save the settings of the websites visited. For example, when you visit a website that offers a choice of English and Indonesian. Then you choose the Indonesian language settings, cookies will “remember” the preferences you choose. So, when you re-access the website, the website will automatically provide content in Indonesian, according to your previous choice.

3. Provide More Personal Content Another 

function of cookies is to allow the website to provide more personalized content. For example, on a shopping site you often search for electronics and clothing products. When you return to the online shopping site, you will get product suggestions related to electronics and clothing products. So your online shopping experience can be more personal because cookies store your track record and activity on the online shopping website.

4. Showing Ads 

The last function of cookies is to display advertisements that are in accordance with visitors’ browsing activities. For example, you have just visited the website of an online store that sells shoes. Then you read the news on an online news portal and may come across an advertisement related to shoes. Are Cookies Safe? Under normal conditions, cookies cannot transfer malware or viruses because the data carried by cookies does not change when moving from computer to website and vice versa. This cookie data transfer has absolutely no effect on your computer.

Even so, the internet is still the internet and you still have to be careful when doing activities on it. Avoid visiting suspicious and potentially dangerous sites so that the information in your cookies is not stolen by irresponsible people.

How to add Cookie Consent Notice?

it’s quite easy, just follow these steps, then you will get a stylish and responsive notification widget. let’s go straight to the tutorial.

Important information! before adding the cookie notification widget, please back up the template first, Simple Blogger Tutorial is not responsible if during installation, you make a mistake and make your blog look different! thank you please backup first.????

Step 1: Please Login to Blogger
Step 2: Choose Theme And Edit Html
Step 3: Find the code ]]></b:skin> and put the following CSS code right above it

If your template has a dark mode feature, and if you want a different color when in dark mode, you can customise the codes as per your need. Each template can have a different dark mode class, so please adjust it, you can replace the marked class with your template dark mode class.

/* Cookies Consent Notice by Fineshop */
.ckWrap{position:fixed;right:0;left:0;bottom:-600px;z-index:50;width:100%;padding:20px;background:rgba(255, 255, 255, 0.8);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:30px 30px 0 0;box-shadow:0 -10px 25px -5px rgba(0,0,0,.1);align-items:center;justify-content:center;text-align:center;animation:ckUp 2.5s forwards;animation-delay:1s;-webkit-animation:ckUp 2.5s forwards;-webkit-animation-delay:1s}
.ckWrap.acptd{animation:ckDn 2.5s backwards;animation-delay:.3s;-webkit-animation:ckDn 2.5s backwards;-webkit-animation-delay:.3s}
.ckWrap.hidden{display:none}
.ckWrap .ckCont svg{width:50px;height:50px;fill:#08102b;stroke:#08102b;stroke-width:.8}
.ckCont h2{margin:0;color:#08102b;font-size:1.5rem;font-weight:800;font-family:inherit}
.ckCont p{margin:10px 0;line-height:1.7em;color:#08102b;font-size:0.9rem;font-weight:400;font-family:inherit}
.ckWrap .btn{display:inline-flex;align-items:center;margin:0;padding:10px 15px;outline:0;border:0;border-radius:2px;line-height:20px;color:#fefefe;background-color:#482dff;font-size:13px;font-family:inherit;text-decoration:none;white-space:nowrap;overflow:hidden;max-width:100%;cursor:pointer;transition:all 0.3s ease}
.ckWrap .btn:hover{opacity:.8;transform:scale(0.97)}
.ckWrap .btn.outl{color:#08102b;margin-left:8px;background-color:transparent;border:1px solid #767676}
.ckWrap .btn.outl:hover{border-color:#482dff}
@media screen and (min-width:768px){.ckWrap{max-width:450px;border-radius:10px;left:auto;right:30px;bottom:-500px;box-shadow:0 5px 35px rgba(0,0,0,.1);animation:ckdeskUp 2.5s forwards;animation-delay:1s;-webkit-animation:ckdeskUp 2.5s forwards;-webkit-animation-delay:1s}.ckWrap.acptd{animation:ckdeskDn 2.5s backwards;animation-delay:.3s;-webkit-animation:ckdeskDn 2.5s backwards;-webkit-animation-delay:0.3s}}
@-webkit-keyframes ckUp{100%{bottom:0}}
@keyframes ckUp{100%{bottom:0}}
@-webkit-keyframes ckdeskUp{100%{bottom:30px}}
@keyframes ckdeskUp{100%{bottom:30px}}
@-webkit-keyframes ckDn{0%{bottom:0}100%{bottom:-600px}}
@keyframes ckDn{0%{bottom:0}100%{bottom:-600px}}
@-webkit-keyframes ckdeskDn{0%{bottom:30px}100%{bottom:-600px}}
@keyframes ckdeskDn{0%{bottom:30px}100%{bottom:-600px}}
.darkMode .ckWrap{background:rgba(50, 50, 50, 0.8)}
.darkMode .ckWrap .ckCont svg{fill:#fefefe;stroke:#fefefe}
.darkMode .ckCont h2, .darkMode .ckCont p, .darkMode .btn.outl{color:#fefefe}

Step 4: We have to disable default Cookie Notification by Blogger, so add JavaScript Code Right Above </head>.

<script>/*<![CDATA[*/ /* Cookies Consent Notice Script by Fineshop */ var ckBox=document.querySelector("#ckBox"),ckAcptBtn=document.querySelector("#ckAcptBtn"),ckErrMes="Cookie can't be set! Please unblock this site from the cookie setting of your browser.";if(null!=ckBox){ckAcptBtn.onclick=()=>{document.cookie="CookieConsentByFineshop=Accepted; max-age=2592000; path=/",document.cookie?ckBox.classList.add("acptd"):alert(ckErrMes)};let e=document.cookie.indexOf("CookieConsentByFineshop=Accepted");-1!=e?ckBox.classList.add("hidden"):ckBox.classList.remove("hidden")} /*]]>*/</script>

Step 5: Now add the following HTML code just above for </body>. If you can’t find the code, you can look for the following code<!–</body>–></body> or &lt;/body&gt;

<script>/*<![CDATA[*/ /* Cookies Consent Notice Script by Fineshop */ var ckBox=document.querySelector("#ckBox"),ckAcptBtn=document.querySelector("#ckAcptBtn"),ckErrMes="Cookie can't be set! Please unblock this site from the cookie setting of your browser.";if(null!=ckBox){ckAcptBtn.onclick=()=>{document.cookie="CookieConsentByFineshop=Accepted; max-age=2592000; path=/",document.cookie?ckBox.classList.add("acptd"):alert(ckErrMes)};let e=document.cookie.indexOf("CookieConsentByFineshop=Accepted");-1!=e?ckBox.classList.add("hidden"):ckBox.classList.remove("hidden")} /*]]>*/</script>

Step 6: Now add the following Javascript code just below the HTML code that you copied in Step 5.

Step 7: Finally, Click the Save Icon

did this article help you? please leave a comment below. thank you for visiting

Referensi:
www.niagahoster.com & www.fineshopdesign.com