كود التبادل الاعلاني بتاثير jQuery لبلوجر

السلام عليكم

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

طريقة الاضافة

- قم بتسجيل الدخول إلى مدونتك بلوجر.

 - من لوحة التحكم الخاصة بمدونتك توجه إلى تصميم أو قالب.

- قم بالبحث عن :

]]></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); }

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

 - ثم إضافة أدة.

 - إختر HTML/JavaScript .

- ثم اضف الكود التالي;

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

غيرما باللون الازرق بما يناسبك ثم اضغط حفظ 

اترك تعليقك في الاسفل 

منشورة في: اضافات وادوات بلوجر, بلوجر, دروس وشروحات بلوجر, jQuery