Cara Modifikasi Blogger Cookies Bar

Cookies bar blogger

Sudah sejak lama google mengeluarkan kebijakan dari hukum uni eropa tentang penggunaan cookies. Secara tidak langsung blogger di luar uni eropa juga seharusnya memasang peringatan penggunaan cookies pada blog mereka. 

Nah biasanya para blogger terutama pemula menggunakan pemasangan cookies bar dari pihak ketiga. Penggunaan cookies bar dari pihak ketiga ini sudah pasti menggunakan script yang akan membebani loading blog itu sendiri. 

Taukah sobat rancax sebetulnya saat ini blogger sudah memiliki peringatan cookies bawaan. Jadi kita tidak perlu menggunakan cookies dari pihak ketiga yang bikin loading blog tambah lambat itu. Namun masalahnya adalah cookies bar bawaan blogger tersebut muncul dibagian atas blog sehingga menutupi header blog. Contohnya seperti gambar berikut ini. 

Cookies bar bawaan blogger

Untuk mengakali supaya cookies bar bawaan blogger tidak menutupi header blog saya menemukan caranya. Sangat simple dan tidak mempengaruhi loading blog karena disini kita cukup hanya menggunakan CSS saja. Pemasanganya juga tidak ribet seperti memasang cookies pihak ketiga.  Berikut contoh gambarnya

Cookies bar setelah dimodifikasi

Baiklah langkah 

• 1. Login akun blogger sobat
• 2. Kemudian pilih menu edit template
• 3. Copy CSS dibawah ini
• 4. Jangan lupa save setelah itu

Untuk antisipasi kejadian yang tak diinginkan sebelum edit template lebih baik template sobat di backup dulu. Jika langkah diatas sudah selesai selanjutnya sobat cek apakah pemasanganya sudah berhasil dengan cara menambahkan kode berikut dibelakang url blog sobat pada browser contoh seperti di bawah ini. 

https://rancax.blogspot.com/?gl=fr

/* Blogger Cookies Bar */

#cookieChoiceInfo {
	background-color: #222;
	padding: 10px 10px 40px;
	top: unset;
	font-family: "Helvetica Neue Light", HelveticaNeue-Light, "Helvetica Neue", Calibri, Helvetica, Arial;
	width: 300px;
	left: 10px;
	bottom: 10px;
	border-radius: 5px;
	overflow: hidden
}

#cookieChoiceInfo .cookie-choices-text {
	margin: 0 0 5px;
	font-size: 16px;
	color: #fff;
	text-align: left;
}

#cookieChoiceInfo .cookie-choices-inner {
	position: static
}

#cookieChoiceInfo .cookie-choices-buttons {
	margin: 0;
	display: block
}

#cookieChoiceInfo .cookie-choices-button {
	color: #f1d600;
	text-transform: none;
	transition: all .2s linear;
	font-weight: 400;
	display: block;
	text-align: left;
	margin: 0 0 10px;
	padding: 0
}

#cookieChoiceInfo .cookie-choices-button:nth-child(2) {
	color: #000;
	text-align: center;
	background-color: #f1d600;
	padding: 8px 18px;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	margin: 0
}

#cookieChoiceInfo .cookie-choices-button:hover {
	color: #e9eef0
}

#cookieChoiceInfo .cookie-choices-button:nth-child(2):hover {
	background-color: #e9eef0;
	color: #000
}

@media screen and (max-width:425px) {
	#cookieChoiceInfo {
		width: calc(100% - 20px)
	}
}