إضافة تلميحات يدوية لروابط مدونات بلوجر مع لوحة توليد الأكواد + تصلح على كل شيء

السلام عليكم فيمدونتكم، التلميحات! ربما لم تسمع بها من قبل ولكن دائما تلاحظها في مواقع عديدة وأعجبت بها.

التلميحات الشرحية الربطية:

هي عبارة عن كود يتمثل بشكل رابط له عملين الأول وهو عندما تضع رابط لموقع معين وانت لكي يعرف الزوار الى اين سيذهبون تضيف هذا الكود وقد نشرت سابقا اداة مشابهة ولكن تلك كانت تلقائية اي تلقائيا يحضر دومين الرابط وايقونة الرابط وعندما يأشر عليه الزائر تظهر المعلومات السابقة على شكل نافذة بسيطة.

ولكن اداة اليوم تقوم بشيء يدوي تظهر نص بسيط يعرف بالموقع وهناك طريقة إستعمال أخرى وهي عندما تكون قد وضعت كلمة تدل على شيء غريب تضع تعريف هذا الشيء في الكود وعندما يدخل الزائر ان لم يفهم التعريف فلن يحتاج للمغادرة للبحث عنها سيجدها عندك وبمساحة صغيرة لاتأكل من المساحة المتفقة للمقال ومنه يتحسن ارتداد موقعك قليلا والشيء الجيد وهو انه عندما تظهر المعلومات لن يقوم بتغيير نص من نصوص المقال ليضع المعلومات لا والف لا فهو يقوم عبر CSS بجعل المعلومات تعمل بخاصية z-index ولهذا تحب المواقع الكبيرة إستخدامه كثيرا في اعمالها وبفضل درس اليوم سنقوم بشيء يجعل من موقعنا له فعالية والمميز انه سيكون له فعالية بدون لغة JAVASCRIPT وهذه بعض الأسئلة الشائعة التي أجبت عليها لكي تفهم أكثر

<style>
  .btechnomee-blogspot-com-atopilt{position:relative;color:#fe3231;font-size:inherit}
.btechnomee-blogspot-com-atopilt:after{position:absolute;width:12em;background-color:#202842;content:attr(data-tip);padding:0.6em 0;color:#ffffff;margin:auto;left:-4.5em;right:0;bottom:1.5em;text-align:center;border-radius:0.2em}
.btechnomee-blogspot-com-atopilt:before{position:absolute;content:"";height:0;width:0;border-top:0.5em solid #202842;border-left:0.5em solid transparent;border-right:0.5em solid transparent;margin:auto;left:0;right:0;bottom:1.1em}
.btechnomee-blogspot-com-atopilt:before,.btechnomee-blogspot-com-atopilt:after{display:none}
.btechnomee-blogspot-com-atopilt:hover:before,.btechnomee-blogspot-com-atopilt:hover:after{display:block}
</style>