Hello, Bloggers! Welcome to Raghavendra Technic.

What are Cookies?

Cookies are documents created with the aid of websites you go to. they make your online experience less complicated by saving browsing statistics. with cookies, sites can hold you signed in, bear in mind your website options, and provide you with locally relevant content material.

There are two types of cookies:

First-party cookies are created by means of the website you visit. the website online is proven inside the deal with bar.
Third-party cookies are created via different websites. those websites own a number of the content material, like commercials or snapshots, which you see on the webpage you visit

How to add Cookie Consent Notice?

By default bloggers notify approximately cookies that look on the top of the blogger's internet site but if you want an expert and responsive cookie consent be aware widget through which you may reap consent regarding cookies out of your site visitors. then you definitely just want to follow the stairs below to get a fashionable and responsive cookie consent notice widget.

Adding cookie consent be an aware widget to a blogger website will no longer require lots of know-how about HTML, CSS, or JS due to the fact I've already designed it for you. What you need to do is to implement the codes in the right area in your blogger topic XML.

Important!Before we start adding codes in XML, I will recommend you to take a Backup of your current theme. By chance if any problem occurs, you can restore it later.

Step 1: First of all Login to your Blogger Dashboard.

Step 2: On Blogger Dashboard, click Theme.

Step 3: Click the arrow down icon next to 'customize' button.

Step 4: Click Edit HTML, you will be redirected to editing page.

Step 5: Now search the code ]]></b:skin> or /*]]>*/</style> and paste the following CSS Codes just above to it.

/* Cookies Consent Notice by Raghavendra Technic */
.rtckWrap{position:fixed;right:20px;left:20px; margin-bottom: 80px; bottom:-600px;z-index:10;padding:20px;background:rgba(255, 255, 255, 0.8);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:30px 30px;box-shadow:0 -10px 25px -5px rgba(0,0,0,.1);align-items:center;justify-content:center;text-align:left;animation:ckUp 2.5s forwards;animation-delay:1s;-webkit-animation:ckUp 2.5s forwards;-webkit-animation-delay:1s}
.rtckWrap.acptd{animation:ckDn 2.5s backwards;animation-delay:.3s;-webkit-animation:ckDn 2.5s backwards;-webkit-animation-delay:.3s}
.rtckWrap.hidden{display:none}
.rtckCont h2{margin-bottom: 10px; font-size: 1.1rem; font-weight: 700; font-family: var(--fontCo);}
.rtckCont h2::after {content: ''; display: inline-block; vertical-align: middle; width: var(--widgetTa); margin: 0 10px; border-bottom: 1px solid var(--widgetTac); opacity: .5;}
.rtckCont p{margin:10px 0;line-height:1.4rem;color:#08102b;font-size: 14px;font-weight:400;font-family: var(--fontCo);}
.rtckF{margin-top: 15px; display: flex; justify-content: center;}
.rtckB {display: inline-flex; align-items: center; cursor: pointer; padding: 10px 15px; outline: 0; border: 0; border-radius: var(--buttonR); line-height: 20px; color: rgba(0,0,0,.8); background: #e9e9e9; font-size: 14px; font-family: var(--fontB); white-space: nowrap; overflow: hidden;}
.rtckF >*:first-child {margin-right: 10px; border-radius: 8px; background: var(--linkB); color: #fffdfc;}
.rtckF >*:last-child {flex: 0 0 auto; border-radius: 8px;}
.rtckF >* {flex-grow: 1; justify-content: center;}
@media screen and (min-width:768px){.ckWrap{max-width:400px; left: 20px; right: 20px; margin-bottom:20px; border-radius:10px; bottom:-600px;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}}
.rtdarkMode .ckWrap{background:rgba(50, 50, 50, 0.8)}
.rtdarkMode .ckCont h2, .darkMode .ckCont p, .darkMode{color:#fefefe}

Step 06: We have to disable default Cookie Notice by Blogger, so add the following JavaScript Codes just above to </head>

<script>/*<![CDATA[*/ /* Disable default Blogger cookie notice */ cookieChoices = {}; /*]]>*/</script>

Step 07: Now add the following JavaScript Code just above to </body>

<script>/*<![CDATA[*/ /* Cookies Consent Notice */ 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 8: Now click on Save by clicking this icon

Step 09: Then go to Layout Menu.

Step 10: Create a gadget by clicking on Add a Gadget and choose HTML/Javascript.

Step 11: Paste the following HTML Codes in it.

<!--[ Cookies Consent Notice ]-->
<div class='ckWrap hidden' id='ckBox'>
  <div class='ckCont'>
   <!--[ Cookies Notice Heading ]-->
   <h2>Cookies Consent</h2>
   <!--[ Cookies Notice Detail ]-->
   <p>We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.</p>
  </div>
  <div class='ckF'>
    <button class='ckB' id='ckAcptBtn'>Accept Cookies!</button>
    <a class='ckB' href='https://policies.google.com/technologies/cookies'>Learn More</a>
  </div>
</div>

Step 12: Now click on Save by clicking this icon

Step 13: That's done!

Credit

Created by : Fineshop.

Conclusion

In this article I have made a tutorial on How to make Cookies Consent in blogger. I Hope you have liked this article and please do share with your friends and follow up blog for more.

If you face any problems in code or have any questions please feel free to ask in comments section or join our Telegram Group for discussion.

Our All Posts Are Protected By DMCA. So Don't Try To Copy Our Posts And Reproduction In Any Way Is Strictly Prohibited! Or else Legal Actions Will Be Taken. © Raghavendra TechniC | All Rights Reserved

Classic UI

Search Suggest

How to make Cookies Consent in blogger

What are Cookies?

How to add Cookie Consent Notice?

Credit

Conclusion

You may like these posts

5 comments