القائمة الرئيسية

الصفحات

آخر المواضيع

إضافة كود اعلان بانر متجاوب بـ HTML وِCSS مجاني لمدونات بلوجر 2021

إضافات بلوجر : تعلان بانر متجاوب بـ html و css  فقط

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

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

لاتملك أية دراية حول الاكواد فقط اتبع التعليمات خطوة بخطوة.

إضافة كود اعلان بانر متجاوب بـ HTML وِCSS مجاني لمدونات بلوجر 2021
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>
تقوم بتغيير # إلى الرابط الذي تريده أن يذهب إليه الزائر، وتغير النص الموجود على الاعلان.
في الاخير اتمنى أن ينال الشرح اعجابكم.

تعليقات