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


السلام عليكم و رحمة الله تعالى و بركاته, أخواني الكرام زوار و متتبعي مدونة محمد. في هذا الموضوع سأشرح لكم كيفية إضافة كود التبادل الإعلاني إلى مدونات البلوجر مع تأثيرات على الصور قمة في الروعة, و قد سبق لي أن  قدمت درسا لطريقة إضافة كود التبادل الإعلاني لكنه كان بسيطا بدون تأثيرات, و أنا متأكد أن إضافة اليوم ستنال إعجابكم.
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—>
التعديل على الكود :
  • رابط المعلن : رابط الموقع المعلن في مدونتك.
  • رابط صورة المعلن : رابط صورة الموقع المعلن في مدونتك.
انتهى الدرس, إذا واجهتك أية مشكلة يمكنك طرحها في تعليق
_________________________________________________________
التصنيفات

إرسال تعليق

0 تعليقات