طريقة وضع وحدات إعلانية فى الشريط الجانبي بشكل احترافي

لا يستخدم الشريط الجانبي في مشاركات المدونة فقط للأدوات التي تدعم محتوى المدونة ، ولكنه يستخدم أيضًا فى الوحدات الإعلانية الذاتية ، التي تعرض بانر تصميم إعلان 300 × 250 أو 125 × 125 ، يمكنك أيضًا استخدام اعلانات أدسنس به مثل ما فى مدونة عالم المدون حاليا أو إعلانات بانر بديلة أخرى في الشريط الجانبي.

عندما تقوم بإضافة إعلانات البانرات 300 × 250 و 125 × 125 إلى الشريط الجانبي ، يجب أن تظهر إعلانات البانرات ، أو بمعنى اخر يجب أن تكون بتنسق جيد لها ، وفى هذا الموضوع سوف أقدم لكم إضافة لوضع إعلانات البانرات فى الشريط الجانبي بطريقة احترافيه بأستخدام CSS و HTML .

طريقة وضع وحدات إعلانية فى الشريط الجانبي بشكل احترافي

معاينة الإضافة

معاينة

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

طريقة وضع وحدات إعلانية فى الشريط الجانبي بشكل احترافي

تابع معى الشرح والخطوات التاليه لمعرفة كيفية وضع بسيطة بأحجام 300 × 250 أو 125 × 125 فى الشريط الجانبي بكل سهوله.

اولا قم بوضع الكود التالى فوق الوسم]]></b:skin>هذا فى مدونتك.

*{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
.banner_box_ads{background:#efefef;width:300px;margin:0 auto;text-align:center;padding:16.6666666667px}
.banner_box{background:#ddd;height:125px;width:125px;display:inline;margin:0;padding:0;float:right;position:relative;}
.banner_box:nth-child(1),.banner_box:nth-child(3){margin-left:16.6666666667px}
.banner_box:nth-child(1),.banner_box:nth-child(2){margin-bottom:16.6666666667px}
.banner_box a{position:relative;display:block;z-index:2}
.banner_box img{object-fit:cover}
.banner_box:before{content:"125x125";line-height:1.2;position:absolute;top:0;left:0;width:100%;height:100%;color:#444;font-size:20px;display:flex;flex-direction:column;justify-content:center;z-index:1;}
.banner_300{width:300px;height:250px;}
.banner_box.banner_box-300:nth-child(1){margin-right:0;margin-bottom:0;}
.banner_box_ads.box_widget{padding:0;}
.banner_300:before{content:"300x250";}
.clear{clear:both;}

الأن عليك حفظ القالب وتقوم بالأنتقال الى التخطيط فى مدونتك الأن وتقوم بأنشاء أداة جديد وتقوم بوضع الكود التالى بها.

<div class="banner_box_ads box_widget">
<div class="banner_box banner_300">
<!-- 300x250 -->
<a href="رابط الأعلان" target="_blank" rel="nofollow noopener" title="نص الإعلان">
<img src="رابط الصورة" alt="نص الإعلان" title="نص الإعلان" height="250" width="300"/></a>
</div>
<div class="clear"/>
</div>
<div class="banner_box_ads">
<div class="banner_box">
<!-- 125x125 -->
<a href="رابط الأعلان" target="_blank" rel="nofollow noopener" title="نص الإعلان">
<img src="رابط الصورة" alt="نص الإعلان" title="نص الإعلان" height="125" width="125"/></a>
</div>
<div class="banner_box">
<!-- 125x125 -->
<a href="رابط الأعلان" target="_blank" rel="nofollow noopener" title="نص الإعلان">
<img src="رابط الصورة" alt="نص الإعلان" title="نص الإعلان" height="125" width="125"/></a>
</div>
<div class="banner_box">
<!-- 125x125 -->
<a href="رابط الأعلان" target="_blank" rel="nofollow noopener" title="نص الإعلان">
<img src="رابط الصورة" alt="نص الإعلان" title="نص الإعلان" height="125" width="125"/></a>
</div>
<div class="banner_box">
<!-- 125x125 -->
<a href="رابط الأعلان" target="_blank" rel="nofollow noopener" title="نص الإعلان">
<img src="رابط الصورة" alt="نص الإعلان" title="نص الإعلان" height="125" width="125"/></a>
</div>
<div class="clear"/>
</div>

الأن سوف يكون عليك كل ما فى الكود من عبارات بما يناسب الأعلان الخاص بك وبعد ذلك سوف تقوم بحفظ الإضافة.

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