تغيير شكل بار الكوكيز لمدونات بلوجر لشكل احترافي بلونين مختلفين

السلام عليكم ورحمه الله وبركاته اليوم ساضع لكم اضافه مهمه لكل مدونه وهي تغيير شكل بار الكوكيز المقدم من جوجل فكما يعلم البعض ان شركه جوجل اضافه بار للتعريف باستخدام الكوكيز في المدونه وتظهر عندما يدخل لك زائر من الخارج من الدول الاجنبيه واحيانا بعض الدول العربيه وهذه الرساله تظهر بشكل غير احترافي وغير منظم كما بالصوره التاليه.

كما تري تظهر بشكل بسيط جدا واليوم سنتعلم كيفيه تغيير هذا التصميم للتصميم في صوره الموضوع الاضافه بشكلين ولونين مختلفيه

اولا اضافه بار الكوكيز باللون الابيض

للاضافه قم بالبحث عن]]></b:skin> والصق الكود التالي فوقه اي قبله

/*Tapseet.com 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}

ثانيا اضافه بار الكوكيز باللون الاسود

للاضافه قم بالبحث عن]]></b:skin> والصق الكود التالي فوقه اي قبله

/* Custom Cookies Info Dark Tapseet.com */

.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}

ارجوا ان يعجبكم الموضوع