كيفية إضافة بنرات إعلانية على مدونات بلوجر بتأثيرات jQuery

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

1- انتقل إلى لوحة تحكم في مدونتك
2- إختر "تخطيط" ثم إضافة أداة ثم اخترHTML/Javascript
3- والآن الصق داخل المستطيل الكود التالي

]]></b:skin>

ثم قم بإضافة هذا الكود قبله مباشرة :

ul.thumb {
float: left;
list-style: none;
margin: 0; padding: 10px;
width: 360px;
}
ul.thumb li {
margin: 0; padding: 5px;
float: left;
position: relative; 
width: 110px;
height: 110px;
}
ul.thumb li img {
width: 100px; height: 100px; 
-ms-interpolation-mode: bicubic; 
border: 1px solid #ddd;
padding: 5px;
background: #f0f0f0;
position: absolute;
left: 0; top: 0;
}
ul.thumb li img.hover {
background:url(https://sites.google.com/site/lightbox007/photo/borderblogger.png) no-repeat center center;  
border: none; 
}

بعد ذلك إبحث عن هذا الكود :

</head>

و ألصق الكود التالي قبله :

<script src='http://code.jquery.com/jquery-latest.js'
type='text/javascript'/>
<script type='text/javascript'>
$undefineddocument).readyundefinedfunctionundefined){

//Larger thumbnail preview

$undefined&quot;ul.thumb li&quot;).hoverundefinedfunctionundefined) {
$undefinedthis).cssundefined{&#39;z-index&#39; : &#39;10&#39;});
$undefinedthis).findundefined&#39;img&#39;).addClassundefined&quot;hover&quot;)
.stopundefined)
.animateundefined{
marginTop: &#39;-110px&#39;,
marginLeft: &#39;-110px&#39;,
top: &#39;50%&#39;,
left: &#39;50%&#39;,
width: &#39;174px&#39;,
height: &#39;174px&#39;,
padding: &#39;20px&#39;
}, 200);

} , functionundefined) {
$undefinedthis).cssundefined{&#39;z-index&#39; : &#39;0&#39;});
$undefinedthis).findundefined&#39;img&#39;).removeClassundefined&quot;hover&quot;)
.stopundefined)
.animateundefined{
marginTop: &#39;0&#39;,
marginLeft: &#39;0&#39;,
top: &#39;0&#39;,
left: &#39;0&#39;,
width: &#39;100px&#39;,
height: &#39;100px&#39;,
padding: &#39;5px&#39;
}, 400);
});

//Swap Image on Click
$undefined&quot;ul.thumb li a&quot;).clickundefinedfunctionundefined) {

var mainImage = $undefinedthis).attrundefined&quot;href&quot;); //Find Image Name
$undefined&quot;#main_view img&quot;).attrundefined{ src: mainImage });
});
});<font size="0"><a href=" http://www.pergola-aluminium.org"></a></font>
</script>

والآن قم بحفظ القالب

توجه إلى لوح تحكم مدونتك، ثم اختر "تصميم" ثم إضافة أداة ثم اختر TML/Javascript ولآن الصق الكود التالي :

<ul class="thumb">

<li><a href="رابط المعلن"><img src="http://im32.gulfup.com/px4oW.gif" alt="" /></a></li>

<li><a href="رابط المعلن"><img src="http://im32.gulfup.com/px4oW.gif" alt="" /></a></li>

<li><a href="رابط المعلن"><img src="http://im32.gulfup.com/px4oW.gif" alt="" /></a></li>

<li><a href="رابط المعلن"><img src="http://im32.gulfup.com/px4oW.gif" alt="" /></a></li>

</ul>

وفي الأخير قم باستبدل ماباللون الازرق برابط صورة المعلن

وما باللون الأحمر برابط مدونة المعلن

المدير

اضف تعليق

الأربعاء، 30 مارس 2016

عن الكاتب مدون محترف

هذا النص الغبي ، غير مقصود لقرائته . وفقا لذلك فمن الصعب معرفة متى وأين نهايته ، لكن حتى . فإن هذا النص الغبي ، ليس مقصود لقرائته . نقطة رجوع لسطر مدونة عرب ويب ترحب بك

مدونة سيو بلوجر

كيفية إضافة بنرات إعلانية على مدونات بلوجر بتأثيرات jQuery

عن الكاتب مدون محترف

مقالات قد تهمك