Make Cookies Notifications on Blogger

WHAT IS COOKIE?

A cookie or notification that often appears on a website is a text and collection of information that will be stored on your computer after you visit someone's website.



Cookies can store various types of information data, including among others: your name, email address, home address, telephone number or language. However, this information will be saved if you have given this access to the site. The website itself will not be able to access information data if you have never given it to the website, the website will also not be able to access other file information on your computer.

So you already know what cookies are? If so, let's just continue to make the cookie notification.

HOW TO MAKE COOKIE NOTIFICATION IN BLOG

As usual you must log in first to Blogger > select the Theme menu> click the Edit HTML button> and add the CSS below right above the code ]]></b:skin> or </style>

.cookie-bubble{position:fixed;width:100%;max-width:400px;min-height:100px;border-radius:10px;background-color:#fff;-webkit-box-shadow:0 2px 15px rgba(0,0,0,.2);box-shadow:0 2px 15px rgba(0,0,0,.2);z-index:9999;font-family:'Google Sans'}
.cookie-bubble.bottom-left{bottom:15px;left:15px}
.cookie-bubble.bottom-right{bottom:15px;right:15px}
.cookie-bubble.show.bottom-left,.cookie-bubble.show.bottom-right{-webkit-animation-name:popInBottom;animation-name:popInBottom;-webkit-animation-duration:2s;animation-duration:2s;-webkit-animation-timing-function:cubic-bezier(.19,1,.22,1);animation-timing-function:cubic-bezier(.19,1,.22,1);-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}
.cookie-bubble.hide{display:none}
.cookie-bubble .cb-wrapper{position:relative;display:inline-block;padding:15px}
.cookie-bubble .cb-wrapper .cb-row{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;text-align:left}
.cookie-bubble .cb-wrapper .cb-row .cb-row-content .message{position:relative;width:100%;display:inline-block;color:#000;font-size:15px;margin-top:0}
.cookie-bubble .cb-wrapper .cb-row .cb-row-content .cb-controls{position:relative;width:100%;float:left;margin-top:10px}
.cookie-bubble .cb-wrapper .cb-row .cb-image{padding-right:23px}
.cookie-bubble .cb-wrapper .cb-row .cb-image .cookie-inner-color{fill:#00a4ff}
.cookie-bubble .cb-wrapper .cb-row .cb-image svg{width:75px}
.cookie-bubble .cb-wrapper .cb-row .agreement-btn{margin:0 10px 0 0;text-decoration:none;color:#fff;background:#00a4ff;padding:10px 20px;border-radius:5px;font-size:14px;opacity:1;border:none;cursor:pointer;text-transform:uppercase;font-weight:600;float:left}
.cookie-bubble .cb-wrapper .cb-row .agreement-btn:hover{background-color:#0083cc}
.cookie-bubble .cb-wrapper .cb-row .cookie-policy-btn{margin:0;color:#000;padding:10px 0;border-radius:5px;font-size:14px;opacity:.95;border:none;cursor:pointer;font-weight:400;float:left}
.cookie-bubble .cb-wrapper .cb-row .cookie-policy-btn:hover{opacity:1;text-decoration:underline}
.cookieBubble .copyright-wrapper{margin-top:20px}
.cookieBubble .copyright-wrapper a.copyright{position:absolute;width:70px;height:16px;bottom:8px;right:7px;margin-top:30px;background:url(../img/cb_copyright.svg);background-size:cover}
@-webkit-keyframes popInBottom {
0%{-webkit-transform:translateY(120%);transform:translateY(120%)}
100%{-webkit-transform:translateY(0);transform:translateY(0)}
}
@keyframes popInBottom {
0%{-webkit-transform:translateY(120%);transform:translateY(120%)}
100%{-webkit-transform:translateY(0);transform:translateY(0)}
}
@media screen and (max-width: 440px) {
.cookie-bubble.show{border-radius:0;width:100%;max-width:100%;left:0!important;bottom:0!important}
.cookie-bubble .cb-wrapper{padding:20px 15px}
}

If you have added the jQuery code below right above the code </body>

<script src='https://raw.githack.com/SayemTutorial/smdesignbd/master/cookies.js'/>

You cannot change the contents of the jQuery code, if you want to change it, copy the code and upload it to github. Out of respect never delete the maker.

If all you have left is to save the Theme and see the results. For results you can see this blog.

So until this article just this time, don't forget to comment if you have trouble or can pass the contact page.