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

468x60


عند إنشاء تطبيق على شبكة الأنترنت أو موضوع، تحتاج إلى لفت إنتباه الزائر إما تكون بطريقة مباشرة كوضع نص أو إختصارها في إضافة منبثقة، تستخدم كذلك للمساعدة الودية لتوضيح فكرة من وجهة نظرك. وهنا يأتي دور هذه الإضافة المنسقة والرائعة لإظهار نص التعليمات التي تحتاجه بسهولة في التركيب
شرح  طريقة التركيب
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>
468x60
معلومات عن التدوينة الكاتب : Tarekk بتاريخ : الأربعاء، 25 فبراير 2015
المشاهدات :
عدد التعليقات: 0،، للإبلاغ عن رابط معطوب اضغط هنا
250x300

شكرا لتعليقك
عرب ويب