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

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

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

انتقل إلى لوح تحكم مدونتك،إختر "تصميم" ،ثم "تحريرHTML " ثم ضع علامة في خانة توسيع قوالب عناصر واجهة المستخدم.
قم بالبحث عن الكود التالي بالإستعانة بلوحة التحكم (CTRL+F).

]]></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'>
$(document).ready(function(){

//Larger thumbnail preview

$(&quot;ul.thumb li&quot;).hover(function() {
$(this).css({&#39;z-index&#39; : &#39;10&#39;});
$(this).find(&#39;img&#39;).addClass(&quot;hover&quot;)
.stop()
.animate({
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);

} , function() {
$(this).css({&#39;z-index&#39; : &#39;0&#39;});
$(this).find(&#39;img&#39;).removeClass(&quot;hover&quot;)
.stop()
.animate({
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
$(&quot;ul.thumb li a&quot;).click(function() {

var mainImage = $(this).attr(&quot;href&quot;); //Find Image Name
$(&quot;#main_view img&quot;).attr({ src: mainImage });

});

});<font size="0"><a href=" http://www.pergola-aluminium.org"></a></font>
</script>

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

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

<ul class="thumb">
<li><a href="رابط المعلن"><img src="http://www.m5zn.com/img/?img=57570f59ab6edac.png" alt="" /></a></li>
<li><a href="رابط المعلن"><img src="http://www.m5zn.com/img/?img=57570f59ab6edac.png" alt="" /></a></li>
</ul>

<ul class="thumb">
<li><a href="رابط المعلن"><img src="http://www.m5zn.com/img/?img=57570f59ab6edac.png" alt="" /></a></li>
<li><a href="رابط المعلن"><img src="http://www.m5zn.com/img/?img=57570f59ab6edac.png" alt="" /></a></li>
</ul>

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

روابط هذه التدوينة قابلة للنسخ واللصق
URL
HTML
BBCode