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

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

السلام عليكم إخواني أخواتي الكرام في هذه الفقرة سوف نتعلم كيفية إضافة بنرات إعلانية على مدونات بلوجر بتأثيرات 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>

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

انتقل إلى لوح تحكم مدونتك،إختر "تصميم" ثم إضافة أداة ثم اختر HTML/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>

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

و بهذا نكون قد ركبنا هذا الصندوق في المدونة و بالتوفيق للجميع ,

اضافات بلوجر, أيقونات, دروس بلوجر

الاثنين، 13 أبريل 2015

معلومات التدوينه !

معلومات الكاتب ..

Waleed Almatari

وليد المطري: بلدي هو اليمن، اهتم بتقنيات وتطوير وتحسين اداء المدونات العربية,ليجد المستخدم العربي كل ما يحتاجه لبدء التدوين من الصفر الى الحتراف.

اتصل بنا

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

كيفية اضافة هذه القطعه الى مدونتك

و بهذا نكون قد ركبنا هذا الصندوق في المدونة و بالتوفيق للجميع ,

معلومات التدوينه !

معلومات الكاتب ..

Waleed Almatari

ادعمنا وشارك الفائده ..

شاهد ايضا :

اترك تعليق وناقشنا برأيك ...

المشاركات الشائعة

اقسام المدونة