إضافة أيقونة المساعدة منبثقة

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

معاينة إنقر هنا

ملاحظة مهمة جداً حدد الكود من خلال الفأرة (الماوس) وقم بلنسخ من خلال الكيبورد بلضغط على زرين ( ctrl+حرف ال C ) وذلك لمن سرقة مواضيع المدونة وشكراً

شرح طريقة التركيب :
1 . توجه لقالب >> تحرير
2. ابحث بإستعمال CTRL+F عن   ]]></b:skin>
3. ضع الكود التالي قبله [ فوقه ]

.help-tip{position: absolute;top: 40px;right: 600px;text-align: center;background-color: #D55050;border-radius: 50%;width: 24px;height: 24px;font-size: 14px;line-height: 26px;cursor: default;}<br />.help-tip:before{content:'?';font-weight: bold;color:#fff;}<br />.help-tip:hover p{display:block;transform-origin: 100% 0%;-webkit-animation: fadeIn 0.3s ease-in-out;animation: fadeIn 0.3s ease-in-out;}<br />.help-tip p{display: none;text-align: right;font-family: droid arabic kufi;background-color: rgba(30, 32, 33, 0.97);padding: 20px;width: 300px;position: absolute;border-radius: 3px;box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);right: -4px;color: #FFF;font-size: 13px;line-height: 1.4;}<br />.help-tip p:before{position: absolute;content: '';width:0;height: 0;border:6px solid transparent;border-bottom-color:#1E2021;right:10px;top:-12px;}<br />.help-tip p:after{width:100%;height:40px;content:'';position: absolute;top:-40px;left:0;}<br />@-webkit-keyframes fadeIn {<br />0% {opacity:0; transform: scale(0.6);}<br />100% {opacity:100%;transform: scale(1);}}<br />@keyframes fadeIn {0% { opacity:0; }100% { opacity:100%; }}

* لتعديل مكان الأيقونة غير ابعاد هاذا الكود : top: 40px  right: 600px

تفعيل الكود :
1. حرر الموضوع
2. إنتقل لتبويب HTML

3. ضع الكود التالي به

<div class="help-tip"> <p>.هذا مثال يوضح ما تعرضه هذه الإضافة، في حين يمكنك إستعمالها بموقعك لعمل ملاحظة لشيء ما.</p></div>

اقرء المزيد