إضافة رسائل ترحيبية بالماتيريال ديزاين

إعلان أدسنس

آخر المواضيع

breaking/مقالات/9
مرحبا بك في موقعنا ! :) .. للبحث عنا من جوجل يمكنك كتابة "نكهة التقنية" أو "Nak1ha" ! لا تنس جعل المدونة الصفحة الرئيسية لمتصفحك! :)
بلوجر

إشترك في قناتنا على اليوتيوب لتتوصلو بجديد حلقاتنا التقنية


شارك المدونة مع أصدقائك في الفيسبوك ليستفيدو أيظا

السبت، 15 يوليو، 2017

9:15:00 ص

تكبير النص تصغير النص أعادة للحجم الطبيعي
السلام عليكم أحبابي ومتابعي نكهة التقنية الأوفياء, في موضوعنا لهدا اليوم سوف نقوم بشرح طريقة اضافة وتركيب رسائل ترحيبة لى مدونة بلوجر بتقنية الماتيريال ديزاين, الإضافة احترافية ومتحركة يمكنك أن تعدل مدة ظهورها بالثواني بسهولة تامة, وبعد طلب بعض المتابعين بنشر هده الإضافة قررنا بنشرها لكم لتستفيدو جميعا.
معاينة الإضافة 
معاينة
شرح طريقة التركيب 
اولا, نبحث عن الوسم </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 = $(&#39;<span>أهلا بكم فى مكتبة المدون</span>&#39;);
  Materialize.toast($toastContent, 1500);
   var $toastContent = $(&#39;<span>ستجدون عندنا أغلب المدونات العربية</span>&#39;);
  Materialize.toast($toastContent, 2500);
   var $toastContent = $(&#39;<span>نتمنى ان تجدوا ماتبحثون عنه</span>&#39;);
  Materialize.toast($toastContent, 4000);
   var $toastContent = $(&#39;<span>جولة سعيدة ^_^</span>&#39;);
  Materialize.toast($toastContent, 5500);
</script> 
الأن غير الملون بـالأزرق بالكلام الدي تريده
كما يمكنك التعديل على زمن ظهور رسائل الترحيب بالثانية بالأرقام الملونة بالأحمر

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

مقالات