مربع فقاعات التلميح

01:57 م | | | التسميات:

السلام عليكم

وبعد طول شقاء اقدرت اني اعمل فقاعات التلميح التي لا يعرف الكثير ...

فقاعات التلميح هي المربع الذي يظهر عند مرور الماوس على كلمة او جملة معينة .

للتعبير اكثر انظر الى الصور الجانبية

يمكنك ان تعطي وصفا موجزا لأي صلة من شأنها أن تظهر عند مرور الماوس

لاضافة هذه الاداة اتبع الاتي :

ادخل الى مدونتك انقر فوق عناصر الصفحة ثم تحرير القالب
لا ننسى النسخ الاحتياطي القالب أولا ، انقر فوق تحميل كامل القالب

ابحث عن هذا الكود

Untitled

abap

]]></b:skin>

اضف فوقه مباشرة هذا الكود

Untitled

abap

/*---------- 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://lh3.ggpht.com/_pt7i0nbIOCY/SzIcnNeAr-I/AAAAAAAACek/ol5o6rqB5Qw/bubble_thumb.gif) no-repeat top;
}
a.tt:hover span.middle{ /* different middle bg for stretch */
display: block;
padding: 0 8px; 
background: url(http://lh3.ggpht.com/_pt7i0nbIOCY/SzIcrZtXeiI/AAAAAAAACes/f3SeQ8tdw5A/bubble_filler_thumb%5B1%5D.gif) repeat bottom;
}
a.tt:hover span.bottom{
display: block;
padding:3px 8px 10px;
color: #548912;
background: url(http://lh3.ggpht.com/_pt7i0nbIOCY/SzIcnNeAr-I/AAAAAAAACek/ol5o6rqB5Qw/bubble_thumb.gif) no-repeat bottom;
}

ثم حفظ القالب

بعد ذلك سوف تتمكن من اضافة فقاعات التلميح اين ما اردت في بلوجر

اذا كنت تريد ان تضيفها الى العمود الجانبي مثلاً اتبع الاتي :
مثلا خذ هذه العبارة طبعاً يمكنك ان تغيرها

انسخ الكود التالي

inline block grid

abap

/* safari 3+ / chrome 2 / ie8 / firefox 3+ */
 .mod { width:600px;margin:2em auto;text-align:left; }
 .mod .bd { padding:10px; }
 .item { display:inline-block;width:48%;margin:0 1% 30px 0;vertical-align:top; }
 .item .pic { display:table-cell;width:90px;vertical-align:top; }
 .item .info { display:table-cell; }
 
 /* ie6 / ie7 */
 .item { *display:inline;*width:47.8%;zoom:1; }
 .item .pic { *float:left; }
 .item .info { *float:left; }
 
 /* firefox 2 */
 .item, x:-moz-any-link { display:-moz-inline-box; }
 .item .info, x:-moz-any-link { width:188px;*width:auto; }

اذهب الى تخطيط ثم عناصر الصفحة ثم اضافة اداة من نوع جافا/ html ثم الصق الكود

سيظهر بهذا الشكل :

اذا اردت ان تضيفه الى موقعك لا تنسة تغير الاتي :

http://arab-alrab7on.blogspot.com 1. : بالعنوان الذي تريد

2.مدونة الرابحون العرب :الكملة او الجملة التي عند مرور الماوس عليها سوف يظهر المربع
3.هذه المدونة تختص بتقديم دروس بلوجر واضافاتها وطرق الربح من النت :الشيء الذي سيظهر في المربع
4.اذا كنت تريد تعلم إنشاء بلوجر عليك زيارة مدونتي الدروس فيها مجانية :النص الذي تريده انت

اما اذا اردت ان اتضيف خذه الخاصية على الازرار التي تكون في الاعلى (الصفحة الرئيسية ، انصل بنا ... )
اتبع الاتي :

اذهب الى تخطيط ثم تحرير القالب

ابحث عن هذا الكود

ثم الصق تحته مباشرة هذا الكود

Untitled

abap

<a class='tt' href='http://arab-alrab7on.blogspot.com/'>الرابحون العرب<span class='tooltip'><span class='top'/><span class='middle'> البيت</span><span class='bottom'/></span></a>