السلام عليكم زوار ومتابعينا الأعزاء, في موضوعنا لهذا اليوم سوف نقوم بشرح كيفيت اضافة وتركيب رسائل ترحيبة إلى مدونة بلوجر بتقنية الماتيريال ديزاين, الإضافة احترافية ومتحركة يمكنك أن تعدل مدة ظهورها بالثواني بسهولة تامة, وبعد طلب بعض المتابعين بنشر هده الإضافة قررنا بنشرها لكم لتستفيدو جميعا.
معاينة الإضافة
اول شيئ اخي الكريم قم بحفض نسخة إحتياطية لمدونتك
حيث اذا ارتكبت اي خطا يمكنك الرجوع الى المضهر الأصلي لقالبك
اول خطوة
نبحث عن الوسم </head> ثم نضع الأكواد التالية فوقه مباشرة
<script src='https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.min.js'/><style>#toast-container{display:block;position:fixed;z-index:10000}@media only screen and (max-width: 600px){#toast-container{min-width:100%;bottom:0%}}@media only screen and (min-width: 601px) and (max-width: 992px){#toast-container{left:5%;bottom:7%;max-width:90%}}@media only screen and (min-width: 993px){#toast-container{top:10%;right:7%;max-width:86%}}.toast{border-radius:2px;top:0;width:auto;clear:both;margin-top:10px;position:relative;max-width:100%;height:auto;min-height:48px;line-height:1.5em;word-break:break-all;background-color:#323232;padding:10px 25px;font-size:1.1rem;font-weight:300;color:#fff;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between}.toast .btn,.toast .btn-large,.toast .btn-flat{margin:0;margin-left:3rem}.toast.rounded{border-radius:24px}@media only screen and (max-width: 600px){.toast{width:100%;border-radius:0}}@media only screen and (min-width: 601px) and (max-width: 992px){.toast{float:left}}</style>
ثانيا نبحث عن الوسم <body> أو <body ونضع أسفله مباشرة الأكواد التالية
<script>var $toastContent = $('<span>أهلا بكم فى موقع algerian-ghost
التقنية</span>');Materialize.toast($toastContent, 1500);var $toastContent = $('<span>نوفر لكم شروحات ودروس تقنية حصرية</span>');Materialize.toast($toastContent, 2500);var $toastContent = $('<span>دمتم أوفياء لنا</span>');Materialize.toast($toastContent, 4000);var $toastContent = $('<span>ضع بصمتك قبل الرحيل ^_*</span>');Materialize.toast($toastContent, 5500);</script>
شرح طريقة التعديل على الكتابة
يمكنك تغيير الكتابة باللون الأحمر إلى رسالة الترحيب الخاصة بموقعك
الأرقام باللون الأزرق هي خاصة بزمن ضهور الرسالة حيث يمكنك تسريع ضهور الرسالة او جعلها تضهر ببطئ
ثم قم بحفض النموذج ومبروك عليك الإضافة
اذا واجهتك اي مشكلة أترك تعليقك وساجاوبك فورا
0 التعليقات:
إرسال تعليق