تخصيص بار الكوكيز الخاص ببلوجر عن طريق Css

تخصيص بار الكوكيز الخاص ببلوجر عن طريق Css

ضهرت رسالة في الأونة الأخيرة على لوحة تحكم بلوجر التي تقول ‏تُلزمك قوانين الاتحاد الأوروبي بأن تعطي للزائرين من الاتحاد الأوروبي معلومات عن ملفات تعريف الارتباط المستخدمة في مدونتك. في كثير من الحالات، تُلزمك هذه القوانين أيضًا بالحصول على الموافقة.
ولهذا أضافت بلوجر بار خاص تلقائي يوفر لك معرفة معلومات أكثر حول الكوكيز.
ولاكن الشريط التلقائي غير إحترافي وليس جذابا أكثر لهذا أحضرت لكم بعض أكواد css لتخصيص البار ليصبح أكثر احترافية وبلونين داكن وفاتح .

الأن كل ماعليك فعله هو إضافة أحد الكودين التاليين فوق ]]></b:skin> أو </style>

البار الداكن

CSS/* Custom Cookies Info Dark */
.cookie-choices-info{background-color:rgba(56,66,75,.97)!important;line-height:normal!important;top:initial!important;bottom:0!important;font-family:inherit!important;}
.cookie-choices-info .cookie-choices-text{font-size:14px!important;color:#cee6ea!important}
.cookie-choices-info .cookie-choices-button{color:#fff!important;margin-left:5px!important;padding:3px 6px!important;background:#3fbdf3!important;border-radius:2px;transition:all .6s linear}
.cookie-choices-info .cookie-choices-button:nth-child(2){background:#f68c2e!important;transition:all .6s linear}
.cookie-choices-info .cookie-choices-button:hover,.cookie-choices-info .cookie-choices-button:nth-child(2):hover{background:#282f36!important;transition:all .1s linear}

البار الفاتح

CSS/* Custom Cookies Info Light */
.cookie-choices-info{background-color:rgba(255,255,255,.99)!important;line-height:normal!important;top:initial!important;bottom:0!important;font-family:inherit!important;box-shadow:0 0 10px rgba(0,0,0,0.2);}
.cookie-choices-info .cookie-choices-text{font-size:14px!important;color:#222!important}
.cookie-choices-info .cookie-choices-button{color:#fff!important;margin-left:5px!important;padding:3px 6px!important;background:#3fbdf3!important;border-radius:2px;transition:all .6s linear}
.cookie-choices-info .cookie-choices-button:nth-child(2){background:#f68c2e!important;transition:all .6s linear}
.cookie-choices-info .cookie-choices-button:hover,.cookie-choices-info .cookie-choices-button:nth-child(2):hover{background:#999!important;transition:all .1s linear}

يمكنك معاينة البار بتغيير رابط مدونتي إلى رابط مدونتك tech5academy.blogspot.co.uk

إلى هنا ينتهي الشرح أي إستفسار أو سؤال لا تتردد بترك تعليق

person_outline محمد  schedule 8/20/2015 

بلوجر Css