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

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

• كيف تقوم باضافة الادات الى مدونتك

1. انتقل إلى لوحة التحكم بمدونتك 
2. إختر "تخطيط"
3. ثم إضافة أداة ،ثم اختر HTML/Javascript
4. والان الصق هذا الكود داخل الخانة الموجودة امامك

.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>

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

عن مدير الموقع : Unknown