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

بسم الله الرحمن الرحيم

مرحبا بكم من جديد في مدونة مسطرة ... التبادل الاعلاني اصبح شئ مهم جدا بالنسبة للمدونات او المواقع لتخفيض ترتيب اليكسا و الحصول علي زوار و متابعين جدد و ايضا لكسب باك لينكس اكثر و لها بالتاكيد فوائد كثيرة

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

1- سجل الدخول علي بلوجر

2- اذهب الي لوحة التحكم ثم اذهب إلى تصميم أو قالب.

3-ابحث عن كود ]]></b:skin>

4- أضف قبله هذا الكود مباشرة :

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

}

5- قم بحفظ القالب

6- توجه إلى تخطيط ثم إضافة أدة

7- إختر HTML/JavaScript

8- ثم قم بوضع هذا الكود :

<div id='banners'>

<a href=" هنا ضع الرابط للإعلان رقم 1 " rel="nofollow" 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 " rel="nofollow" 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" rel="nofollow" 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 " rel="nofollow" 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>

9- قم بتغيير ما باللون الاحمر برابط الموقع

10- قم بتغيير ما باللون الازرق برابط البنر او الصورة

بكده نكون انتهينا من شرح الكود ... و السلام عليكم و رحمة الله و بركاته

شارك هذا المنشور