إضافة صفحة خطأ 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>

المصدر : http://www.teqniweb.com/

أحدث المشاركات

Post Top Ad

Post Top Ad

الثلاثاء، 27 أكتوبر 2020

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

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

ليست هناك تعليقات:

إرسال تعليق

Post Top Ad

عن المحرر

بحث هذه المدونة الإلكترونية

الإبلاغ عن إساءة الاستخدام

من أنا

آخر المشاركات

الشائعة

آخر التعليقات

الأرشيف

إعلان

#أرقام_الدعاة

التصنيفات

تواصل معنا

إضافات بلوجر

عن الموقع

نموذج الاتصال

أحدث المشاركات

Post Top Ad

Post Top Ad

الثلاثاء، 27 أكتوبر 2020

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

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

ليست هناك تعليقات:

إرسال تعليق

Post Top Ad

عن المحرر

تابعنا على صفحاتنا الإجتماعية

بحث هذه المدونة الإلكترونية

الإبلاغ عن إساءة الاستخدام

من أنا

آخر المشاركات

الشائعة

آخر التعليقات

الأرشيف

إعلان

#أرقام_الدعاة

التصنيفات

تواصل معنا

إضافات بلوجر

عن الموقع

نموذج الاتصال