دليلك لتغيير لون جميع الروابط في مدونة بلوجر

هل تريد تغيير لون جميع الروابط في مدونتك ؟ بإمكانك ذلك عن طريق كود CSS يمكنك تغيير لون جميع الروابط في مدونتك ومنها روابط المقالات الرئيسية وروابط التذييل والشريط الجانبي

صورة تعبيرية عن تغيير لون الروابط في مشاركات بلوجر
صور pixabay


 ايضاً وهو الاهم الروابط داخل المشاركات الخاصة بالمدونة لما لذلك اهمية في تطوير المدونة وتحسين صورتها 

تمييز لون الروابط بلون مختلف داخل مشاركاتك على مدونة بلوجر


  • أهمية تغيير لون الروابط في مشاركات المدونة 
  • لذلك اهمية كبيرة فعن طريق ذلك يمكنك تمييز الروابط داخل المشاركة وتفقُدها ومعاينة الاخطاء فيها 
  • ايضاً يتعرف زائر المدونة على مكان الروابط في المشاركات ومن الغير مقبول ان يكون نص المشاركة مشابه لرابطها
  • إعطاء مضهر جمالي للمدونة
  • تمييز الزائر للمدونة للروابط التي قام بزيارتها عن طريق تفعيل لون الزيارة 

طريقة تغيير لون روابط المدونة 

أرقام بلغة html تبدأ بـ# ولها ستة ارقام وحروف باللغة الانجليزية يمكنك اضافتها داخل اضافة الـ css لتغيير لون روابط مدونتك

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

إذا اردت اكثر من اضافة يمكنك نسخها ولصقها في اضافة ال css ثم كتابة الإضافة الأخرى بعدها مباشرة وهكذا لنذهب الآن إلى طريقة تفعيل الاضافة وهي كالتالي :

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

مبروك لقد تم اضافة الإضافة الى مدونتك وسوف يتم تمييز الروابط بالألوان التي اضفتها

مصدر اضافة الالوان

الالوان الأساسية بلغة html لتضيفها إلى اضافة css لتغيير لون روابط مدونتك الخاصة وخصوصا روابط داخل مشاركات المدونة

الالوان بلغة html يمكنك اضافتها بذكر الالوان الرئيسية مثل black , white , blue red أو بذكر أرقام خاصة بكل لون تبدأ من اليسار برمز # وهي ستة أرقام وحروف باللغة الإنجليزية مثل F4a900 #

شرح إضافة css لتغيير الالوان في مدونتك 

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

.post-body a {

Color: red !important;

ولاحظ في السطر الثاني كلمة red وهذه تعني اللون الأحمر ويشير السطر الأول الى لون الرابط الذي تريده  وهنا ياتي الرمز الثاني

 post-body a:hover{

color: default !important;

}


لاحظ كلمة a:hover وتعني لون الرابط عند الاشارة عليه بالماوس وكلمة default تعني اللون الافتراضي غيرها بأي لون تريد أو رقم اللون الذي تريد 

الرمز الثالث في الإضافة

.post-body a:visited{

color: default !important;

{


لاحظ كلمة a: visited تعني الرابط الذي تمت زيارته وتحته لاحظ كلمة default تعني اللون الافتراضي غيرها بلونك الذي تريد او برمز لوني 

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

اضافات بلغة الـ Css لتغيير لون روابط مدونتك

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

لتغيير لون كل الروابط داخل مشاركاتك 


.post-body a{

color: red !important;

}

.post-body a:hover{

color: default !important;

}

.post-body a:visited{

color: default !important;

}

SouthernSpeakers الإضافة منسوخة من موقع  


لتغيير لون رابط التعليقات


.comment-link{

color: red !important;

}

.comment-link:hover{

color: default !important;

}

.comment-link:visited{

color: default !important;

}


SouthernSpeakers الإضافة منسوخة من موقع


لتغيير لون روابط التسميات داخل المشاركات


.post-labels a{

color: red !important;

}

.post-labels a:hover{

color: default !important;

}

.post-labels a:visited{

color: default !important;

}


SouthernSpeakers الإضافة منسوخة من موقع


لتغيير لون روابط الوقت في التذييل


.published{

color: red !important;

}

.published:hover{

color: default !important;

}

.published:visited{

color: default !important;

}


SouthernSpeakers الإضافة منسوخة من موقع


تغيير لون روابط المشاركات الأقدم


#blog-pager-older-link a{

color: red !important;

}

#blog-pager-older-link a:hover{

color: default !important;

}

#blog-pager-older-link a:visited{

color: default !important;

}


SouthernSpeakers الإضافة منسوخة من موقع


تغيير لون روابط المشاركات الأحدث


#blog-pager-newer-link a{

color: red !important;

}

#blog-pager-newer-link a:hover{

color: default !important;

}

#blog-pager-newer-link a:visited{

color: default !important;

}


SouthernSpeakers الإضافة منسوخة من موقع


تغيير لون رابط الصفحة الرئيسية بالمدونة

.home-link{

color: red !important;

}

.home-link:hover{

color: default !important;

}

.home-link:visited{

color: default !important;

}


SouthernSpeakers الإضافة منسوخة من موقع


 لتغيير لون روابط قائمة الأرشيف


#ArchiveList a{

color: red !important;

}

#ArchiveList a:hover{

color: default !important;

}

#ArchiveList a:visited{

color: default !important;

}


SouthernSpeakers الإضافة منسوخة من موقع


تغيير لون كل الروابط في مدونتك


a:link {

color: #ff0000 !important;

}

a:visited {

color: #0000ff !important;

}

a:hover {

color: #38761d !important;

}

a:active {

color: #ff9900 !important;

}

 الإضافة منسوخة من موقع newfeatureblog


تغيير لون روابط الشريط الجانبي ( sidebar ) في مدونتك

.sidebar a {

color: #ff0000 !important;

}

.sidebar a:visited {

color: #0000ff !important;

}

.sidebar a:hover {

color: #38761d !important;

}

.sidebar a:active {

color: #ff9900 !important;

}


 newfeatureblog الإضافة منسوخة من موقع  



تغيير لون روابط التذييل ( footer ) في مدونتك


.footer-outer a {

color: #ff0000 !important;

}

.footer-outer a:visited {

color: #0000ff !important;

}

.footer-outer a:hover {

color: #38761d !important;

}

.footer-oute a:active {

color: #ff9900 !important;

}


newfeatureblog الإضافة منسوخة من موقع  


شاركونا بالتعليقات لنجيبكم عن اسئلتكم واستفساراتكم بصدر رحب وإذا وجدتم أي صعوبة في صنع لون اضافتكم المفضلة سنقوم بصنعها لكم وشكرا على المتابعة


شاهد أيضاً

تعلم كيف تضيف صفحة اتصل بنا احترافية إلى مدونتك

تعلم كيف تصنع رابط مشاركتك بنفسك

طريقة عمل جدول محتويات المقالة لمشاركات بلوجر

 

إرسال تعليق

0 تعليقات