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

عدد مشاهدات الموضوع:

السلام عليكم ورحمة الله تعالى وبركاته ،في يومنا هذا سوف نتعرف على إضافة جميلة ,ألا وهي  إضافة فقاعة أداة التلميح على مدونات بلوجر ، ،نستعمل هذه الأداة عند الحاجة إلي تلميح أو ملاحظة على صورة أو نص معين .
عند وضع مؤشر الماوس على صورة أو على رابط معين, تظهر الفقاعة  وتضم نص التلميح المراد كتابته لشرح الصورة مثلا .وللمعاينة قبل تطبيقها علي مدونتك ،توجه بمؤشر الماوس فوق هذه الصورة .

مرحبا بكم على مدونة أبو إياد ،دروس،إضافات بلوجر وكل ما هو جديد في عالم التدوين .

 يمكنك إختيار الصورة التي تريد وليس شرطا أن يكون بنر،وضعته فقط كمثال.
انتقل إلى لوح تحكم مدونتك،إختر "تصميم" ،ثم "تحرير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>

مع إستبدال ما لون بالأحمر و الأخضر والأزرق
وتكون النتيجة على هذا الشكل  :

مدونة أبو إيادمرحبا بكم على مدونة أبو إياد ،دروس،إضافات بلوجر وكل ما هو جديد في عالم التدوين .

 ولأي إستفسارات المرجو ترك تعليقاتكم في أسفل الموضوع