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

السلام عليكم و رحمة الله تعالى و بركاته, أخواني الكرام زوار و متتبعي مدونة محمد. في هذا الموضوع سأشرح لكم كيفية إضافة كود التبادل الإعلاني إلى مدونات البلوجر مع تأثيرات على الصور قمة في الروعة.

 

مثال مباشر

إذا أعجبك التأثير و تريد إصافته إلى مدونتك كل ما عليك فعله هو تتبع المراحل البسيطة التالية :

• توجه إلى » لوحة التحكم الخاصة بمدونتك ثم » تصميم ثم » إضافة أداة و من النافذة المنبثقة اختر أداة 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—>

التعديل على الكود :

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

انتهى الدرس, إذا واجهتك أية مشكلة يمكنك طرحها في تعليق

_________________________________________________________

يمكنك مشاركة الموضوع اذا اعجبك

الموضوع من طرف :: محمد عليان

أنا محمد عليان 15 سنة مدوّن سوري مهووس بجديد تكنولوجيا المعلوميات ،أحب كل جديد في عالم الإنترنت من مواقع وبرامج وأحب التدوين ودائماً أبحث عن الجديد لتطوير مهاراتي في مختلف الميادين التي تعجبني ،أنشأت هذه المدونة المهتمّة بكل ما يتعلق عالم الإنترنت من تقنيات وشروحات وتطوير للمواقع والمدونات

ما رأيك؟!