إضافة أيقونة المساعدة منبثقة بتقنية 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>

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

الأكثر زيارة

اخر التعليقات

تابعنا أول بأول