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