Gotowe wyglądy powiadomień o cookies „ciasteczkach" w Bloggerze

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?

Gotowe wyglądy powiadomień o cookies „ciasteczkach" w Bloggerze

Jak dodać CSS do swojego bloga?

Gotowy design powiadomień cookies

Minimal

Fresh

Black cookie

Gentle

Delicious

Classic

Transparent

Jak przetestować efekt?

Podsumowanie

Pozostałe posty z tej serii

Komentarze [1]

Prześlij komentarz

Jak poprawnie podawać źródła?

Jak zmienić kolejność wyróżnionych relacji na swoim profilu na Instagramie?

Początek przygody z digital paintingiem i tabletem graficznym Huion H640P

Edytor kodu bloggera: wstęp dla początkujących

Jak zmienić kolor kursywy, pogrubienia, podkreślenia i przekreślenia w szablonie?

Leaf: darmowy szablon postu karuzeli na Instagram

Wypełnij formularz, aby złożyć zamówienie i otrzymać darmową wycenę

Jak dodać CSS do swojego bloga?

Gotowy design powiadomień cookies

Minimal

Fresh

Black cookie

Gentle

Delicious

Classic

Transparent

Jak przetestować efekt?

Podsumowanie

Pozostałe posty z tej serii

Komentarze [1]

Prześlij komentarz