أخر الاخبار

طريقة إظافة خاصية التلميح على الأيقونات لبلوجر / إظافات بلوجر

مرحبا بكم أصدقائي الكرام في موضوع جديد من دورة بلوجر لكيفية  انشاء مدونة عربية احترافية من الصفر.. 

موضوعنا اليوم هو شرح لطريقة إظافة خاصية التلميح او tooltip على أيقونات أو أزرار أو أي صورة أو قسم لمدونة بلوجر تريد أن تضيف له شرحا بمجرد مرور الماوس فوقه بطريقة سهلة  وهي تساعد علي معرفة عناوين الصفجات والأقسام والمواضيع والصور والكتير حيت تلمح للزائر عند وضعه الماوس وتخبره بعنوان الصفحة  او عنوان القسم أو الصورة..

في هذا الموضوع إن شاء الله سنعرف كيفية إظافة خاصية التلميح على الأيقونات لبلوجر / إظافات بلوجر..


طريقة إظافة خاصية التلميح على الأيقونات لبلوجر / إظافات بلوجر


وتتميز هاته الاضافة بخاصيات:before وafter ويمكنك تعديلها افقيا، عموديا، يمينا، يسارا حسب التغييرات التي قد تجريها أنت على كود الccs الذي سأقدمه لكم.

نبقى مع طريقة التركيب

طريقة إظافة خاصية التلميح على الأيقونات / إظافات بلوجر


طريقة تركيب الإضافة

1-  في  لوحة التحكم بلوجر.

2- نذهب  للقالب.

3- ثم  تحرير HTML .

4- و نبحث عن الكود:  ]]></b:skin>

5- ثم نجد الكود التالي بعده
<style type='text/css'>

5- ثم نضع الكود التالي بعد الكود السابق الذي وجدناه مباشر:




/* tooltip------------------------------------- */
[data-tooltip]:before {
    position: absolute;
    top: 145%;
    left: 125%;
    margin-bottom: 5px;
    margin-left: -90px;
    padding: 5px 0px 5px 0px;
    width: 80px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    background-color: #000;
    background-color: #b44;
    color: #fff;
    content: attr(data-tooltip);
    text-align: center;
    font-size: 12px;
    line-height: 1.2;
}
[data-tooltip]:after {
  position: absolute;
  top: 126%;
  left: 50%;
  margin-left: -5px;
  width: 0;
  border-bottom: 5px solid #000;
  border-bottom: 5px solid #b44;
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
  content: &quot; &quot;;
  font-size: 0;
  line-height: 0;
}
[data-tooltip] {
  position: relative;
  z-index: 2;
  cursor: pointer;
}

[data-tooltip]:before,
[data-tooltip]:after {
  visibility: hidden;
  -ms-filter: &quot;progid:DXImageTransform.Microsoft.Alpha(Opacity=0)&quot;;
  filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  pointer-events: none;
}
[data-tooltip]:hover:before,
[data-tooltip]:hover:after {
  visibility: visible;
  -ms-filter: &quot;progid:DXImageTransform.Microsoft.Alpha(Opacity=100)&quot;;
  filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}
/* tooltip------------------------------------- */





ثم
إضافة وسم data-tooltip في اي رابط او صورة او زر أو عنوان أو  أي شيء نريد إظافة شرح له.

كمثال:

الكود السابق كان:

<li><a  href='https://soft224.blogspot.com/' rel='dofollow' target='_blank'></a> </li>

الآن نضيف له خاصية التلميح  فيصبح:

<li><a data-tooltip='الرئيسية' href='https://soft224.blogspot.com/' rel='dofollow' target='_blank'></a> </li>





ˆFr
وضع القراءة :
حجم الخط
+
16
-
تباعد السطور
+
2
-