طريقة إدراج إعلانات أدسنس في القائمة الجانبية لمدونة الووردبريس (الجزء 2)


مصنفة في قسم  : أدسنس
كتبت بتاريخ  : 22 نوفمبر 2010
عدد المشاهدات  : 
عدد التعليقات  : 4 تعليقات 

طريقة إدراج إعلانات أدسنس في القائمة الجانبية لمدونة الووردبريس (الجزء 2)

السلام عليكم ورحمة الله وبركاته

إتماما لموضوعنا السابق سوف نتحدث في هذا الموضوع عن المقاس 125×125  نظرا لضرورة إستعمال ملف الإستيال (style.css) . بالنسبة لإستخراج الألوان و مقاسات الإعانات يمكنك مشاهدة الموضوع السابق من هنا بالنسبة للقالب اخترت هذا القالب idream

القياس 125×125

هذا القياس نستعمله بكترة في المدونات اما بالتبادل الاعلاني او إعلانات أدسنس أو نظام المكافئة (affiliate) هنا ستحدث عن نمودجين النمودج الاول يحتوي على اعلانين في السطر والتاني يحتوي على ثلات اعلانات في السطر

النمودج الأول

في هذا النمودج قمنا بادراج كود الاعلانات بدون عنوان مباشرة, اول شيئ يجب معرفته هو عرض القائمة دائما واحظ ايضا الفراغات بين كل إعلان والأخر في هذه الفراعات يلعب ملف الإستيال (style.css) دوره الأساسي, و هذا هو التنسيق الذي استعملنا

.banner125 {
 margin:0;
 padding:0;
 }

.banner125  img {
 float:left;
 width:125px;
 height:125px;
 margin:0 5px 5px 0;
 padding:0;
 }
.banner125  p {
 margin:0 5px 5px 0;
 padding:0;
 }

نشرح هذا التنسيق بالنسبة في الكلاس العادي (banner125) تلاحظون قيمة margin و padding هي 0 لانه مجموع عرض الصورتين يساوي  250px وهذا المجموع اصغر بقليل من عرض القائمة الجانبية اي 260px لهذا اعطينا القيمة 0 لل margin و padding

اما بالنسبة لكلاس الصورة (banner125  img) نلاحظ float اتجاه الصورة الى اليسار والطول والعرض 125px وفي قيمة margin نلاحظ التغيير الذي وقع  margin:0 5px 5px 0

0 : الأعلى

5px : اليمين

5px : الأسفل

0 : اليسار

لهذا تلاحظون تلك الفراغات بين الصور اما ان تركنا قيمة margin تساوي 0 سوف تجد ان صور ملتصقة ببعضها اما بالنسبة لل padding تركناها على قيمتها الصفر بسبب عرض القائمة الجانبية الصغير يمكنك ان تغيرها لترى الفرق

بخصوص الكلاس (banner125 p) سوف نحتاجه لإدخال أكواد أدسنس بشكل سليم ومتناسق مع التبادلات الاعلانية لانه كما تعرفون انها تستعمل فقط صور عادية خلافا لأدسنس تستعمل جافا سكريبت لإظهار الاعلانات

هذا الكود تبع الاعلانات صورية فقط

<div class="banner125">
<a href="http://mwordpress.net" rel="nofollow"><img src="<?php bloginfo('template_url'); ?>/images/adv.jpg" border="0"></a>
<a href="http://mwordpress.net" rel="nofollow"><img src="<?php bloginfo('template_url'); ?>/images/adv.jpg" border="0"></a>
<a href="http://mwordpress.net" rel="nofollow"><img src="<?php bloginfo('template_url'); ?>/images/adv.jpg" border="0"></a>
<a href="http://mwordpress.net" rel="nofollow"><img src="<?php bloginfo('template_url'); ?>/images/adv.jpg" border="0"></a>
<a href="http://mwordpress.net" rel="nofollow"><img src="<?php bloginfo('template_url'); ?>/images/adv.jpg" border="0"></a>
<a href="http://mwordpress.net" rel="nofollow"><img src="<?php bloginfo('template_url'); ?>/images/adv.jpg" border="0"></a>
</div>

الكود الذي استعملت انا في الشرح

		   <div class="banner125">
<a href="http://mwordpress.net" rel="nofollow"><img src="http://img155.imageshack.us/img155/7194/wparabe.png" border="0"></a>
<p><script type="text/javascript"><!--
google_ad_client = "pub-6138943747262727";
/* 125x125, date de création 22/11/10 */
google_ad_slot = "2851814463";
google_ad_width = 125;
google_ad_height = 125;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></p>
<a href="http://mwordpress.net" rel="nofollow"><img src="http://img203.imageshack.us/img203/5205/islametubebannerb125.png" border="0"></a>
<p><script type="text/javascript"><!--
google_ad_client = "pub-6138943747262727";
/* 125x125, date de création 22/11/10 */
google_ad_slot = "2851814463";
google_ad_width = 125;
google_ad_height = 125;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></p>
<a href="http://mwordpress.net" rel="nofollow"><img src="http://up.ioujda.com/download.php?img=61" border="0"></a>
<p><script type="text/javascript"><!--
google_ad_client = "pub-6138943747262727";
/* 125x125, date de création 22/11/10 */
google_ad_slot = "2851814463";
google_ad_width = 125;
google_ad_height = 125;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></p>
</div>
 <div class="clr"></div>

اما بالنسبة ل ثلات اعلانات في نفس السطر يجب ان يكون عرض القائمة الجانبية اكبر من 390 بيكسل سوف اضع مثال مع الكود مع العلم ان القليل من القوالب التي تستعمل هذا العرض

وهذا مثال بعد القيام بزيادة عرض القائمة الجانبية

ملحوظة : زيادة عرض القائمة الجانبية قد يتسبب في مشاكل في المظهر لا انصح باستعمال هذا المقاس الا في الضرورة

وهذا كود التنسيق :

</p>
<p style="text-align: right;">#banner125x3 {
 margin:0;
 padding:0;
 }

#banner125x3 p {
 margin:0 5px 5px 0;
 padding:0;
 float:right;
 padding-left:0px;
}

#banner125x3 p.last {
 float:left;
 margin:0 5px 5px 0;
 padding:0;
}</p>
<p style="text-align: right;">

وهذا الكود تبع الاعلانات الصورية المستعمل في الشرح

<div id="banner125x3">

<!-- 1x3 ads inline start-->
<p><a href="http://mwordpress.net"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/adv.jpg" alt="ads"/></a></p>
<p><a href="http://mwordpress.net"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/adv.jpg" alt="ads"/></a></p>
<p><a href="http://mwordpress.net"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/adv.jpg" alt="ads"/></a></p>
<!-- 1x3 ads inline end-->

<!-- 2x3 ads inline start-->
<p><a href="http://mwordpress.net"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/adv.jpg" alt="ads"/></a></p>
<p><a href="http://mwordpress.net"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/adv.jpg" alt="ads"/></a></p>
<p><a href="http://mwordpress.net"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/adv.jpg" alt="ads"/></a></p>
<!-- 2x3 ads inline End-->

<!-- 3x3 ads inline start-->
<p><a href="http://mwordpress.net"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/adv.jpg" alt="ads"/></a></p>
<p><a href="http://mwordpress.net"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/adv.jpg" alt="ads"/></a></p>
<p><a href="http://mwordpress.net"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/adv.jpg" alt="ads" /></a></p>
<!-- 3x3 ads inline End-->

</div>

نكتفي اليوم بهذا القدر من الشرح الى الجزء الثالث والاخير  من طريقة إدراج إعلانات أدسنس في القائمة الجانبية لمدونة الووردبريس انشاء الله  والسلام عليكم ورحمة الله وبركاته

طريقة إدراج إعلانات أدسنس في القائمة الجانبية لمدونة الووردبريس (الجزء 2) بواسطة مجلة ووردبريس, يمكنك نقل ومشاركة التدوينة مع ذكر المصدر الأصلي للموضوع ، مع رابطه, والتدوينة مرخصة بموجب المشاع الابداعي Creative Commons A-NC-SA 3.0.

الوسوم : , , ,


عدد التعليقات على هذه التدوينة : 4 تعليقات

  1. technology geek نوفمبر 24th, 2010

    ممتاز بارك الله فيك اخي

    • admin نوفمبر 24th, 2010

      الله يبارك فيك أخي العزيز على فكرة مدونتك جميلة

  2. رضا الصنهاجي سبتمبر 7th, 2011

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

    • معاذ سبتمبر 7th, 2011

      الله يبارك فيك اخي العزيز


  • مجلة الوردبريس
    سبتمبر 7th, 2011




1. المرجوا الابتعاد عن كتابة تعليقات بنمط (يعطيك العافية)، (روعة)، (ممتاز)، (مشكوووور)، (ابداع).

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