تبادل اعلاني

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

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

ثانيا

انتقل إلى لوحة تحكم مدونتك
إختر "تخطيط" ثم إضافة أداة ثم اخترHTML/Javascript 
والآن الصق داخل المستطيل الكود التالي

كود 

 <!--Advertisement Banners By ksm2.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 ksm2.blogspot.com-->