Univerzální Cookie lišta pro Webnode 1 šablony

04.11.2017

Potřebujete jednoduchou a hlavně funkční Cookie lištu do svých webových stránek na Webnode 1? Tady je jedna univerzální, kterou stačí jen vložit!

Na internetu najdete nejrůznější generátory Cookie lišt pro webové stránky. Bohužel většina z nich je s projekty vytvořenýma na Webnode 1 nepoužitelná. Často způsobí nefunkčnost nějaké části vašeho webu.

Proto jsem připravil univerzální Cookie bar, který se inspiruje vestavěnou Webnode 2 lištou. Lišta se automaticky spáruje s webovou stránkou, zajistí aby se nezobrazovala v CMS Webnode 1 a jako bonus je responzivní!

Funkční ukázka:

See the Pen Universal Webnode 1 Cookie bar by Jakub Belko (@jakubbelko) on CodePen.

Vložení Cookie lišty do projektu Webnode 1


Do stránek lištu vložíte pomocí blocku HTML kód (Embed), který přetáhnete do libovolné editační zóny.

Do zobrazeného okna vložte kód, který si zkopírujte níže na stránce. Pak stačí vše uložit a publikovat. O zbytek se postará cookie lišta sama.

Kód pro vložení do stránky:

<div id="cookie">
<div id="cookie-text">Tyto stránky používají cookies k analýze návštěvnosti a bezpečnému provozování
stránek. Používáním tohoto webu vyjadřujete souhlas. <a id="cookie-link" href="https://www.google.com/intl/cs/policies/technologies/cookies/">Další informace</a></div>
<a href="#" id="cookie-close" title="Souhlasím">Souhlasím</a>
</div>

<style type="text/css">
#RubicusAdmin #cookie{display:none!important;}#cookie{-webkit-transition:all .2s;transition:all .2s;width:100%;background-color:#1e1e1e;color:#828282;font-family:Arial, sans-serif;font-size:14px;line-height:18px;text-align:left;display:none;position:fixed;top:0;left:0;z-index:200;}#cookie-text{padding:15px 46px 15px 20px;}#cookie-link{-webkit-transition:border .3s ease-in-out;transition:border .3s ease-in-out;text-decoration:none!important;display:inline;border-bottom:1px solid #afafaf;color:#afafaf!important;}#cookie-link:hover{border-bottom-color:transparent;}#cookie-close{float:right;width:46px;height:46px;display:inline-block;overflow:hidden;text-indent:-999em;top:0;right:0;position:absolute;}#cookie-close::before,#cookie-close::after{content: '';cursor:pointer;width:14px;height:1px;display:block;background-color:#9E9E9E;position:absolute;top:23px;left:12px;-webkit-transition:background-color .2s;transition:background-color .2s;}#cookie-close::before{-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);}#cookie-close::after{-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg);}#cookie-close:hover::before,#cookie-close:hover::after{background-color:#e4e4e4;}
</style>

<script type="application/javascript">var cms=document.querySelectorAll('#RubicusAdmin');var bar=document.getElementById('cookie');var barClose=document.getElementById('cookie-close');var website=wnd.fe.Location.hostname.split('.');var storageName='';for(var i in website) {storageName+=website[i];}var barView=localStorage.getItem(storageName);if(!cms[0]||barView==null) {bar.style.display="block";}if(barView=="hide"){bar.style.display="none";}barClose.addEventListener("click",function(e){e.preventDefault();localStorage.setItem(storageName,"hide");bar.style.display="none";});</script>