 |
| إضافة رسائل ترحيبية بالماتيريال ديزاين |
السلام عليكم أحبابي ومتابعي العربي للتقنية الأوفياء, في موضوعنا لهدا اليوم سوف نقوم بشرح طريقة اضافة وتركيب رسائل ترحيبة لى مدونة بلوجر بتقنية الماتيريال ديزاين, الإضافة احترافية ومتحركة يمكنك أن تعدل مدة ظهورها بالثواني بسهولة تامة, وبعد طلب بعض المتابعين بنشر هده الإضافة قررنا بنشرها لكم لتستفيدو جميعا.
معاينة الإضافة
شرح طريقة التركيب
- اولا, نبحث عن الوسم </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>أهلا بكم فى مكتبة المدون</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>
الأن غير الملون بـالأزرق بالكلام الدي تريده
كما يمكنك التعديل على زمن ظهور رسائل الترحيب بالثانية بالأرقام الملونة بالأحمر
ثم احفظ ومبروك عليك الاضافة
إرسال تعليق