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

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

 يمكنك إختيار الصورة التي تريد.
انتقل إلى لوح تحكم مدونتك،إختر "تصميم" ،ثم "تحرير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://info-mr.blogspot.com" target="_blank"><img class="tt" src="https://sites.google.com/site/lightbox007/photo/info-mrblogger.jpg" /><span class="tooltip"><span class="top"></span><span class="middle">مرحبا بكم على مدونة محترفي الترجمة و الإعلاميات ،دروس،إضافات بلوجر وكل ما هو جديد في عالم التدوين .</span><span class="bottom"></span></span></a>

 ولتطبيق نفس العملية علي نص (كلمة أو جملة ) نستعمل هذا الكود :

<a class="tt" href="http://info-mr.blogspot.com" target="_blank">  مدونة محترفي الترجمة و الإعلاميات<span class="tooltip"><span class="top"></span><span class="middle">مرحبا بكم على مدونة محترفي الترجمة و الإعلاميات ،دروس،إضافات بلوجر وكل ما هو جديد في عالم التدوين</span><span class="bottom"></span></span></a>

مع إستبدال ما لون بالأحمر و الأخضر والأزرق 

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