إضافة كود التبادل الاعلاني مع خلفية الوان احترافيه بتقنية 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-->

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

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

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