Blogger'da çerez izni banner'ı nasıl eklenir?

Yayınlanan: 2023-04-23

İnternette gezinirken, muhtemelen çerezleri kabul etmenizi veya reddetmenizi isteyen bir çerez izni başlığıyla karşılaşmışsınızdır. Bu afişler, veri gizliliği ve çevrimiçi izleme konusundaki artan endişe nedeniyle web sitelerinde standart bir özellik haline geldi.

Blogger kullanan bir blog yazarıysanız, Genel Veri Koruma Yönetmeliği (GDPR) ve Kaliforniya Tüketici Gizliliği Yasası (CCPA) gibi düzenlemelere uygunluğu sağlamak için sitenize bir çerez izni başlığı eklemeniz önemlidir.

Çerez izni banner'ı nedir?

Çerez izni başlığı, bir web sitesinde görünen, kullanıcıları çerez kullanımı hakkında bilgilendiren ve bilgilerini saklamak veya bilgilerine erişmek için onaylarını isteyen bir açılır pencere veya başlıktır.

Çerezler, bir web sitesini ziyaret ettiklerinde kullanıcının cihazına yerleştirilen küçük metin dosyalarıdır. Kullanıcı tercihlerini hatırlamak, web sitesi etkinliğini izlemek ve daha kişiselleştirilmiş bir deneyim sağlamak için kullanılırlar. Bununla birlikte çerezler, hedefli reklam veya izleme için de kullanılabilir, bu nedenle kullanıcılara bilgi verilmeli ve bunları kabul etme veya reddetme seçeneği sunulmalıdır.

Blogger sitenize çerez izni banner'ı eklemek, birkaç adımda tamamlanabilecek görece basit bir işlemdir. Aşağıdaki bölümlerde, Blogger'a çerez izni banner'ı ekleme adımlarını ana hatlarıyla açıklayacağız.

Blogger'da çerez izni banner'ı nasıl eklenir?

Blogger'da bir çerez onayı Banner'ı veya Açılır Penceresi eklemek için aşağıdaki adımları izleyin.

  1. Blogger kontrol panelinizi açın ve tema bölümüne gidin.
  2. Şimdi, özelleştir düğmesinin hemen sağ tarafındaki Açılır menüden HTML'yi düzenle bölümünü tıklayın.
  3. Şimdi, genellikle tema kodunuzun 2. son satırı olan kapanış Body etiketini (</body) arayın.
  4. Şimdi verilen kodu hemen üstüne yapıştırın ve Blogger web sitenize çerez izni başlığını eklemek için kodu kaydedin.
 <div class='cookie-box'> <div class='cookie-row'> <div class='cookie-img'><svg viewBox='0 0 97.93 97.93' xmlns='http://www.w3.org/2000/svg'><path d='M44,23.76a2.47,2.47,0,1,0,.91,3.37A2.47,2.47,0,0,0,44,23.76Z'></path><path d='M25.9,40.32a2.47,2.47,0,0,0,0,4.93h0a2.47,2.47,0,1,0,0-4.93Z'></path><circle cx='32.08' cy='65.86' r='2.47'></circle><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><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><path 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' fill='#7577a9'></path><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'></path></svg></div> <div class='cookie-content'> <p>Our website uses cookies to improve your experience. <a href='https://policies.google.com/technologies/cookies' target='_blank' title='Learn more'>Learn more</a></p> <button class='cookie-buttons'>Accept!</button> </div> </div> </div> <style> .cookie-box.hide{display:none} .cookie-box { position: fixed; width: 90%; margin: 20px; max-width: 400px; min-height: 100px; background-color: #ffffff; box-shadow: 25px 12px 25px 12px rgb(30 30 30 / 4%); z-index: 990; border: 2px solid lightgrey; border-radius: 6px; bottom: 15px; right: 0px; padding: 15px; } .cookie-row { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; text-align: left; align-content: center; justify-content: center; align-items: center; } .cookie-img{padding-right:20px} .cookie-img svg{fill:#333;width:60px;height: 60px;} .cookie-content p { position: relative; width: 100%; display: inline-block; font-size: 15px; color: #666666; margin-top: 0!important; } .cookie-content pa{text-decoration:underline;} .cookie-buttons { position: relative; width: 100%; margin-top: 10px; float: left; background-color: #7577a9; font-family: inherit; font-size: 14px; color: #ffffff; text-decoration: none; opacity: 1; border: none; cursor: pointer; font-weight: 500; padding: 5px; border-bottom: 2px solid rgba(0,0,0,0.1); border-radius: 6px; } </style> <script>//<![CDATA[ cookieChoices = {}; const cookieBox = document.querySelector(".cookie-box"), acceptBtn = cookieBox.querySelector("button"); acceptBtn.onclick = ()=>{ document.cookie = "CookieByKey2Blogging; max-age="+60*60*24*30; if(document.cookie){ cookieBox.classList.add("hide"); }else{ alert("Cookie can't be set! Please unblock this site from the cookie setting of your browser."); } } let checkCookie = document.cookie.indexOf("CookieByKey2Blogging"); checkCookie != -1 ? cookieBox.classList.add("hide") : cookieBox.classList.remove("hide"); //]]></script>

Bu kod, varsayılan Blogger çerez Bildirimini kaldırır ve özel bir çerez izni başlığı ekler veya blogger web sitenize açılır pencere diyebilirsiniz.

Bu kod tamamen optimize edilmiştir ve SVG kodlarını kullanır, böylece blogger web sitesinde site hızı konusunda endişelenmenize gerek kalmaz.

Sonuç olarak, Blogger sitenize bir çerez onayı başlığı eklemek, veri gizliliği düzenlemelerine uygunluğu sağlamak ve kullanıcılarınıza şeffaflık sağlamak için gereklidir.

Umarım bu makale, blogger web sitenize özel bir çerez izni widget'ı eklemenize yardımcı olur. Bu kodla ilgili herhangi bir sorununuz varsa, yorum bölümünde bana bildirin.

Bu arada, Blogger Yükleme hızınızı optimize etmem için beni işe alabilirsiniz. Daha fazlasını öğrenmek için hizmetler sayfamıza göz atın.