الدرس 4 : اضافة التبادل الاعلاني لمدونتك البلوجر

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

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

شرح الدرس :

تابع المراحل البسيطة التالية :

توجه إلى » لوحة التحكم الخاصة بمدونتك

 ثم » التخطيط

 ثم » إضافة أداة و من النافذة المنبثقة اختر أداة HTML/Javascript

الآن قم بنسخ الكود مع اضافة بعض التغييرات ثم لصقه داخل الاداة .

التغييرات : 

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

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

<!--CSS Hover Effects To 125x125 Advertisement Banners-->

<style>
 

.Mstaphabouh-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=<!--CSS Hover Effects To 125x125 Advertisement Banners-->