Powiadomienia cookies wcale nie muszą być nudne ani szare. To prawda, że ten komunikat wyświetla się na blogu tylko raz, ale za to w jak ważnym momencie – kiedy czytelnik po raz pierwszy go odwiedza. Tym bardziej warto się postarać, aby ta wymagana przez prawo informacja wyglądała atrakcyjnie lub (jeżeli nie lubicie ciasteczek) minimalistycznie i czytelnie.
Dlatego w tym poście chciałabym przedstawić kilka gotowych designów powiadomień cookies, które można bezpośrednio skopiować na swojego bloga i, jeżeli zajdzie taka potrzeba, uprzednio dopasować do wyglądu strony. Fragmenty odpowiedzialne za edycję kolorów zostały umieszczone na początku kodu i opatrzone dodatkowym komentarzem. Wyjątkiem jest ostatni projekt, w którym ze względu na ikonkę, kolorystyka powinna zostać niezmieniona.
W komentarzu podałam również informację o źródłach, ale będzie mi bardzo miło, jeżeli decydując się skorzystać z jednego z projektów na własny użytek, umieścisz dodatkowo link lub informację o pochodzeniu wyglądu komunikatu ciasteczek.
Jak dodać CSS do swojego bloga?
Jeżeli jeszcze nigdy nie dodawałeś/aś kodu CSS do swojego szablonu, polecam przeczytać krótki poradnik od supportu Google w sekcji Zmiana projektu bloga za pomocą kodu CSS. Wskazuje on, gdzie należy wkleić podany przeze mnie poniżej CSS.
Gotowy design powiadomień cookies
Minimal
Pierwszy ciemny projekt powiadomienia o ciasteczkach cookies na Bloggerze |
/*
Cookies pop-up design: Agata / <https://krol-trefl.blogspot.com>
KOLORY
-------------- */
.cookie-choices-info {
--przycisk: #0a7864;
--podswietlony-przycisk: #0cc3a2;
}
/* -------------- */
.cookie-choices-info {
background-color: #111 !important;
font: normal normal 12px/1.3 Arial, sans-serif !important;
}
.cookie-choices-info .cookie-choices-text {
color: #fff !important;
font-size: 12px !important;
}
.cookie-choices-info .cookie-choices-button {
background-color: #000 !important;
font-size: 12px !important;
padding: 12px 15px 10px !important;
display: inline-block;
transition: 0.3s ease;
}
.cookie-choices-info .cookie-choices-button:last-child {
background-color: var(--przycisk) !important;
}
.cookie-choices-info .cookie-choices-button:hover {
background-color: var(--podswietlony-przycisk) !important;
}
Fresh
Drugi jasny projekt powiadomienia o ciasteczkach cookies na Bloggerze |
/*
Cookies pop-up design: Agata / <https://krol-trefl.blogspot.com>
KOLORY
-------------- */
.cookie-choices-info {
--przycisk: #f4ce46;
--podswietlony-przycisk: #000;
}
/* -------------- */
.cookie-choices-info {
border-bottom: 5px solid var(--przycisk);
background-color: #f5f5f5 !important;
font: normal normal 12px/1.5 Trebuchet MS, sans-serif !important;
padding: 0 !important;
}
.cookie-choices-info .cookie-choices-inner {
display: flex;
justify-content: center;
flex-direction: column;
}
@media (min-width: 1080px) {
.cookie-choices-info .cookie-choices-inner {
flex-direction: row;
align-items: flex-end;
}
}
.cookie-choices-info .cookie-choices-text {
font-size: 13px !important;
color: #000 !important;
padding: 10px 0;
}
.cookie-choices-info .cookie-choices-button {
font-size: 13px !important;
background-color: var(--przycisk) !important;
color: #000 !important;
padding: 20px 25px !important;
display: inline-block;
position: relative;
transition: 0.3s ease;
margin-left: 0px !important;
position: relative;
bottom: -5px;
}
.cookie-choices-info .cookie-choices-button:hover {
background-color: var(--podswietlony-przycisk) !important;
color: var(--przycisk) !important;
}
Black cookie
Trzeci szary z czarną ikonką projekt powiadomienia o ciasteczkach cookies na Bloggerze |
/*
Cookies pop-up design: Agata / <https://krol-trefl.blogspot.com>
Icon: <https://github.com/atisawd/boxicons>
KOLORY
-------------- */
.cookie-choices-info {
--przycisk: #111;
--podswietlony-przycisk: #333;
}
/* -------------- */
.cookie-choices-info {
font: normal normal 12px/1.5 Verdana, sans-serif !important;
background-color: #ddd !important;
}
.cookie-choices-info .cookie-choices-text {
font-size: 12px !important;
color: #111 !important;
}
.cookie-choices-info .cookie-choices-text::before {
content: "";
width: 70px;
height: 70px;
display: block;
float: left;
margin-right: 15px;
background: url("<https://api.iconify.design/bx:bxs-cookie.svg>") no-repeat
left center / contain;
}
.cookie-choices-info .cookie-choices-button {
font-size: 12px !important;
color: #fff !important;
padding: 18px 20px 15px !important;
margin-left: 1px !important;
transition: 0.3s ease;
background-color: var(--przycisk) !important;
display: inline-block;
}
.cookie-choices-info .cookie-choices-button:first-child {
padding-left: 30px;
border-radius: 25px 0 0 25px;
}
.cookie-choices-info .cookie-choices-button:last-child {
border-radius: 0 25px 25px 0;
padding-right: 30px;
}
.cookie-choices-info .cookie-choices-button:hover {
background-color: var(--podswietlony-przycisk) !important;
}
Gentle
Czwarty gradientowy projekt powiadomienia o ciasteczkach cookies na Bloggerze |
/*
Cookies pop-up design: Agata / <https://krol-trefl.blogspot.com>
KOLORY
-------------- */
.cookie-choices-info {
--gradient1: #fbc2eb;
--gradient2: #a6c1ee;
}
/* -------------- */
.cookie-choices-info {
background: linear-gradient(
10deg,
var(--gradient1) 0%,
var(--gradient2) 100%
) !important;
font: normal normal 12px/1.5 Arial, sans-serif !important;
}
.cookie-choices-info .cookie-choices-text {
font-size: 13px !important;
color: #666 !important;
background-color: #fff;
padding: 15px 20px;
}
.cookie-choices-info .cookie-choices-button {
font-size: 13px !important;
background-color: #fff;
padding: 12px 15px 10px !important;
margin-left: 0;
transition: 0.3s ease;
color: var(--gradient1) !important;
display: block;
font-family: Arial Black;
font-weight: 400 !important;
}
.cookie-choices-info .cookie-choices-button:first-child {
color: var(--gradient2) !important;
margin-bottom: 1px;
}
.cookie-choices-info .cookie-choices-button:hover {
color: #fff !important;
background-color: transparent !important;
}
Delicious
Piąty beżowy z ikonką projekt powiadomienia o ciasteczkach cookies na Bloggerze |
/*
Cookies pop-up design: Agata / <https://krol-trefl.blogspot.com>
Icon: <https://github.com/joypixels/emojione-legacy>
-------------- */
.cookie-choices-info {
font: normal normal 12px/1.5 Trebuchet MS, sans-serif !important;
background-color: #e2ab78 !important;
}
.cookie-choices-info .cookie-choices-text {
font-size: 14px !important;
color: #222 !important;
}
.cookie-choices-info .cookie-choices-text::before {
content: "";
width: 90px;
height: 90px;
display: block;
float: left;
margin-right: 15px;
background: url("<https://api.iconify.design/emojione-v1:cookie.svg>")
no-repeat center center / contain;
}
.cookie-choices-info .cookie-choices-button {
font-size: 13px;
color: #fff;
padding: 12px 15px 10px !important;
display: block;
margin-top: 5px !important;
transition: 0.3s ease;
background-color: #b57c4d;
border-radius: 25px;
}
.cookie-choices-info .cookie-choices-button:hover {
background-color: #724424;
}
Classic
Szósty biało-czarny projekt powiadomienia o ciasteczkach cookies na Bloggerze |
/*
Cookies pop-up design: Agata / <https://krol-trefl.blogspot.com>
KOLORY
-------------- */
.cookie-choices-info{
--color: #000;
}
/* -------------- */
.cookie-choices-info {
background-color: #fff!important;
border: 1px solid var(--color);
font: normal normal 12px/1.3 Arial, sans-serif !important;
}
.cookie-choices-info .cookie-choices-text {
font-size: 12px !important;
color:#000!important;
}
.cookie-choices-info .cookie-choices-button {
color:var(--color)!important;
border: 1px solid;
padding: 15px!important;
display: inline-block;
transition: 0.3s ease;
letter-spacing: 2px;
font-size: 10px;
}
.cookie-choices-info .cookie-choices-button:hover {
background-color: var(--color);
color: #fff!important;
}
Transparent
Siódmy z półprzeźroczystym tłem projekt powiadomienia o ciasteczkach cookies na Bloggerze |
Mała ciekawostka. Obecnie właśnie ten wygląd wykorzystuję na tym blogu.
/*
Cookies pop-up design: Agata / <https://krol-trefl.blogspot.com>
KOLORY
-------------- */
.cookie-choices-info{
--color: #840255;
--bg-color: rgba(0,0,0,.7);
}
/* -------------- */
.cookie-choices-info {
background-color: var(--bg-color)!important;
font: normal normal 12px/1.4 Verdana, sans-serif !important;
}
.cookie-choices-info .cookie-choices-text {
font-size: 12px !important;
color:#eee!important;
}
.cookie-choices-info .cookie-choices-button {
color:#fff!important;
background-color: var(--color);
border-radius: 30px;
padding: 15px 30px!important;
display: inline-block;
transition: 0.3s ease;
letter-spacing: 2px;
font-size: 10px;
}
.cookie-choices-info .cookie-choices-button:last-child {
padding: 15px 13px!important;
}
.cookie-choices-info .cookie-choices-button:hover {
background-color: #fff;
color: var(--color)!important;
}
Jak przetestować efekt?
Żeby sprawdzić, czy wszystko działa poprawnie i nowy styl komunikatu cookies jest widoczny, należy odwiedzić bloga w trybie incognito. W zależności od przeglądarki, z której korzystasz, kroki do otworzenia karty incognito mogą być różne. Poniżej zamieszczam najszybszy sposób (skrót klawiaturowy) dla dwóch najpopularniejszych przeglądarek:
- Google Chrome: Ctrl + Shift + N,
- Mozilla FIrefox: Ctrl + Shift+ P.
Uwaga: Jeżeli widzisz stary wygląd komunikatu, upewnij się, że zmiany zostały zapisane.
W przypadku, gdyby wygląd powiadomienia odbiegał od przestawionego wyżej podglądu, skontaktuj się ze mną, najlepiej poprzez komentarz pod tym postem.
Podsumowanie
Jestem niezmiernie ciekawa, który z powyższych projektów jest Twoim faworytem. Podzielcie się o tym ze mną w komentarzu. A może sami macie jakieś ulubione rozwiązanie, jeżeli chodzi o domyślny komunikat o ciasteczkach?
Dziękuję Ci za gotowe style, wszystkie są super! Wykorzystałam jeden z nich na blogu: https://gwiezdnadziewczyna.blogspot.com/, jedynie pozwoliłam sobie na podmianę kolorków :)
OdpowiedzUsuń