إضافة كود التبادل الإعلاني إلى مدونتك مع تأثيرات Css على الصور

css effects for banner125
السلام عليكم و رحمة الله تعالى و بركاته, أخواني الكرام زوار و متتبعي مدونة محمد. في هذا الموضوع سأشرح لكم كيفية إضافة كود التبادل الإعلاني إلى مدونات البلوجر مع تأثيرات على الصور قمة في الروعة, و قد سبق لي أن  قدمت درسا لطريقة إضافة كود التبادل الإعلاني لكنه كان بسيطا بدون تأثيرات, و أنا متأكد أن إضافة اليوم ستنال إعجابكم.
separator 1
مثال مباشر
إذا أعجبك التأثير و تريد إصافته إلى مدونتك كل ما عليك فعله هو تتبع المراحل البسيطة التالية :

    توجه إلى » لوحة التحكم الخاصة بمدونتك ثم » تصميم ثم » إضافة أداة و من النافذة المنبثقة اختر أداة HTML/Javascript
    الآن قم بنسخ ثم لصق الكود التالي داخل الأداة.



        <!--CSS Hover Effects To 125x125 Advertisement Banners-->
        <style>
        .Mohamed-Ads ul{
        list-style-type:none;
        margin: 0px auto;
        padding: 10px 0px 10px 0px;
        width:300px;
        overflow:hidden;
        }
        .Mohamed-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%;
        }
        .Mohamed-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%;
        }
        .Mohamed-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%;
        }
        .Mohamed-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="Mohamed-Ads">
        <ul>
        <li style="background:#e42b2b !important;">
        <a href="رابط المعلن" rel="nofollow">
        <img height="125" src="رابط صورة المعلن" width="125" />
        </a></li>
        <li style="background:#FFE500 !important;">
        <a href="رابط المعلن" rel="nofollow">
        <img height="125" src=" رابط صورة المعلن" width="125" />
        </a></li>
        <li style="background:#a800ff !important;">
        <a href="رابط المعلن" rel="nofollow">
        <img height="125" src=" رابط صورة المعلن" width="125" />
        </a></li>
        <li style="background:#41d05f !important;">
        <a href="رابط المعلن" rel="nofollow">
        <img height="125" src=" رابط صورة المعلن" width="125" />
        </a></li>
        </ul>
        </div>
        <!--CSS Hover Effects To 125x125 Advertisement Banners—>

    وشكرا لكم واذا اعجبكم الموضوع اتركو تعليقاتكم