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


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

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

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

اليوم باذن الله نختم طريقة ادراج اعلانات ادسنس في القائمة الجانبية و نقوم بشرح أخر المقاسات 120×600 و 160×600 سوف  نستعمل أيضا في هذا الدرس ملف الإستيال (style.css) . بالنسبة لإستخراج الألوان و مقاسات الإعانات يمكنك مشاهدة الموضوع السابق من هنا. بالنسبة للقالب اخترت هذا القالب omic free

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

نستعمل المقاس 120×600 وهذا المقاس ينطبق على المقاس 160×600 مع مراعات عرض القائمة الجانبية

ملاحظة : نستعمل ملف التنسيق فقط في حالة ادراج اعلانين جنبا الى جنب أو ادراج إعلان جنبا إلى تصنيفات او أخر التدوينات … بالنسبة لإعلان واحد يمكن ادراجه عادي مثال :

<div align=”center”>your adsense code here</div>

او

<div style=”margin:10px 0 10px 0;”>your adsense code here</div>

مثال اعلانين جنبا لجنب

طريقة ادراج الكود html لأدسنس

<div id="advert-style-120x600">
<p><script type="text/javascript"><!--
google_ad_client = "pub-xxxxxxxxxxxxxxxx";
/* 120x600, date de cr?ion 12/11/10 */
google_ad_slot = "0224709078";
google_ad_width = 120;
google_ad_height = 600;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></p>
<p><script type="text/javascript"><!--
google_ad_client = "pub-xxxxxxxxxxxxxxxx";
/* 120x600, date de cr?ion 12/11/10 */
google_ad_slot = "0224709078";
google_ad_width = 120;
google_ad_height = 600;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></p>
</div>

وهذا كود التنسيق الذي اضفناه لملف الإستايل (style.css)

#advert-style-120x600 {
 width: 312px !important;
 margin-left: -10px;
 padding-top: 5px !important;
 padding-bottom: 10px !important;
 overflow: hidden;
}
#advert-style-120x600 img {
 display: block;
 float: left;
 margin: 9px 0 0 10px;
 display: inline;
}

#advert-style-120x600 p {
 display: block;
 float: left;
 margin: 9px 0 0 10px;
 display: inline;
}

كما تلاحظون في كود التنسيق نضع دائما تنسيق لصور img وتنسيق لنصوص p لكي لا نقع في مشاكل فربما احدنا يريد ان يضع بانر ل (affiliate) وكما تعلمون اغلبها يستعملون الصور وهذا مثال لاستعمالها

هذا كود التنسيق بعد تعديل بسيط

#advert-style-120x600 {
 width: 312px !important;
 margin-left: -10px;
 padding-top: 5px !important;
 padding-bottom: 10px !important;
 overflow: hidden;
}
#advert-style-120x600 img {
 display: block;
 float: left;
 margin: 0 0 0 5px;
 display: inline;
}

#advert-style-120x600 p {
 display: block;
 float: left;
 margin: 0 0 0 5px;
 display: inline;
}

بالنسبة لاعلان بجانب اخر التدوينات على سبيل المثال يحتاج شطارة شوية سوف اضع لك الخطوة الاولى والبقية عليك مع انه صعب شوية

لاحظ المثال

سوف اضع الألوان لكي تفهم كيف يعمل ملف التنسيق و الكود html

<div id=”ads-side-by-last-topis”>
<div class=”ads-side-by-last-topis-right”>
<script type=”text/javascript”><!–
google_ad_client = “pub-6138943747262727”;
/* 120×600, date de 12/11/10 */
google_ad_slot = “0224709078”;
google_ad_width = 120;
google_ad_height = 600;
//–>
</script>
<script type=”text/javascript”
src=”http://pagead2.googlesyndication.com/pagead/show_ads.js”>
</script>
</div>

<div class=”ads-side-by-last-topis-left”>
<h2>آخر التدوينات</h2>
<ul>
<?php wp_get_archives(‘title_li=&type=postbypost&limit=10’); ?>
</ul>

</div>
</div>

CSS

#ads-side-by-last-topis {
margin:0;
padding:0;
}

.ads-side-by-last-topis-right {
float:left;
width:121px;
}

.ads-side-by-last-topis-left {
float:left;
width:140px;
}
.ads-side-by-last-topis-left h2 {
height:23px;
color:#255880;
font-size:18px;
font-weight:normal;
text-align:right;
margin:0px;
padding:0;
position:relative;
}

.ads-side-of-last-topis-left ul
{
color:#61676b;
font-size:12px;
list-style:none;
margin:10px 0px 10px 5px;
padding:0px;
position:relative;
float:left;
overflow:hidden;
}
.ads-side-of-last-topis-left ul li {
height:auto;
margin:5px 0px 5px 0px;
padding:5px 0px 5px 0px;
float:left;
overflow:hidden;
}
.ads-side-of-last-topis-left a {
color:#61676b;
text-decoration:none;
}
.ads-side-of-last-topis-left a:visited {
color:#61676b;
text-decoration:none;
}
.ads-side-of-last-topis-left a:hover {
color:#16344c;
text-decoration:underline;
}

قمت باستعمال جدولين جنبا الى جنب وقمت بإعطاء كل جدول عرض خاص لا تنسى أنني أنبه دائما لمراعاة عرض القائمة الجانبية واخيرا اتمنى ان تكون الفكرة قد وصلت.

وفي الأخير أريد ان اشير الى أن التدوينة القادمة سوف اقوم بشرح وضع الاعلانات في التدوينات المنفردة single.php ان شاء الله

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

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

الوسوم : , , , ,


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

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

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


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




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

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