مرحبا بكم أصدقائي الكرام في درس جديد من دورة بلوجر لكيفية انشاء مدونة عربية احترافية من الصفر..
درسنا اليوم هو الدرس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: " ";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: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);opacity: 0;pointer-events: none;}[data-tooltip]:hover:before,[data-tooltip]:hover:after {visibility: visible;-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";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>
أرجوا ان ينال هذا الدرس افادتكم وانتظرونا في المزيد من الدروس المفيدة في كيفية إنشاء مدونة بلوجر عربية واحترافية , لاتنسوا مشاركة الموضوع مع أصدقائكم.. بالتوفيق للجميع..
إلى هنا نكمل هذا الدرس.. تقبلو تحياتي.
والسلام عليكم ورحمة الله تعالى وبركاته
اللهم صلي وسلم على نبينا محمد
(صلى الله عليه وسلم)
إذا أعجبك الموضوع يمكنك مشاهدة مواضيع أو دروس أخرى بقسم بلوجر لاتقل أهمية إضغط هنا للإنتقال لقسم بلوجر.
مواضيع أخرى قد تهمك
من مجرد نبات سام يثير الفضول إلى مكوّن شائع
سواء أكانت الطماطم موضوعة فوق البيتزا أو مستخدمة في السلطات أو في مهروسة شكل صلصات، فهي أضحت مكونًا رئيسيًا من مكونات المطبخ في مختلف أنحاء العالم. ولكن قد يتملّككم الذهول عندما تعلمون أن الأمر لم يكن دائمًا كذلك! يعود أصل الطماطم إلى أمريكا الجنوبية. ولئن كان شعب الأزتيك يستهلكها في أمريكا الوسطى منذ عام 700 بعد الميلاد، فإنها لم تصبح مكونًا شائعًا في مطبخ بلدان البحر الأبيض المتوسط إلّا في أوائل القرن التاسع عشر. وتحوم حول طريقة وصولها إلى أوروبا نظريات كثيرة، تتمثل إحداها في أنه تم إحضارها إلى القارة
العجوز بعد الغزو الإسباني. ومن إسبانيا، انتقلت إلى إيطاليا بفضل ما كان يربط العائلات الحاكمة بعضها ببعض آنذاك من علاقات وثيقة. بينما تذهب نظريات أخريات إلى أن الطماطم وصلت إلى فرنسا من بيرو أو المكسيك
المزيد..
قضايا عالمية: تغير المناخ
يعتبر تغير المناخ القضية الحاسمة في عصرنا، ونحن الآن أمام لحظة حاسمة. فالآثار العالمية لتغير المناخ هي واسعة النطاق ولم يسبق لها مثيل من حيث الحجم، من تغير أنماط الطقس التي تهدد الإنتاج الغذائي، إلى ارتفاع منسوب مياه البحار التي تزيد من خطر الفيضانات الكارثية. إن التكيف مع هذه التأثيرات سيكون أكثر صعوبة ومكلفا في المستقبل إذا لم يتم القيام بإتخاذ إجراءات جذرية الآن
المزيد..