إضافة فقاعة أداة التلميح على مدونات بلوجر( تم تصحيح اللإضافة)

عدد مشاهدات الموضوع:
السلام عليكم ورحمة الله تعالى وبركاته ،في يومنا هذا سوف نتعرف على إضافة جميلة ,ألا وهي  إضافة فقاعة أداة التلميح على مدونات بلوجر ، ،نستعمل هذه الأداة عند الحاجة إلي تلميح أو ملاحظة على صورة أو نص معين .
عند وضع مؤشر الماوس على صورة أو على رابط معين, تظهر الفقاعة  وتضم نص التلميح المراد كتابته لشرح الصورة مثلا .وللمعاينة قبل تطبيقها علي مدونتك ،توجه بمؤشر الماوس فوق هذه الصورة .
 يمكنك إختيار الصورة التي تريد وليس شرطا أن يكون بنر،وضعته فقط كمثال.
انتقل إلى لوح تحكم مدونتك،إختر "تصميم" ،ثم "تحريرhtml, ضع علامة في خانة توسيع قوالب عناصر واجهة المستخدم.قم بالبحث عن الكود التالي :
]]></b:skin>
ثم قم بوضع الكود التالي فوقه :

/*---------- bubble tooltip -----------*/       
a.tt{        
    position:relative;        
    z-index:24;        
    color:#3CA3FF;        
    font-weight:bold;        
    text-decoration:none;        
}        
a.tt span{ display: none; }
/*background:; ie hack, something must be changed in a for ie to execute it*/       
a.tt:hover{ z-index:25; color: #aaaaff; background:;}        
a.tt:hover span.tooltip{        
 display:block;        
 position:absolute;        
 top:0px; left:0;        
 padding: 15px 0 0 0;        
 width:200px;        
 color: #993300;        
 text-align: center;        
 filter: alpha(opacity:90);        
 KHTMLOpacity: 0.90;        
 MozOpacity: 0.90;        
 opacity: 0.90;        
}        
a.tt:hover span.top{        
 display: block;        
 padding: 30px 8px 0;        
 background: url(http://img132.imageshack.us/img132/4946/bubblethumb.gif)
no-repeat top;        
}        
a.tt:hover span.middle{ /* different middle bg for stretch */        
 display: block;        
 padding: 0 8px; 
 background: url(http://img571.imageshack.us/img571/2558/bubblefillerthumb1.gif)
repeat bottom;        
}        
a.tt:hover span.bottom{        
 display: block;        
 padding:3px 8px 10px;        
 color: #548912;        
 background: url(http://img132.imageshack.us/img132/4946/bubblethumb.gif)
no-repeat bottom;        
}
  ثم قم بحفظ القالب .
 نتحكم في موضع الفقاعة بالتعديل على القيم :top:0px و  left:0
والآن لتطبيق هذه الأداة على صورة ،نقوم بلصق الكود التالي في تحرير الرسائل Html مع التعديل عليه وذلك بإستبدال ما لون باللون الأحمر بالرابط الذي سوف تتوجه إليه عند الضغط على الصورة وإستبدال ما لون باللون الأخضر برابط الصورة ،وما لون بالون الأزرق بنص التلميح

<a class="tt" href="http://abu-iyad.blogspot.com" target="_blank"><img class="tt" src="https://sites.google.com/site/lightbox007/photo/abuiyadblogger.jpg" /><span class="tooltip"><span class="top"></span><span class="middle">مرحبا بكم على مدونة أبو إياد ،دروس،إضافات بلوجر وكل ما هو جديد في عالم التدوين .</span><span class="bottom"></span></span></a>
 ولتطبيق نفس العملية علي نص (كلمة أو جملة ) نستعمل هذا الكود :
<a class="tt" href="http://abu-iyad.blogspot.com" target="_blank">  مدونة أبو إياد<span class="tooltip"><span class="top"></span><span class="middle">مرحبا بكم على مدونة أبو إياد ،دروس،إضافات بلوجر وكل ما هو جديد في عالم التدوين</span><span class="bottom"></span></span></a>
مع إستبدال ما لون بالأحمر و الأخضر والأزرق
وتكون النتيجة على هذا الشكل  :
 ولأي إستفسارات المرجو ترك تعليقاتكم في أسفل الموضوع

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

  1. رائع اخى شكرا جزيلا لك

    ردحذف
  2. @odim
    لا شكر على واجب أخي وشكرا لك على المتابعة

    ردحذف
  3. عمرو5:05 ص

    هاااااااايل جدآ ياا ابو ايااد وبالتوفيق والمزيد دائمآ

    ردحذف
  4. @عمرو
    شكرا لك أخي عمرو على المتابعة

    ردحذف
  5. غير معرف3:37 م

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

    ردحذف
  6. غير معرف3:39 م

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

    ردحذف
  7. @غير معرف
    نعم أخي إستعمل هذا الكود ثم ضع كود الإضافة بين السطرين الأول والأخير
    <b:if cond='data:blog.url == data:blog.homepageUrl'>
    ضع كود الأداة هنا
    </b:if>

    ويمكنك مراجعة هذا الموضوع من هنا

    ردحذف
  8. موضوع مفيد جدا اخي ابواياد ، بارك الله فيك واتمنى لك مزيدا من النجاح والتقدم ، تحياتي لك

    ردحذف
  9. @adi arar
    الله يخليك ويبارك فيك أخي الفاضل ،أتشرف بزيارتك

    ردحذف
  10. اضافه جميله او يا ابو اياد

    منتظره جديدك

    ردحذف
  11. موضوع رائع جدا ,, بالتوفيق

    ردحذف
  12. بارك الله فيك
    http://cairo-job.blogspot.com

    ردحذف
  13. جيد ..و مميز في نفس الوقت

    فأنت طبقت الكود دون الحاجة ل جى كويرى

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

    و بالتالى بطى التحميل خاصة لأن جافا سكربت بطيئة نسبيا

    إضافة رائعة ومفيدة للكل بشكل لايصدق...

    أسال الله لك مزيدا من التوفيق والسداد !

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

    ردحذف
  15. youssef6:07 م

    السلام عليكم أخي أبو إياد المرجو أن توضح لي أكتر لأني مازلت مبتدء في هدا المجال متلا انا عندي الكود هكدا

    <![CDATA[
    اين اضعه بالضبت أما الكود التاني و التالت هل أضعهم في تحرير HTML ام في تحرير الرسائل
    المرجو الرد جزاك الله خيرا

    ردحذف
  16. youssef6:11 م

    <![CDATA

    ردحذف
  17. @youssef
    أظن أن الشرح وافي =)) ، فقط قم بالتركيز قليلا في الموضوع وإنشاء الله سوف ينجح في تطبيقها :((

    ردحذف
  18. موضوع مفيد جدا اخي ابواياد ، بارك الله فيك واتمنى لك مزيدا من النجاح والتقدم ، تحياتي لك

    ردحذف
  19. هنحط الكود فى تحرير الاتش تى ام ال فين يعنى؟
    ;))

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

    ردحذف

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

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