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

اقرأ أيضاً : صفحة إتصل بنا بالماتيريال ديزاين

طريقة التركيب

اول خطوة الدخول علي : بلوجر > المظهر > تحرير HTML ثم قم بالبحث بالضغط علي Ctrl + F
عن هذه </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>

<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>

اقرأ أيضاً : قالب ماتيريال ديزاين

الأن يمكنك تغيير الملون بـ البنفسجي بالكلام الدي تريده
كما يمكنك التعديل على زمن ظهور رسائل الترحيب بالثانية بالأرقام الملونة بالأحمر

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

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

<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>

<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>

اقرأ أيضاً : قالب ماتيريال ديزاين

تحميل التعليقات

صفحات المدونة

Social Items

كوليكا ويب | هدفنا تطوير الويب العربي

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

الاشعارات