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

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

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

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

<a class="tt" href="http://abu-iyad.blogspot.com" target="_blank"> مدونة أبو إيادمرحبا بكم على مدونة أبو إياد ،دروس،إضافات بلوجر وكل ما هو جديد في عالم التدوين</a>

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

مدونة أبو إياد

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

شارك هذه الصفحة :

	شارك الصفحة في الفيس بوك
	شارك الصفحة في صدي قوقل
	شارك الصفحة في تويتر Twitter
	تابعنا عبر خدمة الخلاصات RSS
	تابع تعليقات المدونة عبر الـRSS