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