إضافة فقاعة أداة التلميح على مدونات بلوجر
السلام عليكم ورحمة الله تعالى وبركاته ،في يومنا هذا سوف نتعرف على إضافة جميلة ,ألا وهي إضافة فقاعة أداة التلميح على مدونات بلوجر ، ،نستعمل هذه الأداة عند الحاجة إلي تلميح أو ملاحظة على صورة أو نص معين .
عند وضع مؤشر الماوس على صورة أو على رابط معين, تظهر الفقاعة وتضم نص التلميح المراد كتابته لشرح الصورة مثلا .
انتقل إلى لوح تحكم مدونتك، إختر "قالب" ،ثم "تحرير 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 مع التعديل عليه وذلك بإستبدال ما لون باللون الأحمر بالرابط الذي سوف تتوجه إليه عند الضغط على الصورة وإستبدال ما لون باللون الأخضر برابط الصورة ،وما لون بالون الأزرق بنص التلميح :
نتحكم في موضع الفقاعة بالتعديل على القيم :top:0px و left:0
والآن لتطبيق هذه الأداة على صورة ،نقوم بلصق الكود التالي في مشاركة جديدة Html مع التعديل عليه وذلك بإستبدال ما لون باللون الأحمر بالرابط الذي سوف تتوجه إليه عند الضغط على الصورة وإستبدال ما لون باللون الأخضر برابط الصورة ،وما لون بالون الأزرق بنص التلميح :
<a class="tt" href="http://www.bloggeridafat.blogspot.com" target="_blank"><img class="tt" src="http://www.m5zn.com/img/?img=57570f59ab6edac.png" /><span class="tooltip"><span class="top"></span><span class="middle">مرحبا بكم على مدونة إضـافـات الـبـلـوجـر </span><span class="bottom"></span></span></a>
ولتطبيق نفس العملية علي نص (كلمة أو جملة ) نستعمل هذا الكود :
<a class="tt" href="http://www.bloggeridafat.blogspot.com" target="_blank"> مدونة إضـافـات الـبـلـوجـر<span class="tooltip"><span class="top"></span><span class="middle">مرحبا بكم على مدونة إضـافـات الـبـلـوجـر</span><span class="bottom"></span></span></a>
مع إستبدال ما لون بالأحمر و الأخضر والأزرق .
وأخيرا قم بحفظ الأداة ،أتمنى أن تنال هذه الإضافة إعجابكم.
| روابط هذه التدوينة قابلة للنسخ واللصق | |
| URL | |
| HTML | |
| BBCode | |
0 التعليقات:
إرسال تعليق
تذكروا قول الله تعالى : {مَا يَلْفِظُ مِن قَوْلٍ إِلا لَدَيْهِ رَقِيبٌ عَتِيدٌ}