تغيير شكل اشعار ملفات تعريف الارتباط

تقييمك للموضوع؟

السلام عليكم ورحمة الله وبركاته

نشارك اليوم معكم درس جديد من دروس بلوجر والذي سيمكنك من التحكم بشكل إشعار ملفات تعريف الإرتباط أو بما يعرف بـ RGPD

هذه الطريقة سوف تساعدك بالتخلص من شكل الإشعار الكلاسيكي والتي ستعمل على عرض الإشعار بشكل أجمل وأفضل مما كان عليه حيث يمكنك تغيير طريقة ظهوره وألوانه  ... إلخ



للتحكم بشكل الإشعار قم بإضافة CSS إلى مدونتك من خلال نسخ الكود أدناه ثم التوجه إلى المدونة الخاصة بك أنقر على "المظهر => تحرير html => ثم أبحث عن الرمز ]]></b:skin> وأضفه فوقه مباشرةً"

/*!
* شكل مخصص: Cookie-Choices v1.0.1
* by www.madad2.com
*/
/*إعادة تعيين ملف cookie-choices.css*/
body .cookie-choices-info,
body .cookie-choices-info .cookie-choices-button,
body .cookie-choices-info .cookie-choices-buttons,
body .cookie-choices-info .cookie-choices-inner,
body .cookie-choices-info .cookie-choices-text{
    position:initial;margin:initial;
    left:initial;right:initial;bottom:initial;width:initial;
    top:initial;color:initial;padding:initial;background:initial;
    text-transform: initial;font-size: initial;max-width: initial;text-align: center;
}
/*التأثيرات*/
@-webkit-keyframes cookies {
    from {-webkit-transform:translateY(10em);transform:translateY(10em);}
    to {-webkit-transform:translateY(0em);transform:translateY(0em);}
}
@keyframes cookies {
    from {-webkit-transform:translateY(10em);transform:translateY(10em);}
    to {-webkit-transform:translateY(0em);transform:translateY(0em);}
}
/*الحاوية الرئيسية*/
body .cookie-choices-info {
    position: fixed;
    bottom: 0;left: 0;right: 0;
    font-size: 14px; /*حجم الإشعار*/
    -webkit-animation: cookies 1s backwards;
            animation: cookies 1s backwards;
}
body .cookie-choices-info .cookie-choices-inner {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
body .cookie-choices-info .cookie-choices-buttons {
    padding-top: 1em;
}
/*إيطار النص والأزرار*/
body .cookie-choices-info .cookie-choices-inner {
    padding: 1.5em; /*الحشو*/
    background: #6dafd5; /*لون الخلفية*/
}
/*نص*/
body .cookie-choices-info .cookie-choices-text {
    color: #fff; /*لون النص*/
    padding: 0 1em;
}
/*أزرار*/
body .cookie-choices-info .cookie-choices-button {
    color: #fff; /*لون نص الأزرار*/
    margin-left: .5em;
    padding: .8em 1em; /*ملء الأزرار*/
    display: inline-block;
    background: rgba(115, 182, 219); /*لون الخلفية من الأزرار*/
    border-radius: 3px;
    font-size: .9em;
    -webkit-transition:background .3s;
    transition: background .3s;
}
/*تحوم => الأزرار*/
body .cookie-choices-info .cookie-choices-button:hover {
    background: rgba(0, 0, 0, 0.75); /*لون زر عند التأشير عليه*/
} 

يمكنك تخصيص الرمز بحسب مظهر مدونتك بتغيير الألوان والأحجام بما يناسبك وبعد أن تنتهي يمكنك النقر على حفظ المظهر

اتمنى ردودكم وتعاليقكم