How to add a stylish cookie notification bar into blogger - Few days ago every blogger has been seen a cookie information on his dashboard. It happened, because the European Union (EU) laws require all publishers to give EU visitors information about the cookies used on their blogs. After reading the information every blogger wants to add a notification bar on his blog to show the cookie information. So I have a fully customize notification bar for your blog and today I'm going to show you how you can easily set up a cookie notification bar to your blog. Now if you want to add this cookie notification bar into your blog, then follow the below steps very carefully.
How To Setup EU Cookie Notification Bar?
First go to your blogger dashboard - Login
Now go to the "Template" section and then click on the"EDIT HTML" button.
Now find the below text by pressing "Ctrl + F" key together from your keyboard.
</body>
After that, copy the below JavaScript code and paste it just before </body>
<script type='text/javascript'>
cookieOptions={msg:"This site uses cookies and third party cookies to help deliver services. By using this site, you agree to the use of cookies.",link:"https://www.blogger.com/go/blogspot-cookies",close:"Got it!",learn:"Learn More"};
//<![CDATA[
// Menu Top
$(document).ready(function(){var str=location.href.toLowerCase();$('.top-menunavi ul li a').each(function(){if(str.indexOf(this.href.toLowerCase())>-1){$("li.highlight").removeClass("highlight");$(this).parent().addClass("highlight")}})})
$(function(){var pull=$('#pull');menu=$('.top-menunavi ul');menuHeight=menu.height();$(pull).on('click',function(e){e.preventDefault();menu.slideToggle()});$(window).resize(function(){var w=$(window).width();if(w>320&&menu.is(':hidden')){menu.removeAttr('style')}})});
// Main Menu
var ww=document.body.clientWidth;$(document).ready(function(){$(".nav li a").each(function(){if($(this).next().length>0){$(this).addClass("parent")}});$(".menu-slide").click(function(e){e.preventDefault();$(this).toggleClass("active");$(".nav").toggle()});adjustMenu()});$(window).bind("resize orientationchange",function(){ww=document.body.clientWidth;adjustMenu()});var adjustMenu=function(){if(ww<768){$(".menu-slide").css("display","inline-block");if(!$(".menu-slide").hasClass("active")){$(".nav").hide()}else{$(".nav").show()}$(".nav li").unbind("mouseenter mouseleave");$(".nav li a.parent").unbind("click").bind("click",function(e){e.preventDefault();$(this).parent("li").toggleClass("hover")})}else if(ww>=768){$(".menu-slide").css("display","none");$(".nav").show();$(".nav li").removeClass("hover");$(".nav li a").unbind("click");$(".nav li").unbind("mouseenter mouseleave").bind("mouseenter mouseleave",function(){$(this).toggleClass("hover")})}}
// Simple Tab
!function(a){"use strict";var b=function(b,c){var d=this;d.element=b,d.$element=a(b),d.artabs=d.$element.children(),d.options=a.extend({},a.fn.martabs.defaults,c),d.current_tab=0,d.init()};b.prototype={init:function(){var a=this;a.artabs.length&&(a.build(),a.buildTabMenu())},build:function(){var b=this,c=b.options,d=c.tab_text_el,e=c.container_class;b.tab_names=[],b.$wrapper=b.$element.wrapInner('<div class="'+e+'" />').find("."+e),b.artabs.wrapAll('<div class="'+c.artabs_container_class+'" />'),b.artabs.each(function(c,e){var f,g=a(e),h=d;f=g.find(h).filter(":first").hide().text(),b.tab_names.push(f)}),a.isFunction(c.onReady)&&c.onReady.call(b.element)},buildTabMenu:function(){for(var b,c=this,d=c.options,e=d.artabsmenu_el,f=c.tab_names,g="<"+e+' class="'+d.artabsmenu_class+'">',h=0,i=f.length,j=function(){var a=arguments;return d.tmpl.artabsmenu_tab.replace(/\{[0-9]\}/g,function(b){var c=Number(b.replace(/\D/g,""));return a[c]||""})};i>h;h++)g+=j(h+1,f[h]);g+="</"+e+">",c.$artabs_menu=a(g).prependTo(c.$wrapper),b=c.$artabs_menu.find(":first")[0].nodeName.toLowerCase(),c.$artabs_menu.on("click",b,function(b){var d=a(this),e=d.index();c.show(e),b.preventDefault()}).find(":first").trigger("click")},show:function(b){var c=this,d=c.options,e=d.active_tab_class;c.artabs.hide().filter(":eq("+b+")").show(),c.$artabs_menu.children().removeClass(e).filter(":eq("+b+")").addClass(e),a.isFunction(d.onartabselect)&&b!==c.current_tab&&d.onartabselect.call(c.element,b),c.current_tab=b},destroy:function(){var a=this,b=a.options.tab_text_el;a.$artabs_menu.remove(),a.artabs.unwrap().unwrap(),a.artabs.removeAttr("style"),a.artabs.children(b+":first").removeAttr("style"),a.$element.removeData("martabs")}},a.fn.martabs=function(c,d){return this.each(function(){var e,f=a(this),g=f.data("martabs");e="object"==typeof c&&c,g||f.data("martabs",g=new b(this,e)),"string"==typeof c&&g[c](d)})},a.fn.martabs.defaults={container_class:"artabs",artabs_container_class:"artabs-content",active_tab_class:"active-tab",tab_text_el:"h1, h2, h3, h4, h5, h6",artabsmenu_class:"artabs-menu",artabsmenu_el:"ul",tmpl:{artabsmenu_tab:'<li class="tab-{0}"><span>{1}</span></li>'},onartabselect:null}}(window.jQuery,window,document);
// Popular Post Snippet
$(".popular-posts ul li .item-snippet").each(function(){var t=$(this).text().substr(0,60),s=t.lastIndexOf(" ");s>42&&$(this).text(t.substr(0,s).replace(/[?,!\.-:;]*$/,"..."))});
// EU Law Cookies
window.cookieconsent_options = {"message":"This website uses cookies to ensure you get the best experience on our website","dismiss":"Got it!","learnMore":"More info","link":"http://www.askwithloud.com/p/privacy-policy.html","theme":"dark-bottom"};
(function(){var e=document.createElement("script");e.async=true;e.type="text/javascript";e.src="https://googledrive.com/host/0BxB51PrIeBaiMXRQNWRGWHhEbVU";(document.getElementsByTagName("HEAD")[0]||document.getElementsByTagName("BODY")[0]).appendChild(e)})();
//]]>
</script>Now click on the orange save template button to make changes.
Change the highlighted text and URL with your own text and URL.
If you're facing any kind of problem, then let me know via comment section.
That's it! I hope you like this notification bar! Stay tuned for more blogger widgets! Thanks for reading @Prince.
0 Comment to "EU Cookie Notification Bar For Blogger"
Post a Comment