إضافات بلوجر : تعلان بانر متجاوب بـ html و css فقط
كثيرا ما نحتاج للإعلان عن بعض خدماتنا في موقعنا ونحتاج لعمل اعلان بانر نصي متجاوب واحترافي لجذب العملاء إليه، في هذه التدوينة سوف نتطرق إلى شرح طريقة إضافة كود إعلان بانر متجاوب لمدونتك في بلوجر وتقوم بتغيير النص والالوان كيفما تريد، فهذا الاعلان متجاوب مع جميع الشاشات قمت بتصميمه شخصيا فقط من خلال اكواد html وcss بانر بسيط جدا ، دعونا نتطرق إلى شرح طريقة الإضافة والعمل والتعديل على البانر.
الاعلان بسيط جدا وتستطيع التعديل عليه وتطويره كيفما تشاء تم وضع الخلفية والنص ويمكنك تغييرهما من الكود بعد وضعه على مدونتك ، وسأشرح لك بالتفصيل طريقة التعديل على الكود كليا حتى إذا كنت
لاتملك أية دراية حول الاكواد فقط اتبع التعليمات خطوة بخطوة.
banner code html css free 2021 |
شرح طريقة إضافة اعلان بانر لمدونة بلوجر
أول شيء تقوم بنسخ الكود التالي:
<style> .dorostech { height: 90px; background: linear-gradient(to left,#1e3c72,#2a5298); display: flex; justify-content: center; align-items: center; margin-bottom: 20px; margin-top: 0px; text-align: center; border-radius: 10px; } .dorostech a { color: #fff; font-size: 25px; line-height: 1.7; } </style> <div class="dorostech" href="#"> <a href="#">لاتتعب نفسك واطلب خدمة إنشاء مدونة بلوجر احترافية بـ 5$ فقط</a> </div>
بعد ذلك تذهب إلى التنسيق ومن ثم :
- تختار المكان الذي تريد أن تضع فيه الإعلان
- تضغط على إضافة أداة
- تختار HTML/JavaScript
- تقوم بلصق الكود ومنثم حفظ
- إعادة تحميل للصفحة وستجد الاعلان يظهر
تقوم بتغيير بعض الاشياء مثل # تقوم بوضع الرابط الذي تريد أن يذهب إليه الزائر عندما يضغط على الاعلان
وتقوم أيضا بتغيير النص الذي قمت بكتابته واستبداله بأي شيء تريده.
كما يمكنك تغيير خلفية الاعلان بتغيير Background
على سبيل المثال تضع Background:red; والذي سيحول خلفية الاعلان الى اللون الاحمر وهكذا...
الكود الثاني لبانر اعلاني مع هوفر احترافي
<style> .dorostech { height: 90px; background: linear-gradient(to left,#1e3c72,#2a5298); display: flex; justify-content: center; align-items: center; margin-bottom: 20px; margin-top: 0px; text-align: center; border-radius: 10px; } .dorostech a { color: #fff; font-size: 25px; line-height: 1.7; color: #ffea14; font-size: 27px; } </style> <div class="dorostech" href="#"> <a href="#">ضع النص الخاص بك هنا</a> </div>تقوم بتغيير # إلى الرابط الذي تريده أن يذهب إليه الزائر، وتغير النص الموجود على الاعلان.
في الاخير اتمنى أن ينال الشرح اعجابكم.
Tags:
شروحات بلوجر
شكراً الشرح جميييل أوي وبالذات الكود التاني جامد
ردحذفشرح جميل
ردحذفممكن طريقه اضافه الاعلانات تلقائيا داخل التدوينات لوتكرمت
https://www.jistweb.com/2023/05/post-ads-blogger.html
حذف