إضافة كود التبادل الاعلاني مع خلفية الوان احترافيه بتقنية Css3

اضافة كود التبادل الاعلاني لبلوجر
السلام عليكم اخواني اخواتي ,,ومرحبا بكم في كل جديد من مدونةجلال البعداني, اليوم باذن الله سنتعلم معا  كيفية إضافة كود التبادل الإعلاني بتقنية  CSS  بشكل انيق جدا وعصري إلى مدونات بلوجر مع تأثيرات رائعه على الصور بخلفيات ملونه بعدة الوان يمكنك تخصيصها والتحكم بها عن طريق تغيير CSS و HTML وفقا للحاجة الخاصة بك ,,, القطعه تكون دائريه تتاثر بتاثير التمرير فحين تمرر مؤشر الماوس عليها تتوسع خلفية اللون لتكون بشكل مربع . وينصح لمن يستخدم هذه الاضافه ان يكون مقاس البنر الاعلاني 125x125 لتظهر بشكل جميل ولتاخذ الاضافه كامل احترافيتها 

  مثال حي للاضافه

كيفية اضافة هذه الاداه الى مدوناتكم

       انتقل إلى لوح تحكم مدونتك،
     إختر "تخطيط" ثم إضافة أداة ,ثم اختر HTML/Javascript
     والآن الصق داخل المستطيل الكود التالي :
 
            
    <!--Advertisement Banners By alb33dani.blogspot.com-->
    <style>
    .FoulsCode-Ads ul{
    list-style-type:none;
    margin: 0px auto;
    padding: 10px 0px 10px 0px;
    width:270px;
    overflow:hidden;
    }
    .FoulsCode-Ads ul li{
    list-style-type:none;
    margin: 0px 5px 10px 5px;
    float:left;
    display:inline;
    background:orange;
    -webkit-transition:all 0.2s ease;
    -moz-transition:all 0.2s ease;
    -o-transition:all 0.2s ease;
    border-radius:100%;
    -webkit-border-radius:100%;
    -moz-border-radius:100%;
    -o-border-radius:100%;
    }
    .FoulsCode-Ads ul li:hover {
    -webkit-transition:all 0.3s ease;
    -moz-transition:all 0.3s ease;
    -o-transition:all 0.3s ease;
    -o-border-radius:15%;
    -webkit-border-radius:15%;
    -moz-border-radius:15%;
    border-radius:15%;
    }
    .FoulsCode-Ads ul li:active {
    -webkit-transition:all 0.2s ease;
    -moz-transition:all 0.2s ease;
    -o-transition:all 0.2s ease;
    -o-border-radius:50%;
    -webkit-border-radius:50%;
    -moz-border-radius:50%;
    border-radius:50%;
    }
    .FoulsCode-Ads ul li a img{
    -webkit-box-shadow:0 0 8px rgba(0,0,0,0.5);
    -moz-box-shadow:0 0 8px rgba(0,0,0,0.5);
    box-shadow:0 0 8px rgba(0,0,0,0.5);
    padding:3px;
    }
    </style>
    <div class="FoulsCode-Ads">
    <ul>
    <li style="background:#e42b2b !important;">
    <a href="رابط المعلن الاول" rel="nofollow">
    <img height="120" src="رابط البنر للمعلن الاول%20title=" width="118" />
    </a></li>
    <li style="background:#FFE500 !important;">
    <a href="رابط المعلن الثاني" rel="nofollow">
    <img height="120" src="hرابط البنر للمعلن الثاني%20title=" width="118" />
    </a></li>
    <li style="background:#a800ff !important;">
    <a href="رابط المعلن الثالث" rel="nofollow">
    <img height="120" src="رابط البنر للمعلن الثالث%20title=" width="118" />
    </a></li>
    <li style="background:#41d05f !important;">
    <a href=" رابط المعلن الرابع " rel="nofollow">
    <img height="125" src="رابط البنر للمعلن الرابع%20title=" width="118" />
    </a></li>
    </ul>
    </div>
    <!--Advertisement Banners By alb33dani.blogspot.com-->

مايجب عليك تغييره

  • رابط المعلن : استبدلها برابط موقع المعلن في مدونتك.
  • رابط  البنرللمعلن : استبدلها برابط صورة الموقع المعلن في مدونتك.
     الان قم بحفظ الاداه ومبروووووك عليك الاضافه

    اتمنى تكون الاضافه اعجبتكم واذا واجهتكم مشكله عند اضافة الاداه يمكنكم وضع تعليق وسيتم الرد عليكم ان شاء الله

هناك 17 تعليقًا:



  1. شكرا على الموضوع

    http://www.iphone-k.com/wp

    ردحذف
  2. @Abdessamia El Gholf
    عفوآ اخي شكرا لمرورك

    ردحذف
  3. شكرا انت رائع حقا واصل
    :)
    http://simoknowledge.blogspot.com/

    ردحذف
  4. @mohammed aladib
    العفو اخي شكرا لمرورك العطر

    ردحذف
  5. أخي الكود لا يعمل يضهر لي شكلللللل أخر تماماااااااا

    ردحذف
  6. @hakim berabha

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

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

    ردحذف
    الردود
    1. نعم اخي يتم وضع رابط الصوره ورابط الموقع

      حذف
  8. أزال أحد مشرفي المدونة هذا التعليق.

    ردحذف
  9. اخى الاضافة تظهر بهذا الشكل ارجو المساعدة
    http://www.arabicemarketing.com/

    ردحذف
    الردود
    1. اخي هذا لان مساحة السايدبار الخاصه بقالبك غير كافيه لعرض هذه الاضافه بالكامل

      حذف
  10. غير معرف11/4/14 15:38

    شكرا انت رائع حقا واصل
    http://3-geek.blogspot.com/

    ردحذف
  11. شكرا على مجهودك
    أخي لما أضع اعلان لاتظهر نافدة جديدة للموقع المعلن عنه وانما كصفحة يعني تنتقل من مدونتي الى المدونة المعلن عليها
    كيف يمكنني جعلها تظهر في نافدة جديدة بدون ان يغادر الزائر موقعي
    http://th5star.blogspot.com/@
    @http://th5star.blogspot.com

    اي نصائح عن مدونتي تفضل جزاك الله خيرا

    ردحذف
  12. السلام عليكم شكرا لك أخي
    أنا أريد عمل تبادل اعلاني معك
    لقد قمت باضافة موقعك الى مدونتي
    http://th5star.blogspot.com/
    الايميل youssef_real1995@hotmail.com
    بالنسبة للصورة لاأملك أي بانر لمدوني
    لوفيك تعمل واحد بسيط يدل على موقعي ومحتواه
    وشكراجزاك الله خيرا ولك مني جزيل الشكر

    ردحذف
  13. شكراً اخى الكريم

    ردحذف
  14. شكرا انت رائع حقا واصل
    (h)
    http://almohtarif-alma3lomiat.blogspot.com/

    ردحذف