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

السلام عليكم ورحمة الله تعالى وبركاته
أهلا وسهلا بكم من جديد في تدوينة جديدة ومع إضافة جديدة لمدونات البلوجر وهي
لإضافة التبادل الإعلاني بتأثير جميل بتقنية Css3 وتشمل الإضافة أربع أماكن لعرض التبادل الإعلاني مع مدونتك تتحرك بطريقة إحترافية.
و قبل البدء طبعا لا أحتاج أن أذكر كل مرة بضرورة حفظ نسخة إحتياطية من القالب قبل أي تعديل أو التجريب أولا في مدونة تجريبية و من ثم الإقدام على التعديلات بالمدونة الشخصية إبقو مع الشرح.
  لنبدأ على بركة الله  
1 - قم بتسجيل الدخول إلى مدونتك بلوجر.
2 - من لوحة التحكم الخاصة بمدونتك توجه إلى تصميم أو قالب.
3 - قم بالبحث عن :
أضف قبله هذا الكود :

  

#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>

مع تغيير ما هو موضح بالالوان بما يناسبك
ومبروك عليك الاضافة الرائعة