طريقة اضافة التلميحات على روابط مدونات بلوجر بكل سهولة
السلام عليكم. من السمات المميزة التي يتم استخدامها في العديد من المواقع ميزة التلميحات بجميع أنواعها ، بحيث يظهر تلميح للزائر بمجرد وضع المؤشر على عبارة أو صورة معينة.
يمكن استخدام خاصية التلميح بعدة تقنيات اشهرها تقنية JQuery ولكنها تحتاج الى خبرة في التعامل معها و قد تؤثر على سرعة تحميل الموقع لان اكواد ثقيلة بعض الشئ , في هذا المقال سنستخدم تقنية CSS لاضافة التلميحات فهي بسيطة و سهلة الاستخدام كما ان اكواد خفيفة لاتؤثر على سرعة التحميل .
شرح الطريقة
توجه الى لوحة التحكم في بلوجر > القالب > تحرير 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;
}
.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>
<img src=’رابط الصورة‘/>
</a>
