0

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

qwetq

مدونة تجيك تكنولوجي : مدونة تقنية متواضعه بها عدد كبير من المواضيع الحصرية والمثيرة فى كثير من المجالات مديرها حمزة محمد عمري 17 سنة وطنى الاردن ولكن مقيم فى مصر بلدي الثانيه اعشق التدوين والتقنية .

ليست هناك تعليقات:

إرسال تعليق

اكتشف آخر الأعمال والخدمات التي أقدمها على خمسات
طلب خدماتى