-->

زيادة متابعين تيك توككتابيعروض المالديفسؤال وجوابعروض العثيم

إضافة بنرات إعلانية بتأثيرات 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="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>
مع إدخال رابط المعلن ورابط البنر الخاص به مكان الرابط الأزرق
في إنتظار تعليقاتكم أتمنى أن تنال إعجابكم وإلى اللقاء 

هناك 66 تعليقًا:

  1. السلام عليكم ورحمة الله


    رائع جداً

    بارك الله فيك جاري التطبيق غداً << نعسان

    ردحذف
  2. شكرا أخي أبو اياد على الشرح الوافي

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

    ردحذف
  3. جميل جدا اخي الكريم
    لكن هل من الممكن ان تبطئ التصفح هذه الخاصية

    ردحذف
  4. @kader
    لا يا أخي الكريم ليس لها أي تأثير على تصفح امدونة ، أنا شخصيا أستعملها في مدونتي ولم ألاحظ أي فرق في سرعة التصفح وشكرا لك ولجميع من ترك تعليقه هنا

    ردحذف
  5. باركالله فيك
    اخي الكريم\ ابو اياد ياريت تشرح لي كيف توزع اعلانات قوقل ادسنس ما شاء الله انت اعلانات قوقل ادسنس مجود في كل مكان في مدونتك وشكر

    ردحذف
  6. @redha
    أخي الكريم سبق وأن شرحت كيفية إدراج إعلانات ادسنس داخل المواضيع من هنا

    ردحذف
  7. مواضيعك جميلة جدا ومفيده ي ابو اياد
    بارك الله فيك
    وياريت
    تعمل شرح لكيفية وضع صورة
    مثل التعليقات
    اترك بصمتك ..

    وحركة صندوق التعليقات كما في مدونتك
    وشكرا جزيلاً لكرمك
    بالتوفيق

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

    ردحذف
  9. عطاء1:18 ص

    إضافة رائعة وجميلة ..

    شكرا لأبداااااعك ..

    ردحذف
  10. أزال المؤلف هذا التعليق.

    ردحذف
  11. بارك الله فيك اخوي ابو اياد على الشرح الرائع ولكن واجهتني مشكلة لما افتها ما جات في االوسط جات يسار كيف اخليها في الوسط

    ردحذف
  12. فكرة رائعة منك اخي الكريم و هي استخدام هته مكتبة
    الjQuery لعرض اعلاناتك بصورة مميزة
    حتما سترافقها ضغطة من طرف زائرك *_^
    لكن مادا لو غيرت تلك حواف الصور المائية ؟
    أعدك أنه اي اطراء جديد في الكود سيتم اخبارك..
    تحياتي

    ردحذف
  13. @سلطان

    أخي الكريم ،يمكنك التعديل في الكود الأول على عرض الأداة من كلمةwidht=360 التي توجد في السطر الخامس قم نقصان القيمة 360 إلي 320 أو 300 حتى يتم تمركز لاأداة في الوسط بالتوفيق

    ردحذف
  14. @khaled
    شكرا لك أخي الغالي خالد على تفاعلك ،فأنت أدرى مني بمكتبة jQuery, لدى سوف أنتظر إبداعك

    ردحذف
  15. ابو اياد ممكن لو سمحت تكتبلنا موضوع تشرح فيه ايه هى مكتبه jQuery

    عشان انا شفت مواضيع كتيره اوي بتتكلم عنها بس مش فاهمه ايه هي بالظبط

    ردحذف
  16. @Dr/ walaa salah
    إنشاء الله سوف أقوم بكتابة موضوع خاص بمكتبة jQuery في الأيام القادمة

    ردحذف
  17. شكرا لك ابو اياد

    ردحذف
  18. {مضان كريم

    وكل عام وانتم بخير :)

    ردحذف
  19. @اقصوصه
    رمضان كريم أختي أقصوصة

    ردحذف
  20. أزال المؤلف هذا التعليق.

    ردحذف
  21. أخي الكريم أبو أياد
    السلام عليكم ورحمة الله وبركاتة
    مشكور جدا على المجهود والمدونة الرائعة جدا جدا لكن لدي ملاحضة صغيرة على نفس الموضوع ؟
    ياريت لو تفيدني بالطريقة التي أعمل بها البنارات الأعلانية بالعرض وليس 4*4 ؟
    أي كما هو موجود عندك أعلى المدونة .
    مع الشكر الجزيل

    ردحذف
  22. @Hareth Arabiyat

    قم فقط بالتعديل على عرض الأداة من خلال الكود الأول وذلك بتغيير القيمة width: 360px إلى قيمة أعلى . مثلا تضع width: 960px

    ردحذف
  23. @أبو إياد

    مشكوووووووور جدا أخي الكريم
    ومشكور أيضا على سرعة الأستجابة

    ردحذف
  24. يعطيك كل العافيه على دروسك الرائعه

    دعواتي لك بالتوفيق المستمر ورضى الرحمن

    ردحذف
  25. @أميره في النساء
    بارك الله فيك على كلامك الطيب،أتمنى لك الإستفادة إن شاء الله يوفقني وأقدر أفيد كل الناس،تحياتي

    ردحذف
  26. يعطيك ألف عافيه
    لي فتره ابحث عن الطريقه

    جزاك الله خير

    ردحذف
  27. بارك الله فيك عالمجهود الرائع

    ولكن واجهتني مشكلة بعد ما وضعت الاكواد وكلة تمام

    الاعلانات تظهر صف واحد بالطول وليس عالجانبين

    ردحذف
  28. غير معرف5:51 م

    والله كلمة مبع قليل في حقك يابو اياد

    تعجر الكلمات عن الوفاء بحقك

    الف شكر على ماتقدمه من جهد

    بارك الله فيك

    اخيك الحضرمي عضو جديد في منتديات عرب بلوجر

    وبالتوفيق وجزاك الله خير

    ردحذف
  29. السلام عليكم
    أخوي أبو إياد .. الصراحه انت كل يوم تثبت أن خبرتك متقدمه جداا

    الله يسعدك دنيا واخره ..
    أنا عملت زي ما شرحت بالملي الواحد
    ولاكن انا اريد ان اضعها بدون تكبير يعني تجلس زي ماهي ويكون
    مقاس الاعلان 125*125

    يالبيت تفيدني ..
    أخوك حمد ..

    ردحذف
  30. أخوي أبو إياد
    عرف كيف اسويها
    يعطيك العافيه ..
    اسفين على الازعاج

    شايف الفرق في الوقت بين الرد هذا والي قبله
    10 دقايق .. وقدرت اعرف فيها كيف اسوي
    مشكور ثاني مرة ^_^

    ردحذف
  31. شكرا اخي لقد استعملت الكود والحمد لله نجح معي

    ولكن ظهور نجمة قبل الصور ارجوا كيفية نزع النجمة من قائمة التبادل الاعلاني فقط
    تفضل لترى المشكلة
    http://bigffish.blogspot.com/

    ردحذف
  32. اخي ابو اياد شكرا على الاضافة
    ولكن فيها مشكلة مع انترنت اكسبلورر 9

    لا تظهر بشكل منسق ابدا

    تحياتي وشكرا لك

    ردحذف
  33. ابو ايد من فضلك في نقطة محيراني في الاعلان
    وهي
    انا صممت البنر علي الفوتوشوب علي جهازي كيف اعمل من البنر رابط لكي في كود الاعلان

    ورابط المعلن هو رابط موقع صاحب الاعلان والا رابط اية
    واشكرك

    ردحذف
  34. @TOP ART
    السلام عليكم ورحمة الله ،أخي الكريم هناك العديد من المواقع المتخصصة في تحميل الصور وعمل رابط لها ،إلا أنني أنصحك بأن تقوم بعمل رابط للصور التي تريد على مدونة أخرى تقوم بإنشائها ،تكون خاصة بالصور ،لذلك قم بإنشاء مدونة جديدة وسمها مثلنا مدونة الصور ثم من رسالة جديدة قم بتحميل الصورة التي تريد ثم أنشر الرسالة ،وعند فتحك للرسالة إضغط على الصورة ثم قم بنسخ رابطها من على المتصفح ،أما بالنسبة لسؤالك الثاني ،فرابط المعلن يعني رابط المدونة أو الموقع الذي تريد عمل تبادل إعلاني معه.
    بالتوفيق

    ردحذف
  35. يا ابو اياد من فضلك يظهر عندى ثلاثة بنرات فقط و ليس اربعة افدنى بالحل لو تكرمت حتى تكمل جميلك

    ردحذف
  36. غير معرف3:25 م

    اخي ابو اياد...
    كيف اقدر اسوي اعلان خاص بي
    سويت الي قلت وجاني اعلن مدونتك انت
    طبعا حخليه لانه جميلك على راسي من فووووووووق^_^
    لكن اتمنى اسوي اعلان خاص بالمدونه
    وكمان كيف ارتب الاعلانات لانها جات بطريقه متكركبه
    هذا رابط مدونتي اتمنى تشوفها وتساعدني تقولي ايش ينقصها
    http://iu2pm-only.blogspot.com/

    ردحذف
  37. إضافة أكثر من رائعة
    شكرا لك

    ردحذف
  38. جزاك الله خير


    أستاذي كم مقاس النبرات

    أقصد الصورة كم مقاسها

    ردحذف
  39. شكرا على الموضوع الرائع يا ابو اياد
    عندى استفسار يا ريت تساعدنى
    لو حجم الاعلان هيكون 500*80 مثلا اغير ايه فى الكود
    علما انى جربت تغيير width: 110px;
    height: 110px
    الى width: 500px;
    height: 80px
    و لكن لم يحدث اى تاثير
    و بالنسبة لحجم الاعلان بعد وقوف الماوس عليه هل يمكن تعديله ايضا
    اسف عالاطالة و منتظر ردك يا ابو اياد

    شبكة ارباح نت http://www.arba7.org/

    ردحذف
  40. شكرا يا ابو اياد
    http://el-habibe.blogspot.com/

    ردحذف
  41. رائعععععععععععععععع بس عندى حاجة عايز اكبر المساحة واخليها اعلان واحد لو سمحت ارجو الرد السريع

    ردحذف
  42. السلام عليكم بارك الله فيك
    شرح ممتاز تم طبيقه


    دليل المرسى لمدونات بلوجر
    http://dir-b.blogspot.com/

    ردحذف
  43. غير معرف5:07 م

    b-(

    ردحذف
  44. شكرا لك على المجهود

    ردحذف
  45. روعــــــــــــــــه
    (ســــان ســــوفت)
    http://s7nsoft.blogspot.com

    ردحذف
  46. Thnx
    http://facebook-l1.blogspot.com

    ردحذف
  47. هل بالامكان في التبادل الاعلاني


    هذه المدونه

    http://updatemn.blogspot.com

    ردحذف
  48. شكرا جدا على المعلومة القيمة دى الف شكر

    ردحذف
  49. الله يفتح عليك اعجبتني مدونتك كثيرا
    http//seo-dz.blogspot.com

    ردحذف
  50. جزاك الله خيرا أخي
    لكن كيف يمكنني الربح من خلال نشر هذه الإعلانات وهي غير قانونية

    ردحذف
  51. شكرا على موضوع الرائع
    http://tatarxwar.blogspot.com/

    ردحذف
  52. شكراا اخى ابو اياد على الموضوع لاكن لا اعرف رابط المعلن ممكن
    الشرح

    ردحذف
  53. شكراا لك يا اخى ابو اياد
    ممكن ايميل حضرتك على الياهو
    او جوجل وشكراا ممكن تشرفنى
    فى مدونتى http://lamahelbasher.blogspot.com/

    ردحذف
  54. موضوعاتك هايلة ربنا يخليك لينا
    http://aflaco.blogspot.com/

    ردحذف
  55. شنو البنر

    ردحذف
  56. http://www6.0zz0.com/2013/07/17/00/785728826.gif

    http://www.kuwaityiat.com

    منتديات كويتيات النسائية

    ردحذف
  57. غير معرف3:29 م

    أبدعت يا صديقي )):

    ردحذف
  58. غير معرف11:37 م

    شكرا جدا على الخدمات الهايلة
    http://blogsoftyware.blogspot.com/

    ردحذف
  59. هل التبادل مع الأسرة الشامل
    النص : قنوات الفضائية
    الرابط : http://alossra.com
    روابط الى موقعك بجوج 1مليون و 200ألف
    الموقع مقسم بجوجل

    ادا كنت موافق اعلمني بالتوفيق

    ردحذف
  60. شكرا لك اخي

    ردحذف

  61. جامعة المدينة العالمية
    http://www.mediu.edu.my/ar/
    المكتبة الرقمية
    http://dlibrary.mediu.edu.my/

    تمثل المكتبة الرقمية لجامعة المدينة العالمية من أبرز الصور الداعمة للبحث العلمي للدارسين والمتخصصين والباحثين في شتى فروع المعرفة؛ حيث تضم أكثر من 40000 ألف مرجع، تغطي كافة التخصصات الأكاديمية، وتقوم بالتحديث المستمر لهذا المحتوى؛ مما يحقق تراكمًا معرفيًا ضخمًا على المدى البعيد.
    الرؤية:
    إتاحة قاعدة عريضة من المعلومات والبحوث العلمية المسموعة والمقروءة لخدمة الطلاب والباحثين المعتزين بالقيم الإسلامية القادرين على مواجهة التحديات، والمشاركين في نهضة المجتمعات.
    الرسالة:
    تقديم الخدمات المكتبية الرقمية والمصورة والمسموعة المتكاملة.
    الهدف من المكتبة الرقمية:
    1. نشر الرصيد العلمي في سائر فنون العلم والمعرفة وتعميمه بأسلوب يحقق الفائدة العلمية المرجوة.
    2. توظيف التقنية الحديثة والاستفادة القصوى ممّا تُتيحه من إمكانات هائلة في مجال المكتبات وبالأخص الشبكة العالمية للمعلومات “الإنترنت”.
    3. خدمة الدارسين والباحثين في شتّى بقاع الأرض بما يُوفِّر عليهم الجهد والوقت في التصفّح والعرْض والبحث بطريقة عرْض تتناسب مع المعايير العالمية للمكتبات.
    4. التعاون والمشاركة والتسويق المتبادل للموارد المكتبية مع الجهات المختصة.
    موقع المكتبة الرقمية
    http://dlibrary.mediu.edu.my/

    ردحذف
  62. أشرف محمد عبد اللطيف6:28 م

    السلام عليكم ورحمة الله وبركاته

    يسعدنا بداية أن نهديكم أصالة عن أنفسنا، ونيابة عن جامعة المدينة العالمية

    [MEDIU] أرق التحية وأطيب الأمنيات لكم بدوام التقدم والإزدهار، مقرونة

    بصادق الدعوات لكم بالمزيد من التوفيق والتطور والنماء.

     

    جامعة المدينة العالمية [MEDIU] ماليزيا:

     

    "جامعة المدينة العالمية [MEDIU] ماليزيا" هي إحدى الجامعات الرائدة في دولة

    ماليزيا، والتي امتازت بالتفوق والتميز في مجالات التقنية والتعليم العالي، و

    "جامعة المدينة العالمية [MEDIU]" هي جامعة متعددة الثقافات والمجالات

    الدراسية ويقع مقرها الإداري الرئيسى في مدينة شاه علم بماليزيا ، وإليكم تاريخ

    موجز:

    1.    تأسست "جامعة المدينة العالمية [MEDIU]" مطلع عام 2004م بالمدينة

    المنورة.

    2.    في تاريخ 19/يوليو/ 2006م حصلت الجامعة على دعوة من وزارة التعليم

    العالي الماليزية لإنشاء مركز الجامعة بدولة ماليزيا .

    3.    بتاريخ 20/يوليو/2007م، حصلت الجامعة على الترخيص الكامل من وزارة التعليم العالي

    الماليزية لتكون أول جامعة عالمية ماليزية تنتهج منهجي التعليم - نظام التعليم المباشر في المقر

    الجامعي بماليزيا - نظام التعليم عن بعد (عبر التعليم الالكتروني) وتستهدف الطلاب من شتى

    أنحاء العالم.

    4.    في مطلع شهر فبراير من العام 2008م بدأت الجامعة أعمال التشغيل الكامل

    وإستقبال الطلاب .

    5.    إلتحق بالجامعة إلى مطلع العام 2009م زهاء [1500] طالب وطالبة من دول

    مختلفة، في حين زاد عدد طلبات الإلتحاق المقدمة إلى الجامعة عن [3000] طلب

    إلتحاق.

    6.    اوائل /2009 م.  طرحت الجامعة اكثر من (24)برنامجا أكاديميا معتمدا من

    قبل هيئة الاعتماد الأكاديمي ووزارة التعليم العالي الماليزية في كلياتها, واكثر من

    (34) دورة معتمدة في اللغتين العربية والإنجليزية بمركز اللغات .

    7.    أوائل 2009 م.  تنوعت مستويات البرامج الدراسية في الجامعة لتشمل إيجاد

    مراحل : المستوى التمهيدي للمرحلة ماقبل الجامعية , الدبلوم , درجة البكالوريوس

    ، الدراسات العليا , دورات التأهيل اللغوي .

    8.    أواسط 2009 م.  بلغ عدد الطلبة الذين تم تسجيلهم في الجامعة اكثر من

    (4701) طالب وطالبة من اكثر من ( 40 ) جنسية حول العالم .

    العالمية  [MEDIU] بنجاح التفتيش المؤسسي الذي عقدته وزارة التعليم العالي

    9.    الربع الثالث لسنة 2009 م.   اجتازت جامعة المدينة

    الماليزية للتأكد من الجودة الأكاديمية والإدارية للجامعة .

    10. نهاية عام 2009 م.   زاد عدد طلبات الإلتحاق الوارده الى الجامعه عن (

    6508 ) طلب من اكثر من (60) دولة حول العالم , فيما زاد عدد الطلبة المسجلين

    في الجامعة عن ( 2482 ) .

    11. نهاية عام 2009 م.   انتهت الجامعة من تقديم (10) برامج دراسية جديدة

    لإعتمادها من قبل هيئة الإعتماد الماليزي في مراحل الدراسات العليا .

    12. نهاية عام 2009 م.    بدأت جامعة المدينة العالمية الاجراءات التأسيسية

    للبدء بالتعليم الجامعي المباشر في تخصصات علمية وتطبيقية جديدة شملت علوم

    الحاسب الآلي , والعلوم المالية والإدارية , والهندسة والتي تعتزم أن يتم البدء بها

    منتصف العام 2010 م .

    13. أوائل عام 2010 م.   زاد عدد الطلبة المنتسبين في الجامعة الى (3057 )

    طالب من مختلف دول العالم  , من بداية موسم 2010 .

    14. نهاية عام 2010 م.    بلغ عدد طلبات الإلتحاق الواردة الى الجامعة لنظام

    التعليم المباشر قرابة (511) بلغ عدد المسجلين أكثر من (154) طالباً .

    15. أوائل عام 2011 م.    زاد عدد طلبات الإلتحاق الواردة إلى الجامعة لنظام

    التعليم المباشر قرابة (2312) وبلغ عدد المسجلين أكثر من (362) .

    16. أوائل عام2011 م.   إدراج  برامج جامعة المدينة العالمية الحاصلة على

    الإعتماد الأكاديمي الكامل لأربعة برامج دراسات عليا في كلية العلوم الاسلامية 

    ضمن قائمة المؤهلات المعترف بها من قبل هيئة الخدمة المدنية بماليزيا .

    17. نهاية عام 2011 م.  تم تخريج الدفعه الأولى من طلبة جامعة المدينة العالمية

    في مرحلة برامج الماجستير والبكالوريوس وعددهم (84) طالبا وطالبة لدرجة

    البكالوريوس, و(27) طالبا وطلبة  لدرجة الماجستير .

    ردحذف

مدونة أبو إياد تصميم بلوجرام جميع الحقوق محفوظة 2023

اعلان مخفى فى الرئيسية