إضافة صفحة خطأ 404 متحركة إحترافية لقوالب بلوجر

هــذه الإضـافــة مــهـمــة لــقـوالــب بــلـوجــر وهــي صــفـحــة الــخـطــأ 404 لـكــن أصـبــح الــجــمـيــع يــســتـخــدم نـفــس الــنـمــط لـكــن بــتــغــيـيــرات بــســيـطــة وأصــبـحــت تـجــد نـفــس الــصــفـحــة فــي جــمـيــع الــقـوالــب لـذلــك أتـيــت لـكــم الـيــوم بــصــفـحــة خـطــأ حــصـريــة لــن تـجــد مــثــلـهــا فــي أي قـالــب فـقــط قـالــب إبـداعــي الــذي صــمـمــت لــه خــصــيـصــا هــذه الــصــفـحــة بــدون أن أطـيــل عــلــيـكــم هــذه هــي صــفـحــة الــخـطــأ.

لماذا تعتبر الروابط المكسورة غير جيدة (سيئة) :

بـســبـب الــروابـط الــمـكــسـورة تـفــقـد الـزوار لــمـوقــعـك اثــنـاء تـفــحـص الـزائر لــرابـط مـكــسـو يــجـد الـصــعـوبــة لـدخــول إلــى الـرابــط مـمــا يــؤذي إلــى الـتــخـلــي عــن الـرابــط والانــتـقــال رابــط مـوقــع أخــر هـنــا قــد تـكــون فـقــدت عــنـصــر لـمــوقـعــك كـمــا تـجــد فــهـرســة الــمـوقــع عــن طـريــق الـمــحـركــات الــبـحــث صــعـوبــة فــي الأرشـفــة مـمــا يــؤذي إلــى انـخــاض فــي نــسـبــة تــرتـيــب مــوقـعــك.

المعــاينة

الآن ننتقل لمراحل تركيب صفحة الخطأ : مراحل تركيب الإضافة

ادخل إلى لوحة تحكم المدونة في بلوجر.
اختر قالب المدونة التي تود تطبيق الشرح فيها.
اضغط على تحرير HTML ( قم بأخد نسخة إحتياطية للقالب )
ابحث عن الوسم <body> وقم بتغييره (تعويضه) بالكود التالي :

<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<body>
<script async='' src='https://ssl.google-analytics.com/ga.js' type='text/javascript'/>
<script type='text/javascript'>/* <![CDATA[ */
var _gaq=_gaq||[];
_gaq.push(
 ['_setAccount',"UA-48316513-1"]
  ,['_trackPageview',"http-error\/500\/?page=https:\/\/travel.sygic.com\/404&referer=http:\/\/time.com\/3478874\/best-404-error-pages\/"]
);
(function(){
 var ga=document.createElement('script');
 ga.type='text/javascript';
 ga.async=true;
 ga.src=('https:'==document.location.protocol?'https://ssl':'http://www')+'.google-analytics.com/ga.js';
 var s=document.getElementsByTagName('script')[0];
 s.parentNode.insertBefore(ga,s);
})();
/* ]]> */</script>
<div class='stars'/>
<div class='sun-moon'><div class='sun'/><div class='moon'/></div>
<div class='background hills' id='js-hills'/>
<div class='background country' id='js-country'/>
<div class='background foreground' id='js-foreground'/>
<div class='error-content'>الصفحة التي تبحث عنها غير موجودة&#1548; أو تم حذفها</div>
<a class='button' href='/'>عودة للرئيسية</a>
<div class='code'><span>4</span><span>0</span><span>4</span></div>
<script type='text/javascript'>
 var mouse = { x: 0, y: 0 },
  gyro = { x: 0, y: 0 },
  updateGyro = false,
  updateMouse = false,
  customEvent = null,
  hills = document.getElementById(&#39;js-hills&#39;),
  country = document.getElementById(&#39;js-country&#39;),
  foreground = document.getElementById(&#39;js-foreground&#39;),
  windowWidth = window.innerWidth,
  isiPad = navigator.userAgent.match(/iPad/i) != null;
 if (windowWidth &gt; 1024) {
  document.addEventListener(&#39;mousemove&#39;, function(e){
   updateMouse = true;
   customEvent = e;
  }, false);
 }
 if (isiPad) {
  window.addEventListener(&#39;deviceorientation&#39;, function(e){
   updateGyro = true;
   customEvent = e;
  }, false);
 }
 setInterval(function(){
  if (updateGyro) {
   updateGyro = false;
   updateOnGyroscope(customEvent);
  }
  if (updateMouse) {
   updateMouse = false;
   updateOnMouse(customEvent);
  }
 }, 50)
 function updateOnMouse(e) {
  mouse.x = (Math.round( 200 * (e.clientX || e.pageX) / window.innerWidth) - 100) / 100;
  mouse.y = (Math.round( 200 * (e.clientY || e.pageY) / window.innerHeight) - 100) / 100;
  hills.style.transform      = &quot;translate3d(&quot; + mouse.x * 10  + &quot;px, &quot; + mouse.y * 10  + &quot;px, 0)&quot;;
  country.style.transform    = &quot;translate3d(&quot; + mouse.x * -5 + &quot;px, &quot; + mouse.y * -5 + &quot;px, 0)&quot;;
  foreground.style.transform = &quot;translate3d(&quot; + mouse.x * -10  + &quot;px, &quot; + mouse.y * -10  + &quot;px, 0)&quot;;
 }
 function updateOnGyroscope(e) {
  gyro.x = Math.round((e.beta % 90) * 10 / 9) / 100;
  gyro.y = Math.round((e.gamma % 90) * 10 / 9) / 100;
  hills.style.transform      = &quot;translate3d(&quot; + gyro.x * 20  + &quot;px, &quot; + gyro.y * 20  + &quot;px, 0)&quot;;
  country.style.transform    = &quot;translate3d(&quot; + gyro.x * -10 + &quot;px, &quot; + gyro.y * -10 + &quot;px, 0)&quot;;
  foreground.style.transform = &quot;translate3d(&quot; + gyro.x * -20 + &quot;px, &quot; + gyro.y * -20 + &quot;px, 0)&quot;;
  hills.style.webkitTransform      = &quot;translate3d(&quot; + gyro.x * 20  + &quot;px, &quot; + gyro.y * 20  + &quot;px, 0)&quot;;
  country.style.webkitTransform    = &quot;translate3d(&quot; + gyro.x * -10 + &quot;px, &quot; + gyro.y * -10 + &quot;px, 0)&quot;;
  foreground.style.webkitTransform = &quot;translate3d(&quot; + gyro.x * -20 + &quot;px, &quot; + gyro.y * -20 + &quot;px, 0)&quot;;
 }
</script>
<div id='window-resizer-tooltip' style='display: none;'><a href='#' title='Edit settings'/><span class='tooltipTitle'>Window size: </span><span class='tooltipWidth' id='winWidth'>1280</span> x <span class='tooltipHeight' id='winHeight'>773</span><br/><span class='tooltipTitle'>Viewport size: </span><span class='tooltipWidth' id='vpWidth'>1280</span> x <span class='tooltipHeight' id='vpHeight'>441</span></div></body>
</b:if>

مجدداً ابحث عن الوسم <head> وضع الكود التالى قبله (فوقه) مباشرة:

<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<style type='text/css'>
body { -webkit-animation: body 60s linear infinite; animation: body 60s linear infinite; background-color: #8dcce8; position: relative; -webkit-transition: background-color 10s ease; transition: background-color 10s ease; }
body:before, .clearfix:before { content: &quot; &quot; display: table; }
.top-nav, .logoads, .main-menu, .bigads, .main-wrapper, #copyrights { display: none; }
.stars { -webkit-animation: stars 60s linear infinite; animation: stars 60s linear infinite; background: url(https://cdn.travel.sygic.com/194dfc6c1a8c/img/error/sky.png) repeat center top, url(https://cdn.travel.sygic.com/194dfc6c1a8c/img/error/stars.png) no-repeat center top; bottom: 0; left: 0; opacity: 0; position: absolute; right: 0; top: 0; }
.sun-moon { height: 200%; width: 0; -webkit-animation: sun-moon 60s linear infinite; animation: sun-moon 60s linear infinite; left: 50%; position: absolute; top: 0; z-index: 10; }
.sun { height: 400px; width: 400px; background-color: #fbd461; border-radius: 200px; left: 0; margin: -200px 0 0 -200px; position: absolute; top: 0; }
.moon { height: 200px; width: 200px; background-color: #f4f3ef; border-radius: 100px; left: 0; margin: -100px 0 0 -100px; position: absolute; top: 100%; }
.hills { background-image: url(https://cdn.travel.sygic.com/194dfc6c1a8c/img/error/hills.png); bottom: 30px; height: 640px; z-index: 20; }
.country { background-image: url(https://cdn.travel.sygic.com/194dfc6c1a8c/img/error/country.png); bottom: 2px; height: 600px; z-index: 40; }
.background { background-position: center bottom; background-repeat: no-repeat; background-size: contain; box-sizing: content-box; left: -20px; padding: 0 20px; position: absolute; width: 100%; }
.foreground { background-image: url(https://cdn.travel.sygic.com/194dfc6c1a8c/img/error/foreground.png); bottom: -10px; height: 400px; z-index: 50; }
.error-content { bottom: 570px; font-size: 48px; position: absolute; text-align: center; text-shadow: 0 0 6px rgba(0, 0, 0, 0.2); width: 100%; z-index: 60; }
.button { height: 57px; width: 250px; border: 2px solid #fff; border-radius: 2px; bottom: 470px; display: inline-block; font-size: 18px; font-weight: 600; line-height: 55px; left: 50%; margin-left: -125px; overflow: hidden; position: absolute; text-align: center; z-index: 60; }
.code { bottom: 85px; font-size: 240px; font-weight: 800; left: 50%; line-height: 1; margin-left: -300px; position: absolute; text-align: center; text-shadow: 0 0 15px rgba(0, 0, 0, 0.3); width: 600px; z-index: 30; }
body:before, .clearfix:before { content: &quot; &quot; display: table; }
body:after, .clearfix:after { clear: both; content: &quot; &quot; display: table; }
* { box-sizing: border-box; }
html { background: white; font-size: 62.5%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
body { line-height: 1.5; margin: 0; padding: 0; position: relative; text-align: left; }
html, body { min-width: 320px; }
body, button, input, select, textarea { font-size: 16px; font-size: 1.6rem; color: #555; font-family: &#39; neo sans&#39; , alba-sans; }
::-moz-selection { background: #3197FC; color: #fff; text-shadow: none; }
::selection { background: #3197FC; color: #fff; text-shadow: none; }
hr { border: 0; border-bottom: 1px dotted #ccc; display: block; height: 0; margin: 21px 0; padding: 0; }
ins { color: #000; text-decoration: none; margin-bottom: 21px !important; }
ins ins { margin-bottom: 0 !important; }
ul, ol { margin: 0 0 21px 0; padding: 0 0 0 25px; }
dd { margin: 0 0 0 25px; }
.nav ul, .nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }
img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: top; max-width: 100%; }
@media screen and (max-width:600px) {img { height: auto; }}
svg:not(:root) { overflow: hidden; }
table { border-collapse: collapse; border-spacing: 0; }
td { vertical-align: top; }

/****************************/
*:focus { outline: 0; }
noscript { display: none; }
.overflow-hidden { height: 100%; overflow: hidden; }
.clear { clear: both; }

/* Hide from both screenreaders and browsers: h5bp.com/u */
.hidden, .print { display: none !important; visibility: hidden; }

/* Helping classes */
.left { float: left; }
.right { float: right; }
.text-left { text-align: left !important; }
.text-right { text-align: right !important; }
.text-center { text-align: center !important; }
.center { margin: 0 auto; }

/* Contain floats */
.small-screen { display: none; }
@media screen and (max-width:600px) {
  .small-screen { display: block; }
}
.small-screen-inline { display: none; }
@media screen and (max-width:600px) {
  .small-screen-inline { display: inline; }
}
@media screen and (max-width:600px) {
  .not-small-screen { display: none !important; }
}
.medium-screen { display: none; }
@media screen and (max-width:930px) {
  .medium-screen { display: block; }
}
@media screen and (max-width:930px) {
  .not-medium-screen { display: none !important; }
}
.on-touch { display: none; }
.touch .on-touch { display: block; }
.icon-go-to { display: none; line-height: 44px; margin-top: -22px; position: absolute; right: 0; text-align: center; top: 50%; width: 44px; }
.touch .icon-go-to { display: block; }
.external-links li p { margin: 0; }
.stupid-hack-to-workaround-jquerys-refocusing-onload-on-mobiles { height: 1px; width: 100%; background: #fff; display: block; margin-top: -1px; overflow: hidden; }
html, body { height: 100%; width: 100%; color: #fff; font-family: &#39; neo sans&#39; , alba-sans; font-weight: 400; overflow: hidden; position: relative; }
body { -webkit-animation: body 60s linear infinite; animation: body 60s linear infinite; background-color: #8dcce8; position: relative; -webkit-transition: background-color 10s ease; transition: background-color 10s ease; }
@media screen and (max-width:767px) {
  body { -webkit-animation: none; animation: none; }
}
@-webkit-keyframes body {
  0% { background-color: #8dcce8; }
  25% { background-color: #fe9900; }
  40% { background-color: #222; }
  60% { background-color: #222; }
  100% { background-color: #8dcce8; }
}
@keyframes body {
  0% { background-color: #8dcce8; }
  25% { background-color: #fe9900; }
  40% { background-color: #222; }
  60% { background-color: #222; }
  100% { background-color: #8dcce8; }
}
@media screen and (max-width:1024px), screen and (max-height:580px) {
  .stars { background-size: 50%, 75%; }
}
@media screen and (max-width:767px) {
  .stars { -webkit-animation: none; animation: none; }
}
@-webkit-keyframes stars {
  0% { opacity: 0; }
  33% { opacity: 0; }
  50% { opacity: 1; }
  66% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes stars {
  0% { opacity: 0; }
  33% { opacity: 0; }
  50% { opacity: 1; }
  66% { opacity: 1; }
  100% { opacity: 0; }
}
.sun-moon { height: 200%; width: 0; -webkit-animation: sun-moon 60s linear infinite; animation: sun-moon 60s linear infinite; left: 50%; position: absolute; top: 0; z-index: 10; }
@media screen and (max-width:767px) {
  .sun-moon { -webkit-animation: none; animation: none; }
}
.sun { height: 400px; width: 400px; background-color: #fbd461; border-radius: 200px; left: 0; margin: -200px 0 0 -200px; position: absolute; top: 0; }
@media screen and (max-width:1280px), screen and (max-height:720px) {
  .sun { height: 320px; width: 320px; border-radius: 160px; margin: -160px 0 0 -160px; }
}
@media screen and (max-width:1024px), screen and (max-height:580px) {
  .sun { height: 240px; width: 240px; border-radius: 120px; margin: -120px 0 0 -120px; }
}
@media screen and (max-width:767px) {
  .sun { height: 160px; width: 160px; border-radius: 80px; margin: -80px 0 0 -80px; }
}
.moon { height: 200px; width: 200px; background-color: #f4f3ef; border-radius: 100px; left: 0; margin: -100px 0 0 -100px; position: absolute; top: 100%; }
@media screen and (max-width:1280px), screen and (max-height:720px) {
  .moon { height: 160px; width: 160px; border-radius: 80px; margin: -80px 0 0 -80px; }
}
@media screen and (max-width:1024px), screen and (max-height:580px) {
  .moon { height: 120px; width: 120px; border-radius: 60px; margin: -60px 0 0 -60px; }
}
@media screen and (max-width:767px) {
  .moon { height: 80px; width: 80px; border-radius: 40px; margin: -40px 0 0 -40px; }
}
@-webkit-keyframes sun-moon {
  0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@keyframes sun-moon {
  0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
.background { background-position: center bottom; background-repeat: no-repeat; background-size: contain; box-sizing: content-box; left: -20px; padding: 0 20px; position: absolute; width: 100%; }
@media screen and (min-width:1881px) {
  .background { background-size: 100% auto; height: 100% !important; }
}
@media screen and (max-width:767px) {
  .background { left: -50%; padding: 0 50%; }
}
@media screen and (max-height:340px) {
  .background { margin-bottom: -30px; }
}
.code { bottom: 85px; font-size: 240px; font-weight: 800; left: 50%; line-height: 1; margin-left: -300px; position: absolute; text-align: center; text-shadow: 0 0 15px rgba(0, 0, 0, 0.3); width: 600px; z-index: 30; }
@media screen and (max-width:1680px) {
  .code { bottom: 75px; }
}
@media screen and (max-width:1440px) {
  .code { bottom: 60px; }
}
@media screen and (max-width:1280px), screen and (max-height:720px) {
  .code { bottom: 50px; }
}
@media screen and (max-width:1024px), screen and (max-height:580px) {
  .code { bottom: 35px; font-size: 200px; }
}
@media screen and (max-width:767px) {
  .code { bottom: 50px; font-size: 160px; left: 0; margin-left: 0; width: 100%; }
}
@media screen and (max-width:500px) {
  .code { bottom: 40px; }
}
@media screen and (max-height:400px) {
  .code { bottom: 30px; }
}
.code span { display: inline-block; }
.code span + span { margin-left: -64px; }
@media screen and (max-width:1024px), screen and (max-height:580px) {
  .code span + span { margin-left: -50px; }
}
@media screen and (max-width:767px) {
  .code span + span { margin-left: -40px; }
}
@media screen and (max-height:340px) {
  .code span + span { margin-left: -30px; }
}
@media screen and (max-height:340px) {
  .code { bottom: 10px; font-size: 120px; }
}
.error-content { bottom: 570px; font-size: 48px; position: absolute; text-align: center; text-shadow: 0 0 6px rgba(0, 0, 0, 0.2); width: 100%; z-index: 60; }
@media screen and (max-width:1280px), screen and (max-height:720px) {
  .error-content { bottom: 450px; font-size: 44px; }
}
@media screen and (max-width:1024px), screen and (max-height:580px) {
  .error-content { bottom: 400px; font-size: 40px; }
}
@media screen and (max-width:767px) {
  .error-content { bottom: 310px; font-size: 18px; }
}
@media screen and (max-height:440px) {
  .error-content { bottom: 270px; }
}
@media screen and (max-height:340px) {
  .error-content { top: 20px; }
}
.error-content a { color: #fff; text-decoration: underline; }
.error-content a:hover, .error-content a:focus { color: #fff; text-decoration: none; }
.button:hover, .button:focus { background-color: #fff; color: #222; opacity: 0.5; }
@media screen and (max-width:1280px), screen and (max-height:720px) {
  .button { bottom: 350px; }
}
@media screen and (max-width:1024px), screen and (max-height:580px) {
  .button { bottom: 280px; }
}
@media screen and (max-width:767px) {
  .button { bottom: 210px; }
}
@media screen and (max-height:440px) {
  .button { bottom: 190px; }
}
@media screen and (max-height:340px) {
  .button { top: 90px; }
}
</style>
</b:if>

إشترك في قناتنا على اليوتيوب لتتوصلو بجديد حلقاتنا التقنية
سبحان الله، والحمدلله، ولا إله إلا الله، والله أكبر
إذا أعجبك الموضوع فلماذا تبخل علينا بالردود المشجعة ؟!

تقني ويب

تأسست مدونة تقني ويب عام 2018 وهي قائمة بالخصوص على منصة بلوجر خلال ذلك أنشأنا أقسام تضم أفضل وأرقى القوالب من بلوجر، إلى ووردبريس وصولا للملفات المفتوحة، منها كذلك ملحقات متنوعة والعديد من الشروحات في مجال التدوين كما نقدم مسابقات وهدايا عديدة.

إضافة صفحة خطأ 404 متحركة إحترافية لقوالب بلوجر

هناك تعليق واحد:

معلومات عن التدوينة

إنضم إلينا

تقني ويب

المشاركات الشائعة

آحدث المواضيع

المشاركة المميزة

طريقة التسجيل في خدمة DoubleClick for Publishers

أقسام المدونة

التسميات

إنضم لصفحة مدونة تقني ويب

الصفحات

الأقسام

أرشيف المدونة

عن المدونة

إضافة صفحة خطأ 404 متحركة إحترافية لقوالب بلوجر

لماذا تعتبر الروابط المكسورة غير جيدة (سيئة) :

هناك تعليق واحد:

معلومات عن التدوينة

إنضم إلينا

تقني ويب

المشاركات الشائعة

آحدث المواضيع

المشاركة المميزة

طريقة التسجيل في خدمة DoubleClick for Publishers

أقسام المدونة

التسميات

إنضم لصفحة مدونة تقني ويب

الصفحات

الأقسام

أرشيف المدونة

عن المدونة

إتصل بنا

نمودج إتصال لصفحة راسلنا