عبدالله غانم
اليوم موضوعنا عن كود التبادل الإعلاني بتقنية 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 " 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>
قم بتغيير ما باللون الاحمر برابط الموقع
قم بتغيير ما باللون الازرق برابط البنر او الصورة
بكده نكون انتهينا من شرح الكود
ليست هناك تعليقات:
إرسال تعليق