الاثنين، 10 أكتوبر، 2011

كيف تظيف بنرات اعلانانية بتأثيرات 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 });

});

});
</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>






















مع إدخال رابط المعلن مكان اللون الاحمر ورابط البنر الخاص به مكان الرابط الأزرق في إنتظار تعليقاتكم أتمنى أن تنال إعجابكم وإلى اللقاء في درس اخر مع تحياتي للاخ ابو اياد  ،،،

25 التعليقات:

محمد الجرايحى يقول...

جزاك الله خيراً

خالد محمد (ابوخلود) يقول...

الله يعطيك العافية اخي محمد واي خدمة نحن مستعدون

blog0look0you يقول...

موضوع رائع ومميز جدا بس ازاى اكتب على البنر محتاج برنامج فوتشوب .

وارجوا منك ان ترى مدوانتى وتقوالى رايك ايه بصراحة
عشان اعلجها وشكرا .

http://furniture7shopping.blogspot.com/

خالد محمد (ابوخلود) يقول...

اخي لقد دخلت على مدونتك فهي جميلة تتكلم عن الموبيليا ولاثاث فانت محتاج فوتوشووووب بعد قم بحفظ البنرات على اي موقع ثم قم بحفظ رابط البنرات حسب الخطوات السابقة

محمد عزت يقول...

اشكرك اخى الكريم خالد
واتمنى ليك التوافيق واتمنى اخى خالد التوصل الدائم لاستفادة من ارائك الرائعة والمتميزة .

انا من مصر وبالتحديد محافظة دمياط

اخبار سياسية يقول...

شكرا على الملعومات القيمة

غير معرف يقول...

لتبادل النقرات للادسنس هذه العملية للجادين فقط الانضمام الى هذا الجروب ارجو دعوة اصدقائكم الذين لذيهم حساب ايضا في ادسنس ليعم الربح على الجميع كلما كان العدد كبير كان الربح اكثر هذا رابط الجروب http://www.facebook.com/groups/clik.ads

تطبيقات يقول...

مشكوووووووووووووووور

أسامة يقول...

جازاك الله خيرا

مدونتي : http://kanoundjadid.blogspot.com/

أخبار - أهرام يقول...

شكرا شكرا شكرا جداا على الموضوع الرائع

Umzug Wien يقول...

تسلم على المقال

رجال حول الرسول يقول...

بارك الله فيك وجزاك الله خيراً
http://rijaaal.blogspot.com

Wohnungsräumung يقول...

thanx

أخبار اليوم يقول...

تسلم ايديك على الموضوع

توب موفيز يقول...

شكرا ياباشا على المعلومة

خالد محمد (ابوخلود) يقول...

الله يسلمكم ويعطيكم العافية يارب واي استفسار نحن مستعدووووووووون وقريبا اتنظرو مواضيع جديدة ان شاء الله فدعولي ولوالدي

خلفان الحجي يقول...

مدونة مفيدة أخي
بارك الله فيك ومتابع جديدك

دردشة يقول...

مشكوور والله يعطيك العافيه

توب موفيز يقول...

رااااائع

أخبار اليوم يقول...

موضوع مميز

LAMAR يقول...

اشكرك اخي على الموضوع ولكن الكود الثاني فيه مشكلة

LAMAR يقول...

اخي زبطت الطريقة ولكن ظهرت على الاعلانات مدونة ابو اياد

خالد محمد (ابوخلود) يقول...

اخي LAMAR قم بتغيير رابط الكود باللون الازرق الى رابط صورك التي وضعتها في اي موقع من مواقع حفظ الصور، واللون الاحمر في الكود يدل على رابط اي مدونة .
مثلا اذهب الى الموقع التالي :
http://www.0zz0.com/
طبعا هذا الموقع خاص برفع الصور وعند رفع اي صورة فيه يعطيك رابط لها، اذاً هنا قم يتصميم صورة بنر خاص بك ثم قم برفعها الى هذا الموقع ثم انسخ رابط البنر ولصقه مكان اللون الازرف الموجود في الكود الاخير

خالد محمد (ابوخلود) يقول...

اسف على الخطاء الاملائي في التعليق الرد على LAMAR قم بتصميم بنر خاص بك ثم قم برفعه الى هذا الموقع :
http://www.0zz0.com/
بعد الرفع يعطيك الموقع رابط للبنر ( الصورة ) انسخ الرابط من الموقع ثم قم بلصقة مكان الرابط الذي باللون الازرق الوجود في الكود الاخير . بالنسبة للكود باللون الاحمر هو عبار عن رابط مدونتك او رابط مدونة اي صديق آخر يريد تبادل اعلاني معك مع ارسال رابط صورته

غير معرف يقول...

جزاك الله خيرا
www.theprocomputer.blogspot.com