بسم الله الرحمن الرحيم
السلام عليكم , من الخواص المميزة التي تستخدم في كثير من المواقع هي خاصية التلميحات بجميع انواعها , بحيث يظهر تلميح للزائر بمجرد وضعه المؤشر على عبارة او صورة معينة , فهي خاصية مفيدة جدا يمكن توضح للزائر بواسطتها مهام الروابط و النتائج المترتبة عند الضغط عليها .
يمكن استخدام خاصية التلميح بعدة تقنيات اشهرها تقنية JQuery ولكنها تحتاج الى خبرة في التعامل معها و قد تؤثر على سرعة تحميل الموقع لان اكواد ثقيلة بعض الشئ , في هذا المقال سنستخدم تقنية CSS لاضافة التلميحات فهي بسيطة و سهلة الاستخدام كما ان اكواد خفيفة لاتؤثر على سرعة التحميل .
توجه الى لوحة التحكم في بلوجر > القالب > تحرير HTML ثم اضغط Ctrl+f وابحث عن الوسم ]]> وضع فوقه الكود التالي :
يمكن استخدام خاصية التلميح بعدة تقنيات اشهرها تقنية JQuery ولكنها تحتاج الى خبرة في التعامل معها و قد تؤثر على سرعة تحميل الموقع لان اكواد ثقيلة بعض الشئ , في هذا المقال سنستخدم تقنية CSS لاضافة التلميحات فهي بسيطة و سهلة الاستخدام كما ان اكواد خفيفة لاتؤثر على سرعة التحميل .
للمعاينة اضغط على هذا الرابط " Prereview "
شرح الطريقة
توجه الى لوحة التحكم في بلوجر > القالب > تحرير HTML ثم اضغط Ctrl+f وابحث عن الوسم ]]> وضع فوقه الكود التالي :
.cnmutip{display: inline;position: relative;}
.cnmutip:hover:after {
background:rgba(0, 0, 0, 0.9);
border-radius: 5px;
bottom: 36px;
color: #fff;
content: attr(title);
display: inline-block;
font-size: 10px;
left: 20%;
padding: 3px 8px 4px;
position: absolute;
text-align: center;
width: 200px;
z-index: 98;
}
.cnmutip:hover:after {
background:rgba(0, 0, 0, 0.9);
border-radius: 5px;
bottom: 36px;
color: #fff;
content: attr(title);
display: inline-block;
font-size: 10px;
left: 20%;
padding: 3px 8px 4px;
position: absolute;
text-align: center;
width: 200px;
z-index: 98;
}
طريقة الاستخدام
لاضافة تلميح لرابط نصي يمكنك استخدام الكود ادناه مع تغيير العبارات بالازرق بما يناسبك :
اما لاضافة تلميح لصورة يمكنك استخدام الكود ادناه مع تغيير العبارات بالازرق بما يناسبك :
بذلك ينتهي الشرح ودمتم في حفظ الله ورعايته
ارحب بكم في مدونتي { ارشر ,, مدونة كل مدون }
تعليقات
إرسال تعليق