إضافة تبادل إعلاني بتأثير جميل jQuery

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

لنبدأ على بركة الله

المثال من مدونتي وسوف أتركه فقط لمدة أسبوع 

1 - قم بتسجيل الدخول إلى مدونتك بلوجر.
2 - من لوحة التحكم الخاصة بمدونتك توجه إلى تصميم أو قالب.
3 - قم بالبحث عن :
]]></b:skin>

أضف قبله هذا الكود :

#banners {
margin-bottom:20px;
padding-left:10px;
}
.banner1 {-webkit-transition: -webkit-transform .15s linear;
margin-left:20px;
-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);
border:5px solid #fff;
-webkit-transform: rotate(-12deg);
-moz-transform: rotate(-12deg);
}
.banner1:hover {
-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.5);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.5);
-webkit-transform: rotate(-1deg);
-moz-transform: rotate(-1deg);
}
.banner2 {-webkit-transition: -webkit-transform .15s linear;
-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);
border:5px solid #fff;
-webkit-transform: rotate(+2deg);
-moz-transform: rotate(+2deg);
}
.banner2:hover {
-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.5);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.5);
-webkit-transform: rotate(-1deg);
-moz-transform: rotate(-1deg);
}
.banner3 {-webkit-transition: -webkit-transform .15s linear;
margin-left:20px;
margin-bottom:20px;
-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);
border:5px solid #fff;
-webkit-transform: rotate(+12deg);
-moz-transform: rotate(+12deg);
}
.banner3:hover {
-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.5);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.5);
-webkit-transform: rotate(-1deg);
-moz-transform: rotate(-1deg);
}
.banner4 {-webkit-transition: -webkit-transform .15s linear;
-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);
border:5px solid #fff;
-webkit-transform: rotate(-12deg);
-moz-transform: rotate(-12deg);
}
.banner4:hover {
-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.5);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.5);
-webkit-transform: rotate(-1deg);
-moz-transform: rotate(-1deg);
}

4 - الأن قم بحفظ القالب وتوجه بعدها إلى تصميم أو تخطيط.

5 - ثم إضافة أدة.
6 - إختر HTML/JavaScript .
7 - بعدها في الحقل الأول ضع إسم الأداة مثلا تبادل إعلاني..... ثم ضع في الحقل الكبير هذا الكود :

<div id='banners'>
<a href=" هنا ضع الرابط للإعلان رقم 1 " target="_blank">
<img class="banner1" src="http://lh6.ggpht.com/_PhBMR7XaHEs/TEJTuhWpHnI/AAAAAAAABis/-NU7uweLofQ/%28F1%204%28%27%28JC_thumb%5B1%5D.png" width="105" border="0" height="105"></img></a>
<a href=" هنا ضع الرابط للإعلان رقم 2 " target="_blank">
<img class="banner2" src="http://lh6.ggpht.com/_PhBMR7XaHEs/TEJTuhWpHnI/AAAAAAAABis/-NU7uweLofQ/%28F1%204%28%27%28JC_thumb%5B1%5D.png" width="125" border="0" height="125"></img></a>
<a href="هنا ضع الرابط للإعلان رقم 3" target="_blank">
<img class="banner3" src="http://lh6.ggpht.com/_PhBMR7XaHEs/TEJTuhWpHnI/AAAAAAAABis/-NU7uweLofQ/%28F1%204%28%27%28JC_thumb%5B1%5D.png" width="70" border="0" height="70"></img></a>
<a href=" هنا ضع الرابط للإعلان رقم 4 " target="_blank">
<img class="banner4" src="http://lh6.ggpht.com/_PhBMR7XaHEs/TEJTuhWpHnI/AAAAAAAABis/-NU7uweLofQ/%28F1%204%28%27%28JC_thumb%5B1%5D.png" width="110" border="0" height="110"></img></a>
</div>

مع تغيير ما هو بالأحمر بما يناسبك