إضافة تنبيه احترافي ومتحرك الى مدونة بلوجر -->
مرحبا بكم متابعينا الاوفياء. مدير ومشرف المدونة غائب هذه الفترة, نعتذر عن عدم نشر مواضيع جديدة لكم والاجابة عن تعليقاتكم
نشكركم على تفهمكم

آخر المواضيع

breaking/مقالات/9
بلوجر

إشترك في قناتنا على اليوتيوب لتتوصلو بجديد حلقاتنا التقنية


شارك المدونة مع أصدقائك في الفيسبوك ليستفيدو أيظا

الأحد، 9 يوليو 2017

3:31:00 م

تكبير النص تصغير النص أعادة للحجم الطبيعي
أهلا بكم متابعي نكهة التقنية الأعزاء, في هذا الموضوع الجديد على قسم اضافات بلوجر سنقدم لكم اضافة حصرية وهي آداة تنبيه منبثقة بزر متحرك باحترافية ولأول مرة وفقط على مدونتنا, الاضافة ستفيدك في عدة اشياء, فيمكن ان تقوم بكتابة اشعارات او ملاحظات على هذه الاداة فبمجرد الضفط على ايقونة الاشعارات تنبثق لك رسالة, هذه الارسالة تكون موجهة الى زوار المدونة والتي تسهل على صاحبها بالتواصل مع المتابعين وتوجيه رسائل لهم. الاضافة حقا رائعة ومذهلة, يمكنكم معاينتها من خلال زر المعاينة اسفله.
معاينة 
معاينة
شرح طريقة التركيب 
أولا نقوم بالبحث عن الوسم <head> ثم نضع أسفله الكود التالي
<link href='https://fonts.googleapis.com/icon?family=Material+Icons' rel='stylesheet'/>
ثانيا, قم بالبحث عن الوسم ]]></b:skin> وضع فوقه الاكواد الخاصة بالستايل أي اكواد css
/* by nak1ha.com */
#notif-wrapper{position:fixed;width:100%;z-index:999}
.blanternotif{background:#d32f2f;color:#FFF;width:50px;height:50px;border-radius:100%;position:fixed;z-index:999;bottom:45%;left:20px;-webkit-animation-duration:5s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:notifklik;animation-duration:5s;animation-iteration-count:infinite;animation-name:notifklik;transition:all 5s ease-in-out}
.blanternotif i{color:#FFF;font-size:25px;margin:11px 12px 10px 13px;-webkit-animation-duration:2s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:notificon;animation-duration:2s;animation-iteration-count:infinite;animation-name:notificon;transition:all 2s ease-in-out}
@keyframes notifklik{0%{transform:scale(1)}50%{transform:scale(1.2)}100%{transform:scale(1)}}
@keyframes notificon{0%{transform:rotate(-30deg)}50%{transform:rotate(30deg)}100%{transform:rotate(-30deg)}}
@keyframes notifbox{0%{transform:rotateZ(-45deg);visibility:visible;opacity:0;bottom:68%;left:78px}100%{transform:none;visibility:visible;opacity:1;bottom:41%;left:110px}}
.notifbox{padding:20px;border-radius:3px;position:fixed;resize:none;line-height:1.5;z-index:999;left:110px;bottom:41%;max-width:30rem;background:#d32f2f;border:1px solid #d32f2f;color:#fff;font-size:13px;box-shadow:0 1px 1px 0 rgba(0,0,0,0.07),0 1px 1px 0 rgba(0,0,0,0.06);display:inline-block;opacity:0;visibility:hidden;transition:.4s ease-in-out}
.notifbox:before{content:"";width:0;height:0;position:absolute;top:-.7px;left:-15px;border-width:8px;border-style:solid;border-color:#d32f2f #d32f2f transparent transparent;display:block}.blanterxE5CD{display:none!important}#notif-wrapper.aktif .blanterxE5CD{display:block!important;animation-name:none!important}#notif-wrapper.aktif .blanterxE7F4{display:none!important}
.notifbox.aktif{-webkit-animation-duration:1s;-webkit-animation-iteration-count:1;-webkit-animation-name:notifbox;animation-duration:1s;animation-iteration-count:1;animation-name:notifbox;transition:all 1s ease-in-out;opacity:1;visibility:visible}
@media screen and (max-width:680px){.notifbox:before{display:none}.notifbox{left:0%!important;bottom:0}@keyframes notifbox{0%{left:0!important}100%{left:0!important}}}

ثالثا, ابحث عن الوسم <body> او <body ثم ضع أسفله مباشرة الاكواد التالية مع تغيير العبارة الملونة بالأحمر
<div id='notif-wrapper'>
<a class='blanternotif' href='javascript:;' title='إشعار'><i class='material-icons blanterxE7F4'>&#59380;</i><i class='material-icons blanterxE5CD'>&#58829;</i></a>
<div class='notifbox'>
مرحبا بكم, نشكركم على زيارة مدونتنا, نتمنى أن تكون قد حصلت على ما كنت تبحث عنها هنا, ولا تنسى الإنضمام الى متابعي المدونة الأوفياء لتكون أول من يعرف بجديد مواضيعنا, دمتم في آمان الله .. مدير المدونة
</div>
</div>
رابعا وأخيرا, قم بإضافة هذا السكريبت فوق الوسم </body> والذي ستجده في نهاية القالب
<script type='text/javascript'>
$(document).ready(function(){$(&quot;.blanternotif&quot;).click(function(){$(&quot;.notifbox,#notif-wrapper&quot;).toggleClass(&quot;aktif&quot;);});});
</script>
ثم قم بحفظ القالب, وعاين النتيجة, نتمنى أن تنال التدوينة إعجابكم إن كان هناك أي مشكلة في التركيب لا تنسو تركها لنا في التعليقات. 
  1. اضافة روعة تبارك الله عليك خويا اسماعيل

    ردحذف
    الردود
    1. شكرا خويا وعلى دعمك المتواصل لنا

      حذف
  2. اخي ماعرفت اسوي الخطوة رقم 2

    ردحذف
    الردود
    1. مذا لم تفهم في الخطوة الثانية, اضن انها واضحة ستبحث فقط عن ]]> وتضع تلك الاكواد فوقها مباشرة

      حذف
  3. على الرحب صديقي, زرنا مجددا

    ردحذف
  4. اخي نحتاج رسائل الترحيب بلغة متيريال دييزاين مثل موفع احتياجات و ويب نايت

    ردحذف
  5. انا استخدم قالب نقطه ماج v2
    مش موجود به هذه الاشياء ارجو الرد ...في امان الله

    ردحذف
  6. اتعملت صح بس انا عايذ افهم حاجة هو اما انا بدوس عليها بيكون كدا هتجيلي الاشعارات انا بيظهرلي الصفحة اللي فيها الكلام اللي بالاحمر

    ردحذف
  7. حبيبي شكرا لك والله رائعة اضافة ولا اروع

    ردحذف

مقالات