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

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

• معاينة

شرح  طريقة التركيب

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;}.help-tip:before{content:'?';font-weight: bold;color:#fff;}
.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;}
.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;}
.help-tip p:before{position: absolute;content: '';width:0;height: 0;border:6px solid transparent;border-bottom-color:#1E2021;right:10px;top:-12px;}
.help-tip p:after{width:100%;height:40px;content:'';position: absolute;top:-40px;left:0;}
@-webkit-keyframes fadeIn {
    0% {opacity:0; transform: scale(0.6);}
    100% {opacity:100%;transform: scale(1);}}
@keyframes fadeIn {0% { opacity:0; }100% { opacity:100%; }}

* لتعديل مكان الأيقونة فالكود محدد بالأصفر : top: 40px  right: 600px

تفعيل الكود

1. حرر الموضوع

2. إنتقل لتبويب HTML

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

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

شاركه على جوجل بلس

عن الكاتب Tarekk

هذا النص الغبي ، غير مقصود لقرائته . وفقا لذلك فمن الصعب معرفة متى وأين نهايته ، لكن حتى . فإن هذا النص الغبي ، ليس مقصود لقرائته . نقطة رجوع لسطر مدونة مدون محترف ترحب بك.