يعتبر موقع الويب من أهم الوسائل التي تساعد الشركات والأفراد على التواصل مع الجمهور، ولكن قد يتعرض المستخدم لمشكلة فقد الاتصال بالشبكة، مما يؤثر على تجربة المستخدم ويجعله يفقد الثقة في الموقع. لذلك، يوفر بلوجر خاصية عرض رسالة تفيد المستخدم في حال فقد الاتصال بالإنترنت، وفي هذا المقال سنتحدث عن كيفية إنشاء هذه الرسالة.
كيفية اضافة رسالة تنبية بفقد الاتصال بشبكة الإنترنت على مدونة بلوجر
يعرض الرمز رسالة اشعار عند فقد اتصال بشبكة الانترنت لموقع الويب سيظهر بمجرد أن تفقد اتصال الانترنت بالكمبيوتر.يمكنك اتباع الخطوات التالية لإنشاء رمز لعرض رسالة فقد الاتصال بشبكة الإنترنت بصفحة بلوجر
اتبع هذه الخطوات لتركيب اشعار التنبية خطوة بخطوة
الخطوة 1: أضف HTML التالي قبل علامة الإغلاق </body>
/*-- code by kzafkra.com --*/
<div id='networkstt'>
<div class='icon-stt'>
<svg class='connect-icon' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M0 0h24v24H0z' fill='none'></path><path d='M1 9l2 2c4.97-4.97 13.03-4.97 18 0l2-2C16.93 2.93 7.08 2.93 1 9zm8 8l3 3 3-3c-1.65-1.66-4.34-1.66-6 0zm-4-4l2 2c2.76-2.76 7.24-2.76 10 0l2-2C15.14 9.14 8.87 9.14 5 13z' fill='#2ecc71'></path></svg>
<svg class='disconnect-icon' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M24 .01c0-.01 0-.01 0 0L0 0v24h24V.01zM0 0h24v24H0V0zm0 0h24v24H0V0z' fill='none'></path><path d='M22.99 9C19.15 5.16 13.8 3.76 8.84 4.78l2.52 2.52c3.47-.17 6.99 1.05 9.63 3.7l2-2zm-4 4c-1.29-1.29-2.84-2.13-4.49-2.56l3.53 3.53.96-.97zM2 3.05L5.07 6.1C3.6 6.82 2.22 7.78 1 9l1.99 2c1.24-1.24 2.67-2.16 4.2-2.77l2.24 2.24C7.81 10.89 6.27 11.73 5 13v.01L6.99 15c1.36-1.36 3.14-2.04 4.92-2.06L18.98 20l1.27-1.26L3.29 1.79 2 3.05zM9 17l3 3 3-3c-1.65-1.66-4.34-1.66-6 0z'></path></svg>
</div>
<p aria-atomic='true' id='status-text' role='alert'></p>
<div class='refresh-button' role='button' tabindex='0'>
<span onclick='location.reload()'>Refresh</span>
</div>
</div>
الخطوة 2: أضف CSS التالي إلى مدونتك. الخطوة.
/*-- code by kzafkra.com --*/
.icon-stt svg{display:none}
#networkstt.online .icon-stt .connect-icon{display:inline-block}
#networkstt.offline .icon-stt .disconnect-icon{display:inline-block}
#networkstt #status-text{font-size:14px;color:#666;padding:6px}
#networkstt .icon-stt{padding:6px}
#networkstt{display:none;position:fixed;bottom:15px;left:15px;background:#fff;padding:4px 6px;align-items:center;border-radius:.25rem;box-shadow:0 0 20px rgb(95 125 149 / 25%);z-index:9999}
#networkstt.offline,#networkstt.online{display:flex}
.refresh-button{font-size:14px;display:none;color:#7577a9;margin:0 5px 0 10px;cursor:pointer}
#networkstt.offline .refresh-button{display:inline-block}
الخطوة 3: أخيرًا أضف Javascript التالية قبل علامة الإغلاق </body>.
/*-- code by kzafkra.com --*/
<script>//<![CDATA[
window.addEventListener('load', function() {
var status = document.getElementById("status-text"),
classnw = document.getElementById("networkstt");
function updateOnlineStatus(event) {
var networkstt = navigator.onLine ? "Your internet connection was restored." : "You are currently offline.";
status.innerHTML = networkstt;
if (navigator.onLine == true){classnw.className = 'online';setTimeout(function(){classnw.className = ''},3000)}else{classnw.className = 'offline'}
}
window.addEventListener('online', updateOnlineStatus);
window.addEventListener('offline', updateOnlineStatus);
});
//]]></script>
إذا كنت ترغب في إضافة بعض المتعة لزوار المدونة، فيجب أن تنتبه إلى أن تأثير إضافة العناصر الإضافية ليس كبيرًا دائمًا. وإذا كنت تخشى من أن تؤدي هذه العناصر إلى بطء في تحميل صفحتك، فعليك تجنب إضافتها تمامًا. ولكن، إذا أردت إضافة هذه العناصر دون التأثير على سرعة تحميل الصفحة، يجب أن تضيفها بحذر وتقوم بتحسين أداء موقعك. ومن الجيد أيضًا أن تراجع محتوى موقعك وتقوم بتخصيصه بما يتماشى مع أفكارك وأهدافك.
من فضلك اترك لنا تعليقك لتشجيعنا على الاستمرار وسوف نقوم بالرد على اسألتك