♥ بـسـم الله الـرحمـن الـرحـيـم ♥
إِنَّ الْحَمْدَ لِلهِ تَعَالَى، نَحْمَدُهُ وَ نَسْتَعِينُ بِهِ وَ نَسْتَهْدِيهِ وَ نَسْتَنْصِرُه
وَ نَعُوذُ بِالْلهِ تَعَالَى مِنْ شُرُورِ أَنْفُسِنَا وَ مِنْ سَيِّئَاتِ أَعْمَالِنَا
مَنْ يَهْدِهِ الْلهُ تَعَالَى فَلَا مُضِلَّ لَهُ، وَ مَنْ يُضْلِلْ فَلَا هَادِىَ لَه
وَ أَشْهَدُ أَلَّا إِلَهَ إِلَّا الْلهُ وَحْدَهُ لَا شَرِيكَ لَه
وَ أَشْهَدُ أَنَّ مُحَمَّداً عَبْدُهُ وَ رَسُولُهُ، صَلَّى الْلهُ عَلَيْهِ وَ آلِهِ وَ سَلَّمَ تَسْلِيمَاً كَثِيرَا
إِنَّ الْحَمْدَ لِلهِ تَعَالَى، نَحْمَدُهُ وَ نَسْتَعِينُ بِهِ وَ نَسْتَهْدِيهِ وَ نَسْتَنْصِرُه
وَ نَعُوذُ بِالْلهِ تَعَالَى مِنْ شُرُورِ أَنْفُسِنَا وَ مِنْ سَيِّئَاتِ أَعْمَالِنَا
مَنْ يَهْدِهِ الْلهُ تَعَالَى فَلَا مُضِلَّ لَهُ، وَ مَنْ يُضْلِلْ فَلَا هَادِىَ لَه
وَ أَشْهَدُ أَلَّا إِلَهَ إِلَّا الْلهُ وَحْدَهُ لَا شَرِيكَ لَه
وَ أَشْهَدُ أَنَّ مُحَمَّداً عَبْدُهُ وَ رَسُولُهُ، صَلَّى الْلهُ عَلَيْهِ وَ آلِهِ وَ سَلَّمَ تَسْلِيمَاً كَثِيرَا
أقدم لكم اليوم
إضافة تنبيه احترافي ومتحرك
السلام عليكم ورحمة الله وبركاته سنقدم لكم اضافة حصرية وهي آداة تنبيه منبثقة بزر متحرك باحترافية ولأول مرة وفقط على مدونتنا
أولا نقوم بالبحث عن الوسم <head> ثم نضع أسفله الكود التالي
أولا نقوم بالبحث عن الوسم <head> ثم نضع أسفله الكود التالي
ثانيا, قم بالبحث عن الوسم ]]></b:skin> وضع فوقه الاكواد الخاصة بالستايل أي اكواد css<link href='https://fonts.googleapis.com/icon?family=Material+Icons' rel='stylesheet'/>
/* 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.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 ثم ضع أسفله مباشرة الاكواد التالية مع تغيير العبارة الملونة بالأحمر
رابعا وأخيرا, قم بإضافة هذا السكريبت فوق الوسم </body> والذي ستجده في نهاية القالب<div id='notif-wrapper'>
<a class='blanternotif' href='javascript:;' title='إشعار'><i class='material-icons blanterxE7F4'></i><i class='material-icons blanterxE5CD'></i></a>
<div class='notifbox'>
مرحبا بكم, نشكركم على زيارة مدونتنا, نتمنى أن تكون قد حصلت على ما كنت تبحث عنها هنا, ولا تنسى الإنضمام الى متابعي المدونة الأوفياء لتكون أول من يعرف بجديد مواضيعنا, دمتم في آمان الله .. مدير المدونة
</div>
</div>
<script type='text/javascript'>
$(document).ready(function(){$(".blanternotif").click(function(){$(".notifbox,#notif-wrapper").toggleClass("aktif");});});
</script>
0 تعليق على موضوع : إضافة تنبيه احترافي ومتحرك
يسعدنا تفاعلكم بالتعليق، لكن يرجى مراعاة الشروط التالية لضمان نشر التعليق
● أن لا تضع أي روابط خارجية
● أن يكون التعليق خاص بمحتوى التدوينة
● أي سؤال خارج محتوى التدوينة يرجى تواصل معنا : من هنا
● يمكنك تعليق بإستخدام صور ✋👇👆👍👎✋
● (( "مَّا يَلْفِظُ مِن قَوْلٍ إِلَّا لَدَيْهِ رَقِيبٌ عَتِيدٌ" ))