تاثيرات CSS في بلوجر اصبحت تضفي اليوم علي مدوانتنا طابعا احترافيا وتضيف رونقا وجمالا لمظهر المدونة,لذلك هنا وحصريا علي مدونتي المخصصة لتعليم بلوجر سوف اشرح لكم طريقة اضافة مربع نصوص مع تاثيرات CSS...ومربع النصوص اذا كنت لا تعرف في ماذا نستخدمه!انه مربع يستعمل في تسليط الضوء علي نص او كود او رسالة داخل مواضيع المدونات.
وفي الوضع الافتراضي لهذا المربع لا توجد الوان زاهية ونجده باللون الابيض فقط لذلك استعنت ببعض من اكواد css لابراز جمال هذا الصندوق نقصد بذلك المربع.
عند تحريك الماوس باتجاه المربع يتحول لونه للازرق وعندما تضغط عليه يتحول الي اللون الاخضر اما الون العادي فهو الابيض.ولمشاهدة مثال علي التاثيرات انقر هنا
اذا اعجبتك هذه الاضافة يمكنك ادراجها في محتوي مدونتك من خلال تطبيق الخطوات التالية:
ملاحظة: يمكنك تغييرعرض المربع وفقا لأبعاد المدونة الخاص بك. غير 640px بالرقم المناسب لعرض مدونتك
انتقل الي الخطوة الثانية
ملاحظة:استبدل الكلمة باللون الاحمر بالنص او الكود الذي تريد ابرازه.
في الختام اذا كنت تواجه اي مشكلة لا تتردد في ترك تعليق في الاسفل٠ارجوا ان التدوينة قد اعجبتكم يا اخواني... انتظروني في مزيد من الشروحات والدروس.
وفي الوضع الافتراضي لهذا المربع لا توجد الوان زاهية ونجده باللون الابيض فقط لذلك استعنت ببعض من اكواد css لابراز جمال هذا الصندوق نقصد بذلك المربع.
عند تحريك الماوس باتجاه المربع يتحول لونه للازرق وعندما تضغط عليه يتحول الي اللون الاخضر اما الون العادي فهو الابيض.ولمشاهدة مثال علي التاثيرات انقر هنا
اذا اعجبتك هذه الاضافة يمكنك ادراجها في محتوي مدونتك من خلال تطبيق الخطوات التالية:
كيفية إضافة مربع نصوص في بلوجر مع تاثيرات CSS
- سجل الدخول إلى حساب Blogger الخاص بك
- اذهب إلى تصميم
- تحرير HTML
- ابحث عن ]]></b:skin>
- ضع قبله هذا الكود:
.postmsgg23 { color: black; background-color: white; width: 640px; margin: 5px 60px; padding: 20px 20px 20px 20px; border: 2px dotted lightgrey; border-radius: 10px; box-shadow: -1px -1px 12px 2px gainsboro; transition: background-color .777s; -webkit-transition: background-color .777s; -moz-transition: background-color .777s; -o-transition: background-color .777s; -ms-transition: background-color .777s; } .postmsgg23:hover {color: white; background-color: CornflowerBlue ; } .postmsgg23:active { background-color: darkgreen ; }
- احفظ القالب
ملاحظة: يمكنك تغييرعرض المربع وفقا لأبعاد المدونة الخاص بك. غير 640px بالرقم المناسب لعرض مدونتك
انتقل الي الخطوة الثانية
كيفية إظهار مربع النصوص CSS في مدونتك
الان عند كتابة موضوع او تدوينة جديدة اضغط علي تحرير HTML واضف الكود التالي:<div class="postmsgg23" style="font-family: "Courier New",Courier,monospace;">اضف النص هنا</div> </div>
ملاحظة:استبدل الكلمة باللون الاحمر بالنص او الكود الذي تريد ابرازه.
في الختام اذا كنت تواجه اي مشكلة لا تتردد في ترك تعليق في الاسفل٠ارجوا ان التدوينة قد اعجبتكم يا اخواني... انتظروني في مزيد من الشروحات والدروس.
المشاركات
0 التعليقات:
إرسال تعليق