اضافات بلوجر والووردبريس

حصريا إضافة تنبيه احترافي ومتحرك لمدونات بلوجر 2019 | نسخه دوت كوم

حصريا إضافة تنبيه احترافي ومتحرك

في هذا الموضوع الجديد سنقدم لكم اضافة حصرية وهي آداة تنبيه منبثقة بزر متحرك باحترافية الاضافة ستفيدك في عدة اشياء, فيمكن ان تقوم بكتابة اشعارات او ملاحظات على هذه الاداة فبمجرد الضغط على ايقونة الاشعارات تنبثق لك رسالة هذه الرسالة تكون موجهة الى زوار المدونة والتي تسهل على صاحبها بالتواصل مع المتابعين وتوجيه رسائل لهم.

يمكنكم معاينة الاضافه من هنا ↓

اضغط للمعاينه

شرح طريقة التركيب ↓

أولا : نقوم بالبحث عن الوسم <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>

ثم قم بحفظ القالب وعاين النتيجة ♥

نتمنى أن تنال التدوينة إعجابكم إن كان هناك أي مشكلة في التركيب لا تنسو تركها لنا في التعليقات ..

الوسوم
اظهر المزيد

AHMED ADLY

مهتم بكل ما هو جديد في عالم الانترنت وتطوير المواقع وغيرها ..

مقالات ذات صلة

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *

إغلاق
إغلاق