إشترك في القائمة البريدية.

إضافة تبادل إعلاني بتأثير جميل 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>

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

إشترك في مدونتنا وتوصل بأخر المواضيع.

إشترك في القائمة البريدية

16 تعليق

غير معرف
2 يوليو 2012 7:44 ص

ممكن اعمل معكم تبادل اعلاني ؟؟

14 أغسطس 2012 5:29 ص

طيب ورا مانزلتوو مين يعمل معي تبادل اعلاني ؟؟

2 سبتمبر 2012 1:48 م

شكراا على الشرح الرائع
http://abda3design.blogspot.com/

5 سبتمبر 2012 10:35 ص

لعمل تبادل اعلاني في موقع تبادل الخبرات في مجال الحاسب مرحبا بالجميع
http://www.mycomputer-now.com/

20 سبتمبر 2012 9:31 ص

شكرا موضوع رائع
electro-media.blogspot.com

25 سبتمبر 2012 8:45 ص

http://hkawymisrya.blogspot.com/
شكرا لك

2 أكتوبر 2012 2:50 م

شكرا لكم

6 أكتوبر 2012 7:37 ص

اتمنى التبادل الاعلانى مع مدونتى
http://onlinewrestlingdyalcom.blogspot.com/

1 نوفمبر 2012 4:33 م

مشكور علي الشرح

3 نوفمبر 2012 6:12 ص

من يريد التبادل الإعلاني
http://blog-alaa.blogspot.com

9 نوفمبر 2012 10:04 ص

اريد تبادل اعلاني على مدونتي المشهورة جدا عاوز ازيد شهرتها اكثر
http://tourism-int.blogspot.com/

18 نوفمبر 2012 3:09 م

اريد تبادل اعلاني

http://top-styless.blogspot.com

19 نوفمبر 2012 1:49 م

جميل جدا ، ولكن كيف أضيف صورة مخصصة سواء للموقع المعلن عنه أو من تصميمي ؟
بارك الله فيك.

9 ديسمبر 2012 6:13 م

هل هناك امكانيه شرح كيفية تضع أعلانات ادسنس بجانب بعضها

http://www.3rab-tech.com

21 ديسمبر 2012 8:49 ص

انا بدي اعمل معكم تبادل اعلاني
مدونتي اهي http://seleect.blogspot.com/

15 يناير 2013 4:48 م

تحياتي
http://www.chahidna.com

إرسال تعليق

يتم التشغيل بواسطة Blogger.
 

أضف موقعك أو مدونتك إلى جوجل شرح بالصور

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

إقرأ الموضوع

أضف مدونتك إلى 40 دليل لكسب المزيد من الترافيك

نقدم لكم في هذا الموضوع مجموعة من المواقع ذات الترافيك العالي لإضافة مدونتك فيها وتحسين تقييمك...

إقرأ المزيد

شرح كامل لإضافة تعليقات الفايسبوك إلى البلوجر

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

إقرأ المزيد

شرح إضافة ترقيم الصفحات لمدونات بلوجر

نتطرق في هذا الموضوع إلى شرح لطريقة إضافة ترقيم الصفحات لدى مدونات البلوجر ...

إقرأ المزيد

تحميل سكربت ووردبريس 3.3.1

حمل أحدث وأخر نسخة من السكربت الرائع ووردبريس مجانا...

إقرأ المزيد

شرح عمل مدونة بلوجر بالفيديو

شرح كامل وبالفيديو لطريقة عمل مدونة بلوجر رفقة الواجهة الجديدة للبلوجر...

Read More

إضافات