مدونة هلا تك

طريقة تركيب زر ملاحظة مهمة لقوالب بلوجر

الشرح بالتفصيل الاضافة يتم تركيبها بداخل الهيدر بأعلى القالب أو في أي مكان تراه مناسب
زر التنبيه هذا يمكنك التعديل على النص بما تراه مناسب سريع الاستجابة ومناسب لجميع أنواع الأجهزة.
يمكنك تغير الصورة الموجودة به بما تريد
رسالة التنبيه متجاوبة مع قياس جميع الشاشات و لا تؤثر على سرعة المدونة
من منا لم يحتاج يوماً لعمل رسالة تنبيه في مدونته او ملاحظة ليخبر زواره بامر معين هنا ياتي دور هذه الإضافة

هذه الاضافة تلبي المطلوب و هي حصرية على مدونة هلا تك

شرح تركيب أضافة ملاحظة مهمة بالفيديو

شرح تركيب الأكواد الخاصة بالاضافة

قم بتسجيل الدخول إلى ~~Blogger~~
أولا وقبل كل شيء، تحتاج إلى تسجيل الدخول إلى لوحة تحكم موقع مدونتك باستخدام بيانات اعتماد تسجيل الدخول الخاصة بك.
قم بالذهاب الى المظهر و ثم اختيار ~~HTML~~
ثم اضغط على CTRL + F ليظهر لك مربع بحث و ثم الصق ~~</body>~~ و ثم ~~ENTER~~
و الصق الاكواد التالية اعلاها

<div class='asdevelopernotif'>
<div class='asdevelopertitle'>ملاحظة هامة</div>
<div class='notiftext'>
نرغب في تزويدك بأحدث محتوى لدينا و بأسرع ما يمكن كما نهدف إلى أن يكون هذا المحتوى مفيداً لك.</div><div class='notiftext'><br/></div><div class='separator' style='clear: both; text-align: center;'><a href='https://i.pinimg.com/originals/b9/e4/96/b9e4960c1476c78043d499d975f86cdb.gif' style='margin-left: 1em; margin-right: 1em;'><img border='0' data-original-height='100%' data-original-width='100%' height='100%' src='https://i.pinimg.com/originals/b9/e4/96/b9e4960c1476c78043d499d975f86cdb.gif' width='100%'/></a></div>
<a class='waves-effect waves-light close-sf' href='javascript:;' title='Done'>أغلاق الملاحظة</a>
<a class='waves-effect icx close-sf' href='javascript:;'/>
</div>
<div class='matilampu'/>
<script type='text/javascript'>
$(document).ready(function(){$(".close-sf").click(function(){$(".asdevelopernotif,.matilampu").removeClass("aktif")})}),$(document).ready(function(){$(".shownotif").click(function(){$(".asdevelopernotif,.matilampu").toggleClass("aktif")})});
</script>

ثانيا أبحث عن </head> و ثم قم بلصق الأكواد التالية أعلاها

<style>

/* Notification Css START */
a.waves-light.close-sf{font-size:14px;color:#fff}
i.fa.fa-bell {margin-left: 51px;font-size: 21px;}
.asdevelopernotif,.matilampu{visibility:hidden;opacity:0}
.asdevelopernotif{background:#fff;position:fixed;padding:25px;top:15%;transition:all .3s ease-in-out;max-width:450px;left:35%;z-index:9999;border-radius:4px;box-shadow:0 9px 46px 8px rgba(0,0,0,.14),0 11px 15px -7px rgba(0,0,0,.12),0 24px 38px 3px rgba(0,0,0,.2)}
.asdevelopernotif button{border:none;position:absolute;margin-top:17px;right:30px;cursor:pointer;background:#e8e8e8;padding-left:7px;outline:0}
a.waves-light.close-sf{background:#3949ab;margin-top:15px;display:inline-block;padding:10px 13px;border-radius:3px;box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);float:right;text-transform:uppercase}
.matilampu{position:fixed;top:0;background:rgba(0,0,0,.59);left:0;right:0;bottom:0;margin:0;z-index:97;transition:all .4s ease-in-out}
.asdevelopertitle{font-size: 18px;color: #ff0000;margin-bottom: 15px;margin-top: 15px;font-weight: bold;}
/* Material Design Dialog Box Tech Vodh */
.asdevelopernotif.aktif,.matilampu.aktif{visibility:visible;opacity:1}
.asdevelopernotif.aktif{top:20%}
.icx{position:absolute;top:10px;right:10px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKhDjC4TjpXPaDrlEHpFr-ZZArOaVT0yx5pe9aU0qV2mTuOwBctkK5VL4C2y9Z9tD0Vk-fuj9TLCjHzwC4nuAq3hHBZmRnuSPFOBM9jcaHCCrU7TBt4alfW2yqn_WL-UoFlmGVBvJYKJU/s1600/mdclose.png)no-repeat;background-size:15px;margin:10px 8px;width:15px;height:15px}
.notiftext{font-size:14px;line-height:1.5}
@media screen and (max-width:768px){.asdevelopernotif{left:10%;right:10%}}

/* Notification Css END */

</style>

ثالثا ابحث عن المكان المناسب لوضع ايقونة الجرس الخاصة بالاضافة

أنا وضعتها بجانب زر البحث بداخل الهيدر

<a class='shownotif' href='javascript:;' title='Notification'><i class='fa fa-bell' style='color: #565656;font-weight: 100;'/></a>

رابعا أذا لم تظهر أيقونة الجرس ستحتاج الى مكتبة الايقونات

قم بلصقها اسفل ~~<head>~~

<link async='async' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css' rel='stylesheet'/>

و ثم قم بالحفظ و مبروك عليك الاضافة

وفي الختام !

شكرًا لوقتكم واهتمامكم بقراءة موضوع تركيب أضافة زر ملاحظة مهمة لقوالب بلوجر . إذا صادفتكم أي مشكلة أثناء استخدام الكود أو كان لديكم أي استفسار، فلا تترددوا في طرحه ضمن التعليقات أو التواصل معنا عبر صفحة الاتصال بنا . ولا تنسوا الانضمام إلى متابعي مدونة هلا تك ليصلكم كل كل ما هو جديد.