كيف تظيف بنرات اعلانانية بتأثيرات رائعة على مدونة بلوجر ؟

كيف تظيف بنرات اعلانانية بتأثيرات رائعة على مدونة بلوجر ؟

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

});

});
</script>

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

<ul class="thumb">
<li><a href=" رابط المعلن هنا "><img src="https://sites.google.com/site/lightbox007/photo/abuiyadblogger.jpg" alt="" /></a></li>
<li><a href="رابط المعلن هنا"><img src="https://sites.google.com/site/lightbox007/photo/abuiyadblogger.jpg" alt="" /></a></li>
<li><a href="رابط المعلن هنا "><img src="https://sites.google.com/site/lightbox007/photo/abuiyadblogger.jpg" alt="" /></a></li>
<li><a href="رابط المعلن هنا"><img src="https://sites.google.com/site/lightbox007/photo/abuiyadblogger.jpg" alt="" /></a></li>
</ul>

مع إدخال رابط المعلن مكان اللون الاحمر ورابط البنر الخاص به مكان الرابط الأزرق

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

لا تنسوا الاشتراك 

اعلان