اضافة أداة التبادل الاعلاني بشكل جديد لمدونات بلوجر

السلام عليكم ورحمة الله وبركاته
أهلا بكم في مدونة ابداع هاوس
اليوم أقدم لكم كود رائع لللتبادل الاعلاني ... يتميز الكود بشكل جديد وتأثيرات رائعة ..

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

طريقة التركيب : 

الطريقة سهلة جدافقط اتبع الخطوات التالية
أولا اذهب الى لوحة التحكم >> التخطيط >> اضافة أداة >> Html/Javascript

ثم أضف الكود التالي :

<style>
#advertise{
  margin: auto;
}
 .adss { list-style:none; margin-top:5px auto; margin: 0 1px 2px 1px; display:inline-block; text-align: center; }
 .adss a { display:block; width:75px; height:75px; padding-right:0px; padding-top: 3px; position:relative; text-decoration:none; }
 .adss a strong { font-weight:normal; position:absolute; left:20px; top:-1px; color:#fff; padding:3px; z-index:9999; text-shadow:1px 1px 0 rgba(0, 0, 0, 0.75); background-color:rgba(0, 0, 0, 0.7); -moz-border-radius:3px; -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); -webkit-border-radius:3px; -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); border-radius:3px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);}
 .adss img { max-height: 75px; max-width: 75px; }
 #adsanime:hover { opacity:0.2; }
 #adsanime a strong {
    -webkit-transition-property: opacity;
     -webkit-transition-duration: 500ms;
     -moz-transition-property: opacity;
      -moz-transition-duration: 500ms; }
 #adsanime a strong {
   opacity:0;
    -webkit-transition-property: opacity, top;
     -webkit-transition-duration: 300ms;
      -moz-transition-property: opacity, top;
       -moz-transition-duration: 300ms; }
 #adsanime {
    opacity:0.5;
     -webkit-transition-property: opacity, top;
      -webkit-transition-duration: 300ms;
       -moz-transition-property: opacity, top;
        -moz-transition-duration: 300ms; }
 #adsanime:hover { opacity:1; }
 #adsanime:hover a strong { opacity:1; top:-10px; }
</style> <center><div class="adss" id="adsanime"><a
href="#">    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiS5hcSeEXHDxu8dVW2tnWtLqDIxRH_D_PJH3UZwBQnOVY_xbuMrnYDGD9PhIyF8jn0n5C5ErfEd3_55VlcbIY1gK_lz0Zv5tXRRxcmNHVDb54gSnEPof10nzSaiYe0vZH4anlq_zv9xVY/s128-Ic42/ah.jpg" />    <strong>أعلن لدينا</strong></a>     </div><div class="adss" id="adsanime"><a
 href="#">    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiS5hcSeEXHDxu8dVW2tnWtLqDIxRH_D_PJH3UZwBQnOVY_xbuMrnYDGD9PhIyF8jn0n5C5ErfEd3_55VlcbIY1gK_lz0Zv5tXRRxcmNHVDb54gSnEPof10nzSaiYe0vZH4anlq_zv9xVY/s128-Ic42/ah.jpg" />    <strong>أعلن لدينا</strong>     </a
></div><div class="adss" id="adsanime"><a
href="#">    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiS5hcSeEXHDxu8dVW2tnWtLqDIxRH_D_PJH3UZwBQnOVY_xbuMrnYDGD9PhIyF8jn0n5C5ErfEd3_55VlcbIY1gK_lz0Zv5tXRRxcmNHVDb54gSnEPof10nzSaiYe0vZH4anlq_zv9xVY/s128-Ic42/ah.jpg" />    <strong>أعلن لدينا</strong></a>     </div><div class="adss" id="adsanime"><a
href="#">    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiS5hcSeEXHDxu8dVW2tnWtLqDIxRH_D_PJH3UZwBQnOVY_xbuMrnYDGD9PhIyF8jn0n5C5ErfEd3_55VlcbIY1gK_lz0Zv5tXRRxcmNHVDb54gSnEPof10nzSaiYe0vZH4anlq_zv9xVY/s128-Ic42/ah.jpg" />    <strong>أعلن لدينا</strong></a>     </div><div class="adss" id="adsanime"><a
 href="#">    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiS5hcSeEXHDxu8dVW2tnWtLqDIxRH_D_PJH3UZwBQnOVY_xbuMrnYDGD9PhIyF8jn0n5C5ErfEd3_55VlcbIY1gK_lz0Zv5tXRRxcmNHVDb54gSnEPof10nzSaiYe0vZH4anlq_zv9xVY/s128-Ic42/ah.jpg" />    <strong>أعلن لدينا</strong>     </a
></div><div class="adss" id="adsanime"><a
 href="#">    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiS5hcSeEXHDxu8dVW2tnWtLqDIxRH_D_PJH3UZwBQnOVY_xbuMrnYDGD9PhIyF8jn0n5C5ErfEd3_55VlcbIY1gK_lz0Zv5tXRRxcmNHVDb54gSnEPof10nzSaiYe0vZH4anlq_zv9xVY/s128-Ic42/ah.jpg" />    <strong>أعلن لدينا</strong>     </a
></div><div class="adss" id="adsanime"><a href="#">    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiS5hcSeEXHDxu8dVW2tnWtLqDIxRH_D_PJH3UZwBQnOVY_xbuMrnYDGD9PhIyF8jn0n5C5ErfEd3_55VlcbIY1gK_lz0Zv5tXRRxcmNHVDb54gSnEPof10nzSaiYe0vZH4anlq_zv9xVY/s128-Ic42/ah.jpg" />    <strong>أعلن لدينا</strong></a>     </div><div class="adss" id="adsanime"><a
href="#">    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiS5hcSeEXHDxu8dVW2tnWtLqDIxRH_D_PJH3UZwBQnOVY_xbuMrnYDGD9PhIyF8jn0n5C5ErfEd3_55VlcbIY1gK_lz0Zv5tXRRxcmNHVDb54gSnEPof10nzSaiYe0vZH4anlq_zv9xVY/s128-Ic42/ah.jpg" />    <strong>أعلن لدينا</strong></a>     </div><div class="adss" id="adsanime"><a
href="#">    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiS5hcSeEXHDxu8dVW2tnWtLqDIxRH_D_PJH3UZwBQnOVY_xbuMrnYDGD9PhIyF8jn0n5C5ErfEd3_55VlcbIY1gK_lz0Zv5tXRRxcmNHVDb54gSnEPof10nzSaiYe0vZH4anlq_zv9xVY/s128-Ic42/ah.jpg" />    <strong>أعلن لدينا</strong></a>     </div></center><a href="#"></a>

تخصيص الاضافة : 

استبدل اللون الأزرق برابط البنر الاعلاني
واللون الأحمر برابط الموقع
وأخيرا استبدل اللون الأصفر باسم الموقع

ملحوظة : يمكنك عمل صفحة مخصصة لعرض شروط التبادل الاعلاني ... بعد ذلك يمكنك استبدال اللون الأحمر برابط هذه الصفحة حتى يتمكن الزائر من عمل تبادل اعلاني مع مدونتك ..

الى هنا نكون قد وصلنا الى ختام درس اليوم ... أتمنى أن تكونو قد استفدتم ولو بالقليل ... الى اللقاء.
.....
تحديث بتاريخ 4/3/2016

تم تغيير رابط الصورة لتظهر في الإضافة .. لأن الصورة القديمة كانت مرفوعة على مركز رفع الخليج ، وهو متوقف حاليا .