طريقة اضافة التلميحات على روابط مدونات بلوجر

Unknown
23 فبراير, 2017
بسم الله الرحمن الرحيم


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

يمكن استخدام خاصية التلميح بعدة تقنيات اشهرها تقنية JQuery ولكنها تحتاج الى خبرة في التعامل معها و قد تؤثر على سرعة تحميل الموقع لان اكواد ثقيلة بعض الشئ , في هذا المقال سنستخدم تقنية CSS لاضافة التلميحات فهي بسيطة و سهلة الاستخدام كما ان اكواد خفيفة لاتؤثر على سرعة التحميل .

للمعاينة اضغط على هذا الرابط " Prereview " 

شرح الطريقة 

توجه الى لوحة التحكم في بلوجر > القالب > تحرير HTML ثم اضغط Ctrl+f وابحث عن الوسم ]]></b:skin> وضع فوقه الكود التالي :

 .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;
}

طريقة الاستخدام

لاضافة تلميح لرابط نصي يمكنك استخدام الكود ادناه مع تغيير العبارات بالازرق بما يناسبك :

<li><a  class='cnmutip' href='الرابط الذي يؤدي اليه النص' title=' محتوى التلميح'>النص </a></li>

اما لاضافة تلميح لصورة يمكنك استخدام الكود ادناه مع تغيير العبارات بالازرق بما يناسبك :

<a class='cnmutip' title="محتوى التلميح" href='الرابط الذي تؤدي اليه الصورة'>
   <img  src='رابط الصورة'/>
   </a>

بذلك ينتهي الشرح ودمتم في حفظ الله ورعايته 

ارحب بكم في مدونتي { ارشر ,, مدونة كل مدون }

مشاركات أقدم المقال التالي
لا يوجد تعليقات
أضف تعليق
عنوان التعليق