أخر الاخبار

الرئيسية بلوجر

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

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

درسنا اليوم هو الدرس12: وهو شرح لطريقة إظافة خاصية التلميح او 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>


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

إلى هنا نكمل هذا الدرس.. تقبلو تحياتي.
والسلام عليكم ورحمة الله تعالى وبركاته
اللهم صلي وسلم على نبينا محمد
(صلى الله عليه وسلم)


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

ليصلك جديدنا تابعنا على صفحاتنا الاجتماعية: الفيسبوك, التويتر ,tumblr, pinterest, linkedin, instagram




مواضيع ذات صلة قد تهمك:



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