اضافة التسميات بشكل رائع في بلوجر | 3 اشكال احترافية

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

وتساعد التسميات المستخدمين في اختيار المشاركات ذات الصلة التي يهتمون بها تمامًا مثل أداة ذات صلة التي تظهر أسفل مشاركات المدونة الخاصة بك.

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

تغيير شكل التسميات بلوجر

• قم بالذهاب الى المظهر ثم تعديل HTML
• انقر على Ctrl +F وابحث عن الكود التالي </b:skin>
• الاَن اختر الشكل الذي يناسبك ثم اضف الكود الخاص به فوق الكود </b:skin>

للتعديل على الالوان يلزمك هذا الموقع للحصول على اكواد الالوان لاستبدالها  بما يتناسب مع لون مدونتك.

بعد الدخول للموقع ما عليك سوى اختيار اللون الذي يناسبك ، في اليمين كما ترى في الصورة ستظهر لك تدرجات اللون الذي اخترته بجانبها الاكواد الخاصة بكل تدرج لوني قم بنسخ الكود ثم استبدله بكود اللون للشكل الذي اخترته.

الشكل الاول

#Label1 li{ float: right; background-color: #80b3ff; border-radius: 5px; overflow: hidden; margin-bottom: 7px; margin-right: 5px; } #Label1 li a{color:#fff; padding: 9px 15px;} #Label1 li a:hover{background:#b3d1ff}  

كود لون الخلفية 

#80b3ff;

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

#b3d1ff

كود لون النص

#fff

الشكل الثاني

#Label1 li{ text-align: center; overflow: hidden; background-color: #ff9933; padding-top: 3px; padding-bottom: 3px; margin-bottom: 5px; width: 157px;transition: 1s; } #Label1 li:hover{ width: 180px; background-color: #ffcc99;transition: 2s; }  


كود لون الخلفية 

#ff9933

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

#ffcc99

كود لون النص

#fff

سرعة التأثير عند تمرير الماوس

0.5s

سرعة التأثير عند ازاحة الماوس

1s

الشكل الثالث

#Label1 li{ margin-bottom: 7px; width: 145px; border-left: 3px solid#ff944d; text-align: center; transition: 1s; } #Label1 li a{ color:#555 } #Label1 li:hover{ border-right: 3px solid#ff944d; width: 110px; transition: 0.2s; }

كود لون الحواف اليسرى

#ff944d

كود لون الحواف اليمنى

#ff944d

كود لون النص

#555

سرعة التأثير عند تمرير الماوس

0.2s

سرعة التأثير عند ازاحة الماوس

1s

noscript>>