How to Add Custom HTML5 Video Player in Blogger?

How to Add Custom HTML5 Video Player in Blogger?

How to Add an HTML5 Video Player in Blogger?
Welcome to Asif Kamboh.com blog, On this occasion, I will share that, How can you add your own HTML5 Video Player to Blogger Blog, And how can you change the theme of this video player, And how to publish videos in this video player without reducing the quality.

The name of the HTML5 video player, which I'm going to share, is videosjs, and it's free for all users. You can install it on your Blogspot blog via the CDN server; with the help of this video player, you can easily play mp3 audios and mp4/webm videos on your blog.

If you want to create your own video player on your Blogspot blog like this blog. And want to publish high-resolution videos like 4K, 2K, 1080p, and 720p videos to your blog without compromising the quality of the videos, you can add by following these steps.


What Is HTML5 Video Player?
HTML5 Video Player is software that plays online video in a browser and is developed on the web using JavaScript, CSS, and the HTML language, which is compatible with almost all browsers. Yes, if the user's browser is out of date, the HTML5 video player software will fallback to Flash to play your videos, ensuring that your videos play on almost all web browsers.

For example, if you create a video tag in HTML and put a direct link to your MP4 or webm video in it, and then when the user comes to this page, he will see a video player. In which he can watch this video online without downloading.

How to Add Custom HTML5 Video Player to Blogger?

Open Blogger Dashboard > Themes Menu > Click on the Three Dots and click the Edit HTML option, and then add the following code below the <head>.


<link href="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.10.1/video-js.min.css" rel="stylesheet">


And then add the below code before the </body> and click the Save Theme button in the top left corner to save the changes.

<script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.10.1/video.min.js"></script>


After adding the above both codes into your blog theme, go back to the post where you want to add your video, and change the post page "Compose view" to "HTML View" and add the below code in it.

<video
    id="my-video"
    class="video-js"
    controls
    preload="auto"
    width="640"
    height="264"
    poster="POSTER.jpg"
    data-setup="{}"
  >
    <source src="VIDEO.mp4" type="video/mp4" />
    <p class="vjs-no-js">
      To watch this video, please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video.
    </p>
  </video>


Before adding this code to your theme, replace the highlighter code "POSTER.jpg" with your custom video thumbnail URL and replace "VIDEO.mp4" with your video URL address. And if your video format is "VIDEO.webm" then change the type in this code to "video/webm".

Just now your video in the post will be shown in the video player and you can watch it, and the video play button icon is shown in the top left corner if you want to move it to the center, Add this tag vjs-big-play-centered to video class.

This is what the video class tag will look like when you add the play button icon center tag to the video class.

class="video-js vjs-big-play-centered"


And this Videojs player offers three predefined classes that make it easy to maintain video element aspect ratio. If you use one of these tag then the width and ratio of your video automatically changes to the selected ratio, you don't need to manually add height and width to the video tag.

Class Meaning
vjs-fluid It keeps the video in proportion to the original aspect.
vjs-16-9 It keeps the video in a 16:9 aspect ratio.
vjs-4-3 It keeps the video in a 4:3 aspect ratio.


I want the video player to be 100% the width and height of the parent container, and for that i will use the vjs-fluid tag to keep the height and width of my video in the original ratio.

class="video-js vjs-fluid vjs-big-play-centered"


I have just made all the settings for my video player and here is an example of my code for you to clearly understand how you add your video and poster URLs to video player code and class tags.

<video
    id="my-video"
    class="video-js vjs-fluid vjs-big-play-centered"
    controls
    preload="auto"
    width="640"
    height="264"
    poster="https://sv2.asifkamboh.com/png"
    data-setup="{}"
  >
    <source src="https://sv2.asifkamboh.com/mp4" type="video/mp4" />
    <p class="vjs-no-js">
      To watch this video, please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video.
    </p>
  </video>




I hope this post will be helpful to you, and if so follow me on my social accounts.
How to Add a Cookie Notification Bar in Blogger?

How to Add a Cookie Notification Bar in Blogger?

How to Add a Cookie Notification Bar in Blogger?
Welcome! to my AsifKamboh.com blog, On this occasion, I am going to share with you a premium cookies notification bar for Blogger Blogspot Blogs.

If your website/blog has visitors from EU (European Union) countries, then the cookies notification bar is an essential part of your website or blog. According to EU law, if visitors come to your site from their country, you must inform them about your site's cookie policy.


What Is a Cookie?
A cookie is a package file for the browser that contains small pieces of data, such as user account details that are exchanged between the user's computer and the web server, to identify specific users and enhance their browsing experience.

For example, cookies allow websites to identify users and recall their individual login information and preferences. Such as, when a user logs in to their account on the web and then restarts the browser, the user does not need to log in to their account again because the cookie stores the user's account information internally. And the web server uses cookies that are already in the browser folder that contains the user's account information.

Cookies are created when a user first visits a website, and if the same user returns to that site in the future, the web browser returns the data to the web server in the form of a cookie.

Why Are Cookie Notifications Essential in Blogspot?
EU rules require you to provide information to EU visitors about the cookies used on your blog. In many cases, these laws also request your consent.

If your Blogspot blog has visitors from European countries, you must notify them via an informative message about your blog's cookies policy.

As a courtesy, the Blogspot team added the following notice to all blogs to help their users comply with these rules:

"This site uses cookies from Google to deliver its services and analyze traffic. Your IP address and user-agent are shared with Google along with performance and security metrics to ensure quality of service, generate usage statistics, and to detect and address abuse."

This notice allows visitors to learn about the use of certain Google Blogger and Google cookies on your blog, including Google Analytics and AdSense cookies.

If you want to include a custom cookie notification below in your BlogSpot blog, you must disable the cookie message that is present on your blog by the Blogger.

To disable Blogger's built-in cookie notification, add the following javascript code under your blog theme header tag <head>.

<script type='text/javascript'>cookieChoices = {};</script>


How Can You Add Cookie Notifications to Blogger Blogspot?

Follow these steps if you want to add a premium custom cookie notification to your blog.

Open Blogger Dashboard > Themes Menu > Click on the Three Dots and click the Edit HTML option, and then add the following CSS code before the </head>.

<style type='text/css'>
/* Asif Kamboh - www.asifkamboh.com */
.cookie-bubble{position:fixed;width:100%;max-width:400px;min-height:100px;background-color:#fff;box-shadow:0 1px 15px rgba(0,0,0,0.1);z-index:990;border-radius:6px}
.cookie-bubble.bottom-right{right:15px;bottom:15px}
.cookie-bubble.bottom-left{left:15px;bottom: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;font-size:15px;color:#000;margin-top:0}
.cookie-bubble .cb-wrapper .cb-row .cb-row-content .cb-controls{position:relative;width:100%;float:left;margin-top:15px}
.cookie-bubble .cb-wrapper .cb-row .cb-image{padding-right:23px}
.cookie-bubble .cb-wrapper .cb-row .cb-image .cookie-inner-color{fill:#f39c12}
.cookie-bubble .cb-wrapper .cb-row .cb-image svg{width:60px}
.cookie-bubble .cb-wrapper .cb-row .agreement-btn{float:left;background-color:#f39c12;font-family:inherit;font-size:14px;color:#fff;text-decoration:none;opacity:1;border:none;cursor:pointer;font-weight:500;padding:10px 20px;margin:0 10px 0 0;border-bottom:2px solid rgba(0,0,0,0.1);border-radius:6px}
.cookie-bubble .cb-wrapper .cb-row .agreement-btn:hover{background-color:#d78a11}
.cookie-bubble .cb-wrapper .cb-row .cookie-policy-btn{float:left;color:#5C5C5C;padding:10px 0;font-size:14px;opacity:.95;border:none;cursor:pointer;font-weight:400;margin:0}
.cookie-bubble .cb-wrapper .cb-row .cookie-policy-btn:hover{opacity:1;color:#000;text-decoration:underline}
@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}}
</style>


The next step is to add the following JavaScript code before the </body>.


<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js'></script>
<script type='text/javascript'> 
//<![CDATA[
!function(r){r.cookieBubble=function(o){var e="cookieBubble",t=!1,i=!0,n=r.extend({boxPosition:"bottom-left",cookieMaxAge:30,messageText:"We use cookies to personalize your experience. By continuing to visit this website you agree to our use of cookies.",messageTextColor:void 0,messageFontSize:void 0,buttonText:"Got it",buttonColor:void 0,buttonFontSize:void 0,iconColor:void 0,iconVisibility:!0,cookiePolicyButtonText:"Read Our Cookie Policy",cookiePolicyButtonTextColor:void 0,cookiePolicyButtonUrl:"http://allaboutcookies.org/",cookiePolicyButtonTarget:"_blank",boxAppearDelay:1e3},o),a=t?"show":"hide",c=n.iconVisibility?'<div class="cb-image"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 97.93 97.93"><defs><style>.cookie-inner-color{fill:'+n.iconColor+'!important}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path d="M44,23.76a2.47,2.47,0,1,0,.91,3.37A2.47,2.47,0,0,0,44,23.76Z"/><path d="M25.9,40.32a2.47,2.47,0,0,0,0,4.93h0a2.47,2.47,0,1,0,0-4.93Z"/><circle cx="32.08" cy="65.86" r="2.47"/><path d="M56.38,69.91a2.47,2.47,0,1,0,1.14,1.49A2.47,2.47,0,0,0,56.38,69.91Z"/><path d="M72,52.68a2.47,2.47,0,0,0-2.38,1.83,2.44,2.44,0,0,0,.25,1.87,2.47,2.47,0,0,0,4.52-.59,2.44,2.44,0,0,0-.25-1.87A2.47,2.47,0,0,0,72,52.68Z"/><path class="cookie-inner-color" d="M89.51,52.86A14,14,0,0,1,81,47.2,14.09,14.09,0,0,1,61,35.68,14.09,14.09,0,0,1,49.49,15.73a14,14,0,0,1-5.66-8.55,44,44,0,0,0-21.09,6.15A44.26,44.26,0,0,0,71.46,87.08,44.24,44.24,0,0,0,89.51,52.86ZM28.28,43.42a2.47,2.47,0,0,1-2.38,1.83h0a2.47,2.47,0,1,1,2.38-1.83Zm3.8,24.9a2.47,2.47,0,1,1,2.47-2.47A2.47,2.47,0,0,1,32.08,68.32ZM44.92,27.13A2.47,2.47,0,1,1,44,23.76,2.47,2.47,0,0,1,44.92,27.13ZM57.28,73.27a2.47,2.47,0,1,1-.9-3.36,2.47,2.47,0,0,1,.9,3.36ZM74.42,55.79a2.47,2.47,0,1,1-.25-1.87A2.45,2.45,0,0,1,74.42,55.79Z"/><path d="M97.93,48.52v-.2A2.35,2.35,0,0,0,95.7,46a9.37,9.37,0,0,1-8-5.45,2.35,2.35,0,0,0-3.49-.93,9.51,9.51,0,0,1-5.44,1.72A9.4,9.4,0,0,1,69.39,31.1a2.35,2.35,0,0,0-2.55-2.55c-.28,0-.57,0-.85,0a9.39,9.39,0,0,1-7.68-14.81,2.35,2.35,0,0,0-.93-3.49,9.37,9.37,0,0,1-5.45-8A2.35,2.35,0,0,0,49.61,0H49a49,49,0,1,0,49,49C97.93,48.82,97.93,48.67,97.93,48.52ZM71.46,87.08A44.26,44.26,0,0,1,22.74,13.33,44,44,0,0,1,47.53,4.72a14,14,0,0,0,5.66,8.55A14.09,14.09,0,0,0,64.71,33.22,14.09,14.09,0,0,0,84.66,44.75a14,14,0,0,0,8.56,5.66A44.3,44.3,0,0,1,71.46,87.08Z"/></g></g></svg></div>':"",s=("_blank"===n.cookiePolicyButtonTarget||n.cookiePolicyButtonTarget,n.cookiePolicyButtonTarget),l={init:function(){l.body(),l.painter(),l.checkCookie()},body:function(){r("body").append('<div class="cookie-bubble '+n.boxPosition+' hide"><div class= "cb-wrapper"><div class="cb-row">'+c+'<div class="cb-row-content"><span class="message">'+n.messageText+'</span><div class="cb-controls"><button class="agreement-btn">'+n.buttonText+'</button><a class="cookie-policy-btn" href='+n.cookiePolicyButtonUrl+" target="+s+">"+n.cookiePolicyButtonText+"</a></div></div></div ></div >")},painter:function(){var o=r(".cookie-bubble .cb-message span"),e=r(".cookie-bubble .agreement-btn"),t=r(".cookie-bubble .cookie-policy-btn"),i={color:n.messageTextColor,"font-size":n.messageFontSize},a={"background-color":n.buttonColor,"font-size":n.buttonFontSize},c={color:n.cookiePolicyButtonTextColor};o.css(i),e.css(a),t.css(c)},setCookie:function(o,e,t){var i=new Date;i.setTime(i.getTime()+24*t*60*60*1e3);var a="expires="+i.toGMTString();document.cookie=o+"="+e+";"+a+";path=/"},getCookie:function(o){for(var e=o+"=",t=decodeURIComponent(document.cookie).split(";"),i=0;i<t.length;i++){for(var a=t[i];" "==a.charAt(0);)a=a.substring(1);if(0==a.indexOf(e))return a.substring(e.length,a.length)}return""},checkCookie:function(){var o=l.getCookie(e);""!=o&&null!=o?r(".cookie-bubble").removeClass("show").addClass("hide"):(setTimeout(function(){r(".cookie-bubble").removeClass("hide").addClass("show")},n.boxAppearDelay),r(".cookie-bubble .agreement-btn").click(function(o){l.setCookie(e,i,n.cookieMaxAge),r(".cookie-bubble").removeClass("show").addClass("hide")}))}};l.init()}}(jQuery);
eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('B a$f=["\\p\\h\\g\\m\\c","\\o\\s\\c\\m\\x\\l\\d\\g\\u","\\u\\n\\c\\u\\c\\m\\q","\\o\\s\\g\\r\\k\\h\\c\\l\\s\\c\\m\\x","\\p\\h\\k\\p\\P","\\j\\z\\g\\M\\l\\s\\c\\m\\x","\\d\\g\\v\\v\\h\\c\\1u\\h\\i\\j\\j","\\r\\g\\q\\D","\\A\\i\\q\\c\\1z\\g\\v\\v\\h\\c","\\o\\g\\J\\c\\n\\h\\i\\D","\\g\\m","\\o\\s\\c\\m\\x\\l\\d\\g\\v\\v\\h\\c\\E\\o\\s\\g\\r\\k\\h\\c\\l\\s\\c\\m\\x\\l\\d\\g\\v\\v\\h\\c\\E\\o\\s\\g\\r\\k\\h\\c\\l\\s\\c\\m\\x\\l\\g\\J\\c\\n\\h\\i\\D","\\1j\\m\\i\\J\\l\\s\\c\\m\\x\\t\\x\\h\\o\\s\\c\\m\\x","\\i\\u\\u\\c\\m\\q\\1z\\g","\\c\\i\\p\\z","\\o\\m\\i\\J\\l\\s\\c\\m\\x\\l\\s\\g\\r\\k\\h\\c","\\p\\h\\i\\j\\j","\\d\\g\\u\\l\\s\\c\\m\\x\\l\\x\\h","\\i\\d\\d\\n","\\o\\d\\g\\u\\l\\s\\c\\m\\x\\l\\s\\g\\r\\k\\h\\c","\\x\\n\\h","\\q\\i\\d\\i","\\M\\k\\q\\d\\z","\\z\\c\\k\\v\\z\\d","\\j\\p\\n\\c\\c\\m","\\n\\g\\x\\m\\q","\\2U\\r\\h\\i\\m\\P","\\j\\p\\n\\g\\h\\h\\r\\i\\n\\j\\F\\D\\c\\j\\E\\n\\c\\j\\k\\2m\\i\\r\\h\\c\\F\\D\\c\\j\\E\\d\\g\\g\\h\\r\\i\\n\\F\\m\\g\\E\\h\\g\\p\\i\\d\\k\\g\\m\\F\\D\\c\\j\\E\\M\\k\\q\\d\\z\\F","\\E\\z\\c\\k\\v\\z\\d\\F","\\E\\h\\c\\A\\d\\F","\\E\\d\\g\\u\\F","\\g\\u\\c\\m","\\A\\g\\p\\x\\j","\\o\\M\\k\\m\\q\\g\\M\\l\\k\\A\\D","\\p\\g\\m\\d\\c\\m\\d\\l\\c\\H\\u\\i\\m\\q\\c\\q","\\o\\c\\m\\d\\n\\D\\l\\p\\g\\m\\d\\c\\m\\d","\\o\\c\\H\\u\\i\\m\\q\\l\\p\\g\\m\\d\\c\\m\\d\\l\\d\\g\\v\\v\\h\\c","\\j\\i\\h\\c\\j","\\j\\g\\n\\d","\\i\\n\\d\\k\\p\\h\\c\\o\\k\\m\\q\\c\\H\\l\\p\\i\\n\\q","\\A\\k\\m\\q","\\j\\g\\n\\d\\l\\r\\D\\l\\j\\i\\h\\c\\j","\\i\\q\\q\\1u\\h\\i\\j\\j","\\o\\r\\d\\l\\r\\c\\j\\d\\j\\c\\h\\h\\c\\n\\j\\o\\r\\d\\l\\h\\i\\r\\c\\h\\l\\u\\i\\v\\c\\t\\o\\r\\d\\l\\k\\d\\c\\s\\j","\\L\\j\\c\\i\\n\\p\\z\\L\\h\\i\\r\\c\\h\\L\\1g\\c\\j\\d\\j\\c\\h\\h\\c\\n\\j\\2T\\s\\i\\H\\l\\n\\c\\j\\x\\h\\d\\j\\F\\2C\\2u","","\\o\\r\\d\\l\\k\\d\\c\\s\\j","\\z\\d\\s\\h","\\i\\2W\\i\\H","\\o\\r\\d\\l\\r\\c\\j\\d\\j\\c\\h\\h\\c\\n\\j\\o\\r\\d\\l\\c\\n\\n\\g\\n\\l\\u\\i\\v\\c\\t\\o\\r\\d\\l\\k\\d\\c\\s\\j","\\i\\n\\d\\k\\p\\h\\c\\o\\k\\m\\q\\c\\H\\l\\p\\i\\n\\q\\T\\c\\2i\\Y\\2Y\\X\\E\\i\\n\\d\\k\\p\\h\\c\\o\\k\\m\\q\\c\\H\\l\\p\\i\\n\\q\\T\\c\\2i\\Y\\2C\\X\\E\\i\\n\\d\\k\\p\\h\\c\\o\\k\\m\\q\\c\\H\\l\\p\\i\\n\\q\\T\\c\\2i\\Y\\2u\\X","\\d\\c\\s\\u\\h\\i\\d\\c\\l\\k\\q","\\o\\1g\\h\\g\\v\\t\\o\\r\\d\\l\\k\\d\\c\\s\\t\\i\\n\\d\\k\\p\\h\\c\\o\\c\\m\\d\\n\\D","\\h\\c\\m\\v\\d\\z","\\o\\A\\c\\i\\d","\\2P\\q\\k\\J\\t\\p\\h\\i\\j\\j\\F\\2x\\A\\c\\i\\d\\2x\\L\\2O","\\o\\p\\i\\n\\q\\l\\p\\g\\m\\d\\c\\m\\d","\\k\\j\\l\\p\\x\\n\\n\\c\\m\\d","\\o\\r\\d\\l\\r\\c\\j\\d\\j\\c\\h\\h\\c\\n\\j\\o\\r\\d\\l\\A\\g\\g\\d\\c\\n\\t\\o\\r\\d\\l\\k\\d\\c\\s\\j","\\z\\n\\c\\A","\\d\\g\\u","\\g\\A\\A\\j\\c\\d","\\i\\m\\k\\s\\i\\d\\c","\\z\\d\\s\\h\\E\\r\\g\\q\\D","\\o\\s\\i\\u\\l\\h\\k\\j\\d\\T\\m\\g\\d\\Y\\o\\k\\j\\l\\h\\k\\p\\c\\m\\p\\c\\j\\X\\t\\h\\k\\t\\i","\\o\\s\\i\\u\\l\\h\\k\\j\\d\\o\\k\\j\\l\\h\\k\\p\\c\\m\\p\\c\\j\\t\\h\\k\\t\\i","\\h\\g\\i\\q","\\j\\z\\g\\M","\\1j\\h\\g\\i\\q\\l\\s\\g\\n\\c\\l\\h\\k\\m\\P","\\z\\k\\q\\c","\\o\\1g\\h\\g\\v\\t\\o\\r\\d\\l\\M\\n\\i\\u\\u\\c\\n\\T\\m\\g\\d\\Y\\o\\r\\d\\l\\c\\n\\n\\g\\n\\l\\u\\i\\v\\c\\X\\t\\o\\r\\d\\l\\k\\d\\c\\s\\j","\\u\\g\\j\\d\\l\\i\\m\\k\\s\\i\\d\\c\\q\\t\\u\\g\\j\\d\\l\\A\\i\\q\\c\\2N\\m\\2L\\u","\\o\\k\\m\\q\\c\\H\\l\\p\\i\\n\\q","\\i\\u\\u\\c\\m\\q","\\o\\1g\\h\\g\\v\\t\\o\\r\\d\\l\\M\\n\\i\\u\\u\\c\\n\\t\\o\\r\\d\\l\\k\\d\\c\\s\\j","\\1j\\r\\h\\g\\v\\l\\u\\i\\v\\c\\n\\t\\o\\m\\g\\l\\s\\g\\n\\c","\\1j\\r\\h\\g\\v\\l\\u\\i\\v\\c\\n\\t\\o\\h\\g\\i\\q\\k\\m\\v","\\u\\n\\c\\J\\c\\m\\d\\2K\\c\\A\\i\\x\\h\\d","\\1z\\z\\k\\j\\t\\j\\k\\d\\c\\t\\x\\j\\c\\j\\t\\p\\g\\g\\P\\k\\c\\j\\t\\A\\n\\g\\s\\t\\2n\\g\\g\\v\\h\\c\\t\\d\\g\\t\\q\\c\\h\\k\\J\\c\\n\\t\\k\\d\\j\\t\\j\\c\\n\\J\\k\\p\\c\\j\\t\\i\\m\\q\\t\\d\\g\\t\\i\\m\\i\\h\\D\\2m\\c\\t\\d\\n\\i\\A\\A\\k\\p\\o","\\2V\\p\\p\\c\\u\\d\\t\\2Q","\\z\\d\\d\\u\\j\\T\\L\\L\\u\\g\\h\\k\\p\\k\\c\\j\\o\\v\\g\\g\\v\\h\\c\\o\\p\\g\\s\\L\\d\\c\\p\\z\\m\\g\\h\\g\\v\\k\\c\\j\\L\\p\\g\\g\\P\\k\\c\\j","\\2n\\g\\g\\v\\h\\c\\t\\1u\\g\\g\\P\\k\\c\\t\\2D\\g\\h\\k\\p\\D","\\p\\g\\g\\P\\k\\c\\1g\\x\\r\\r\\h\\c"];B a$e=[a$f[0],a$f[1],a$f[2],a$f[3],a$f[4],a$f[5],a$f[6],a$f[7],a$f[8],a$f[9],a$f[10],a$f[11],a$f[12],a$f[13],a$f[14],a$f[15],a$f[16],a$f[17],a$f[18],a$f[19],a$f[20],a$f[21],a$f[22],a$f[23],a$f[24],a$f[25],a$f[26],a$f[27],a$f[28],a$f[29],a$f[1p],a$f[1A],a$f[1E],a$f[1y],a$f[1F],a$f[1C],a$f[1D],a$f[1k],a$f[1t],a$f[1a],a$f[C],a$f[Z],a$f[K],a$f[1s],a$f[1q],a$f[1o],a$f[1n],a$f[1d],a$f[1b],a$f[1x],a$f[1G],a$f[1f],a$f[1Y],a$f[2g],a$f[2f],a$f[1X],a$f[2k],a$f[1W],a$f[1Q],a$f[1N],a$f[1S],a$f[1T],a$f[1J],a$f[1K],a$f[1H],a$f[1M],a$f[1l],a$f[S],a$f[I],a$f[1c],a$f[2e],a$f[1I],a$f[2d],a$f[1R],a$f[1L],a$f[1P],a$f[1i],a$f[2l],a$f[1V],a$f[1U],a$f[1O],a$f[2c],a$f[2j]];B a$b=[a$e[0],a$e[1],a$e[2],a$e[3],a$e[4],a$e[5],a$e[6],a$e[7],a$e[8],a$e[9],a$e[10],a$e[11],a$e[12],a$e[13],a$e[14],a$e[15],a$e[16],a$e[17],a$e[18],a$e[19],a$e[20],a$e[21],a$e[22],a$e[23],a$e[24],a$e[25],a$e[26],a$e[27],a$e[28],a$e[29],a$e[1p],a$e[1A],a$e[1E],a$e[1y],a$e[1F],a$e[1C],a$e[1D],a$e[1k],a$e[1t],a$e[1a],a$e[C],a$e[Z],a$e[K],a$e[1s],a$e[1q],a$e[1o],a$e[1n],a$e[1d],a$e[1b],a$e[1x],a$e[1G],a$e[1f],a$e[1Y],a$e[2g],a$e[2f],a$e[1X],a$e[2k],a$e[1W],a$e[1Q],a$e[1N],a$e[1S],a$e[1T],a$e[1J],a$e[1K],a$e[1H],a$e[1M],a$e[1l],a$e[S],a$e[I],a$e[1c],a$e[2e],a$e[1I],a$e[2d],a$e[1R],a$e[1L],a$e[1P],a$e[1i],a$e[2l],a$e[1V],a$e[1U],a$e[1O],a$e[2c],a$e[2j]];$(w(){$(a$b[3])[a$b[2]]($(a$b[1])[a$b[0]]());$(a$b[11])[a$b[10]](a$b[4],w(){$(a$b[7])[a$b[6]](a$b[5]);$(a$b[9])[a$b[8]](2X)});$(a$b[15])[a$b[14]](w(){B y=$(G),W=$(a$b[12])[a$b[0]]();W[a$b[13]](y)});$(a$b[19])[a$b[14]](w(){B y=$(G),W=$(a$b[1])[a$b[0]]();W[a$b[18]](a$b[16],a$b[17]);W[a$b[13]](y)});$(a$b[1y])[a$b[10]](a$b[4],w(){B 1r=$(G),2B=1r[a$b[21]](a$b[20]),1B=1r[a$b[21]](a$b[22]),1v=1r[a$b[21]](a$b[23]),2p=1w[a$b[24]][a$b[22]],2A=1w[a$b[24]][a$b[23]],2r=2z[a$b[25]](2p/2-1B/2),V=2z[a$b[25]](2A/2-1v/2);B 2q=1w[a$b[1A]](2B,a$b[26],a$b[27]+1B+a$b[28]+1v+a$b[29]+2r+a$b[1p]+V);2q[a$b[1E]]()});$(a$b[1D])[a$b[10]](a$b[4],w(){$(a$b[1C])[a$b[6]](a$b[1F])});w 1m(y){y[a$b[C]](a$b[1a])[a$b[1t]](w(V,2v){2o-$(V)[a$b[21]](a$b[1k])- -$(2v)[a$b[21]](a$b[1k])})[a$b[13]](y);y[a$b[K]](a$b[Z])}$(a$b[1s])[a$b[14]](w(){B y=$(G);1m(y)});$(a$b[1x])[a$b[14]](w(){B y=$(G);$[a$b[1b]]({1Z:a$b[1q],2b:w(O){B U=a$b[1o],N=$(O)[a$b[C]](a$b[1n]),R=N[a$b[0]]();1m(R);U=R[a$b[C]](a$b[1a]);y[a$b[1d]](U)},2a:w(){$(y)[a$b[K]](a$b[Z])}})});$(a$b[1Q])[a$b[14]](w(){B y=$(G);$[a$b[1b]]({1Z:a$b[1q],2b:w(O){B U=a$b[1o],N=$(O)[a$b[C]](a$b[1n]),R=N[a$b[0]]();1m(R);U=R[a$b[C]](a$b[1G]);y[a$b[1d]](U)},2a:w(){y[a$b[C]](a$b[1a])[a$b[14]](w(){B Q=$(G),2t=Q[a$b[21]](a$b[1f]),2s=$(a$b[1Y])[a$b[21]](a$b[1f]);1h(2t==2s){1h(!Q[a$b[C]](a$b[2f])[a$b[2g]]){Q[a$b[C]](a$b[2k])[a$b[2]](a$b[1X])};Q[a$b[K]](a$b[1W])}});y[a$b[K]](a$b[Z])}})});w 2h(y,2w){B 2y=y[a$b[18]](a$b[1N]);y[a$b[4]](w(){$(a$b[1K])[a$b[1J]]({2M:$(2y)[a$b[1T]]()[a$b[1S]]-2w},2R);2o 2S})}$(a$b[1H])[a$b[14]](w(){2h($(G),1p)});$(a$b[1M])[a$b[14]](w(){2h($(G),1f)});$(a$b[I])[a$b[14]](w(){B Q=$(G),1e=Q[a$b[21]](a$b[1l]);1h(1e){$(a$b[I])[a$b[S]]()};$(a$b[I])[a$b[10]](a$b[4],w(V){$(a$b[I])[a$b[1c]]();$[a$b[1b]]({1Z:1e,2b:w(O){B N=$(O)[a$b[C]](a$b[2e]);N[a$b[C]](a$b[2d])[a$b[K]](a$b[1I]);$(a$b[1L])[a$b[1R]](N[a$b[1d]]());1e=$(O)[a$b[C]](a$b[I])[a$b[21]](a$b[1l]);1h(1e){$(a$b[I])[a$b[S]]()}2Z{$(a$b[I])[a$b[1c]]();$(a$b[1P])[a$b[K]](a$b[S])}},2E:w(){$(a$b[1i])[a$b[S]]()},2a:w(){$(a$b[1i])[a$b[1c]]()}});V[a$b[2l]]()})});$[a$b[2j]]({2J:a$b[1V],2I:a$b[1U],2F:a$b[1O],2H:a$b[2c],2G:a$b[26]})})',62,186,'||||||||||_|_obify1|x65|x74|_obify2|_obify3|x6F|x6C|x61|x73|x69|x2D|x6E|x72|x2E|x63|x64|x62|x6D|x20|x70|x67|function|x75|_0x39edx3|x68|x66|var|40|x79|x2C|x3D|this|x78|68|x76|42|x2F|x77|_0x39edx12|_0x39edx10|x6B|_0x39edx14|_0x39edx13|67|x3A|_0x39edx11|_0x39edxc|_0x39edx4|x29|x28|41|||||||||||39|48|69|47|_0x39edx1a|51|x42|if|76|x23|37|66|_0x39edxe|46|45|30|44|_0x39edx5|43|38|x43|_0x39edx8|window|49|33|x54|31|_0x39edx7|35|36|32|34|50|64|71|62|63|74|65|59|80|75|58|73|60|61|79|78|57|55|52|url|||||||||||complete|success|81|72|70|54|53|_0x39edx17|x71|82|56|77|x7A|x47|return|_0x39edx9|_0x39edxd|_0x39edxb|_0x39edx16|_0x39edx15|x32|_0x39edxf|_0x39edx18|x22|_0x39edx19|Math|_0x39edxa|_0x39edx6|x31|x50|beforeSend|cookiePolicyButtonUrl|cookiePolicyButtonTarget|cookiePolicyButtonText|buttonText|messageText|x44|x55|scrollTop|x49|x3E|x3C|x21|500|false|x3F|x5F|x41|x6A|170|x30|else'.split('|'),0,{}));
//]]>
</script>

When you have successfully added both JavaScript and CSS code to your Blogger theme, then click the Save Theme button and see the result on your blog.

What Is the Result of the Cookies Notification Bar?

Here's the result of the cookie notification bar. The notification bar will look like this when you add this cookie's JavaScript and CSS code to your blog.

What Does a Cookie Notification Look Like as a Result of a Cookie Notification?


Download & Demo Link of the Cookie Notification Bar.

If you would like to download this JavaScript and CSS code from the cookies notification bar, here is the download link of the file. When you download this file, there will be a compressed file inside and a "Premium Cookie Notification (Blogger) - Asif Kamboh.xml" file inside the compressed RAR file containing the cookie notification bar code.


I hope you find this post "Cookie Notification Bar for Blogger Blogspot!" very useful and respectful.