السلام عليكم أحبابي ومتابعي نكهة التقنية الأوفياء, في موضوعنا لهدا اليوم سوف نقوم بشرح طريقة اضافة وتركيب رسائل ترحيبة لى مدونة بلوجر بتقنية الماتيريال ديزاين, الإضافة احترافية ومتحركة يمكنك أن تعدل مدة ظهورها بالثواني بسهولة تامة, وبعد طلب بعض المتابعين بنشر هده الإضافة قررنا بنشرها لكم لتستفيدو جميعا.
معاينة
كما يمكنك التعديل على زمن ظهور رسائل الترحيب بالثانية بالأرقام الملونة بالأحمر
ثم احفظ ومبروك عليك الاضافة
معاينة الإضافة
شرح طريقة التركيب
اولا, نبحث عن الوسم </head> ثم نضع الأكواد التالية فوقه مباشرة<script src='https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.min.js'/>ثانيا نبحث عن الوسم <body> أو <body ونضع أسفله مباشرة الأكواد التالية
<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>
<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>
كما يمكنك التعديل على زمن ظهور رسائل الترحيب بالثانية بالأرقام الملونة بالأحمر
ثم احفظ ومبروك عليك الاضافة
رائع شكرا على الاضافة 0-0
ردحذفعلى الرحب صديقي, شكرا لتعليقك الأروع
حذفالف شكر ليك
ردحذفthx
ردحذفهذه المدونة الإلكترونية مفتوحة للقراء المدعوين فقط
ردحذف