اضافة صفحة خطأ جذابة V1

شارك :

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

معاينة


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


  1. اولا قم بتحرير قالب مدونتك ثم ابحث عن الوسم <body
  2. وضع أسفله الأكواد التالية

<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<!-- Error Page | Nak1ha.com -->
<a expr:href='data:blog.homepageUrl'>
<svg class='svg' style='enable-background:new 0 0 800 800;' version='1.1' viewBox='0 0 800 800' x='0px' xml:space='preserve' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' y='0px'>
<g id='object'>
<ellipse class='st7' cx='408.3' cy='620.2' rx='119.9' ry='14.8'/>
<g>
<g>
<path class='st6' d='M392.4,604.7c-0.6-1.5-2.5-2.7-4.2-2.7l-22.7,0.5c-1.6,0-4.3,0.5-5.8,1.1l-12.9,4.8     c-1.5,0.6-1.5,1.2,0.2,1.4l17.4,1.9c1.6,0.2,3.5,1.6,4.1,3.1l1.1,2.9c0.6,1.5,2.2,2,3.6,1.1l8.3-5.7c1.4-0.9,3.6-1,5-0.2l10,6.1     c1.4,0.9,2,0.3,1.4-1.2L392.4,604.7z'/>
<path class='st6' d='M470.2,616.2l-7.2-11.7c-0.9-1.4-2.9-2.3-4.5-1.9l-19,4.3c-1.6,0.4-4,1.4-5.4,2.3l-9.8,6.5     c-1.4,0.9-1.1,1.6,0.5,1.4l14.8-1.1c1.6-0.1,3.7,0.9,4.5,2.4l1.5,2.6c0.8,1.4,2.4,1.6,3.5,0.3l5.8-6.7c1.1-1.2,3.2-1.7,4.7-1.1     l9.4,4C470.6,618.2,471.1,617.6,470.2,616.2z'/>
</g>
<path class='st6' d='M447.9,402.6c-24.5,0-31.3,13.8-32.4,35.5c-3.6-21.7-13.1-35.5-37.6-35.5c-44.6,0-80.7,45.1-80.7,100.8    c0,42.8,10.4,81.5,53.8,95.5c12.4-1,19.3-7,29.5-7c20.9,0,30.3-7.1,34.3-20.3c2,13.2,9.4,20.3,30.3,20.3c10.3,0,17.2,6,29.5,7    c41.9-20.2,53.8-52.6,53.8-95.5C528.6,447.8,492.5,402.6,447.9,402.6z M417.4,503.9c0-0.9,0-1.9,0-2.8    C417.4,502,417.4,503,417.4,503.9c0,0.8,0,1.7,0,2.5C417.4,505.6,417.4,504.7,417.4,503.9z'/>
<path class='st8' d='M469.7,602.2c2.5-1.1,4.2-2.3,5.1-3.3c18.3-20.2,71.2-83.3,48-136.3c-9.5-21.6-18-57.7-47.5-75.2    c-7.5,12.5-19.1,14-19.1,14s-25.6-5.9-43-6c0,0,0,0,0,0c-0.1,0-0.2,0-0.3,0c-0.1,0-0.2,0-0.3,0c0,0,0,0,0,0c-17.4,0.1-43,6-43,6    s-11.6-1.5-19.1-14c-29.5,17.5-38,53.6-47.5,75.2c-23.2,52.9,34.9,128.2,48,136.3c6.5,4,34.9,12.4,63.8,12.2    C437.7,610.9,459.6,606.7,469.7,602.2'/>
<circle class='st5' cx='360.4' cy='477.6' r='52.7'/>
<circle class='st5' cx='463.9' cy='477.6' r='52.7'/>
<g>
<circle class='st9' cx='453.9' cy='477.6' r='42.7'/>
<g>
<circle class='st10 eye' cx='453.9' cy='477.6' r='26.3'/>
<circle class='st11 eye' cx='453.9' cy='477.6' r='14.9'/>
<circle class='st10 eye' cx='461.4' cy='466.6' r='8.3'/>
</g>
</g>
<g>
<circle class='st9' cx='370.4' cy='477.6' r='42.7'/>
<g>
<circle class='st10 eye' cx='370.4' cy='477.6' r='26.3'/>
<circle class='st11 eye' cx='370.4' cy='477.6' r='14.9'/>
<circle class='st10 eye' cx='377.9' cy='466.6' r='8.3'/>
</g>
</g>
<path class='st11' d='M402.2,489.6c0,0,5.3-4,12.7-4c7.3,0,12.7,4,12.7,4s-8.3,22.7-12.7,22.7S402.2,489.6,402.2,489.6z'/>
<g>
<circle class='st5' cx='383.7' cy='550.5' r='8.1'/>
<circle class='st5' cx='403.7' cy='570.5' r='8.1'/>
<circle class='st5' cx='418' cy='542.4' r='8.1'/>
<circle class='st5' cx='432' cy='570.7' r='8.1'/>
<circle class='st5' cx='451.2' cy='548.8' r='8.1'/>
</g>
</g>
<path class='st5 heart five' d='M451.4,343.5c-0.5-2.8-1.8-5.3-3.9-7.3c-2.1-2-4.7-3.3-7.5-3.7c-0.7-0.1-1.3-0.1-2-0.1c-5,0-9.6,2.7-11.9,7.1   c-2.4-4.3-6.9-7.1-11.9-7.1c-0.7,0-1.3,0-2,0.1c-2.8,0.4-5.4,1.7-7.5,3.7c-2.1,2-3.4,4.5-3.9,7.3c-0.8,4.3,0.5,8.6,3.5,11.8   c0.4,0.5,1,1.2,1.5,1.7c0.2,0.2,0.3,0.4,0.5,0.5c3.2,3.7,10.4,10.6,15.1,14.9c1.2,1.1,2.8,1.7,4.3,1.8c0.1,0,0.3,0,0.4,0   c0.1,0,0.2,0,0.4,0c1.6-0.1,3.1-0.7,4.3-1.8c4.8-4.3,11.9-11.2,15.1-14.9c0.1-0.2,0.3-0.4,0.5-0.5c0.5-0.6,1.1-1.2,1.5-1.7   C450.9,352.1,452.1,347.9,451.4,343.5z M425.9,372.7c0.1,0,0.2,0,0.3,0c0,0-0.1,0-0.1,0C426,372.7,426,372.7,425.9,372.7z'/>
<path class='st5 heart four' d='M491.5,291.6c-0.4-2.1-1.4-3.9-2.9-5.4c-1.5-1.5-3.4-2.4-5.5-2.7c-0.5-0.1-1-0.1-1.5-0.1c-3.7,0-7.1,2-8.8,5.2   c-1.8-3.2-5.1-5.2-8.8-5.2c-0.5,0-1,0-1.5,0.1c-2.1,0.3-4,1.2-5.5,2.7c-1.5,1.5-2.5,3.4-2.9,5.4c-0.6,3.2,0.4,6.4,2.6,8.7   c0.3,0.4,0.7,0.9,1.1,1.3c0.1,0.1,0.2,0.3,0.4,0.4c2.4,2.7,7.7,7.8,11.2,11c0.9,0.8,2,1.3,3.2,1.3c0.1,0,0.2,0,0.3,0   c0.1,0,0.2,0,0.3,0c1.2,0,2.3-0.5,3.2-1.3c3.5-3.2,8.8-8.3,11.2-11c0.1-0.1,0.2-0.3,0.4-0.4c0.4-0.4,0.8-0.9,1.1-1.3   C491.1,298,492.1,294.9,491.5,291.6z M472.7,313.2c0.1,0,0.1,0,0.2,0c0,0-0.1,0-0.1,0C472.8,313.2,472.7,313.2,472.7,313.2z'/>
<path class='st5 heart three' d='M421,257.5c-0.4-2.1-1.4-3.9-2.9-5.4c-1.5-1.5-3.4-2.4-5.5-2.7c-0.5-0.1-1-0.1-1.5-0.1c-3.7,0-7.1,2-8.8,5.2   c-1.8-3.2-5.1-5.2-8.8-5.2c-0.5,0-1,0-1.5,0.1c-2.1,0.3-4,1.2-5.5,2.7c-1.5,1.5-2.5,3.4-2.9,5.4c-0.6,3.2,0.4,6.4,2.6,8.7   c0.3,0.4,0.7,0.9,1.1,1.3c0.1,0.1,0.2,0.3,0.4,0.4c2.4,2.7,7.7,7.8,11.2,11c0.9,0.8,2,1.3,3.2,1.3c0.1,0,0.2,0,0.3,0s0.2,0,0.3,0   c1.2,0,2.3-0.5,3.2-1.3c3.5-3.2,8.8-8.3,11.2-11c0.1-0.1,0.2-0.3,0.4-0.4c0.4-0.4,0.8-0.9,1.1-1.3   C420.6,263.9,421.5,260.7,421,257.5z M402.1,279.1c0.1,0,0.1,0,0.2,0c0,0-0.1,0-0.1,0S402.2,279.1,402.1,279.1z'/>
<path class='st5 heart one' d='M432.8,170.1c-0.2-1.3-0.8-2.5-1.8-3.4c-1-0.9-2.1-1.5-3.4-1.7c-0.3,0-0.6-0.1-0.9-0.1c-2.3,0-4.4,1.3-5.5,3.2   c-1.1-2-3.2-3.2-5.5-3.2c-0.3,0-0.6,0-0.9,0.1c-1.3,0.2-2.5,0.8-3.4,1.7c-1,0.9-1.6,2.1-1.8,3.4c-0.3,2,0.2,4,1.6,5.4   c0.2,0.2,0.5,0.5,0.7,0.8c0.1,0.1,0.2,0.2,0.2,0.3c1.5,1.7,4.8,4.9,7,6.8c0.5,0.5,1.3,0.8,2,0.8c0.1,0,0.1,0,0.2,0c0,0,0.1,0,0.2,0   c0.7,0,1.4-0.3,2-0.8c2.2-2,5.5-5.1,7-6.8c0.1-0.1,0.1-0.2,0.2-0.3c0.2-0.3,0.5-0.6,0.7-0.8C432.5,174,433.1,172.1,432.8,170.1z    M421.1,183.5c0,0,0.1,0,0.1,0C421.2,183.5,421.2,183.5,421.1,183.5C421.1,183.5,421.1,183.5,421.1,183.5z'/>
<path class='st5 heart two' d='M470.9,219.3c-0.3-1.8-1.2-3.3-2.5-4.6c-1.3-1.3-2.9-2.1-4.7-2.3c-0.4-0.1-0.8-0.1-1.3-0.1   c-3.1,0-6,1.7-7.5,4.4c-1.5-2.7-4.3-4.4-7.5-4.4c-0.4,0-0.8,0-1.3,0.1c-1.8,0.3-3.4,1.1-4.7,2.3c-1.3,1.3-2.2,2.9-2.5,4.6   c-0.5,2.7,0.3,5.4,2.2,7.4c0.3,0.3,0.6,0.7,0.9,1.1c0.1,0.1,0.2,0.2,0.3,0.3c2,2.3,6.5,6.6,9.5,9.3c0.7,0.7,1.7,1.1,2.7,1.1   c0.1,0,0.2,0,0.2,0c0.1,0,0.2,0,0.2,0c1,0,2-0.4,2.7-1.1c3-2.7,7.5-7,9.5-9.3c0.1-0.1,0.2-0.2,0.3-0.3c0.3-0.4,0.7-0.8,0.9-1.1   C470.5,224.7,471.3,222,470.9,219.3z M454.9,237.6c0.1,0,0.1,0,0.2,0C455,237.6,455,237.6,454.9,237.6   C454.9,237.6,454.9,237.6,454.9,237.6z'/>
</g>
</svg>
  </a>
<h4 style='background: #fff;padding: 12px; display: block; font-size: 17px;'>
عفوا&#1611; &#1548; الصفحة التي تبحث عنها غير موجوده
  </h4>
<style>
  h4{color:$(keycolor);}
.st5{fill:#ED6245;}
.st6{fill:#0C5054;}
.st7{opacity:0.1;fill:#231F20;}
.st8{fill:#F6B344;}
.st9{fill:#F1E4C4;}
.st10{fill:#FFFFFF;}
.st11{fill:#231F20;}
.heart.one{
    transform: translateY(300px);
    opacity: 0;
    animation:heart 8s 0s linear forwards infinite;
    -o-animation:heart 8s 0s linear forwards infinite;
    -moz-animation:heart 8s 0s linear forwards infinite;
    -webkit-animation:heart 8s 0s linear forwards infinite;
}
.heart.two{
    transform: translateY(300px);
    opacity: 0;
    animation:heart 8s .5s linear forwards infinite;
    -o-animation:heart 8s .5s linear forwards infinite;
    -moz-animation:heart 8s .5s linear forwards infinite;
    -webkit-animation:heart 8s .5s linear forwards infinite;
}
.heart.three{
    transform: translateY(300px);
    opacity: 0;
    animation:heart 8s 1s linear forwards infinite;
    -o-animation:heart 8s 1s linear forwards infinite;
    -moz-animation:heart 8s 1s linear forwards infinite;
    -webkit-animation:heart 8s 1s linear forwards infinite;
}
.heart.four{
    transform: translateY(300px);
    opacity: 0;
    animation:heart 8s 1.5s linear forwards infinite;
    -o-animation:heart 8s 1.5s linear forwards infinite;
    -moz-animation:heart 8s 1.5s linear forwards infinite;
    -webkit-animation:heart 8s 1.5s linear forwards infinite;
}
.heart.five{
    transform: translateY(200px);
    opacity: 0;
    animation:heart 8s 2s linear forwards infinite;
    -o-animation:heart 8s 2s linear forwards infinite;
    -moz-animation:heart 8s 2s linear forwards infinite;
    -webkit-animation:heart 8s 2s linear forwards infinite;
}
@-webkit-keyframes heart{
    0%{opacity: 0;}
    10%{opacity: 1;}
    100%{opacity: 1;transform: translateY(-600px)}
}
.eye{  
    animation:eye 10s 2s linear forwards ;
    -o-animation:eye 10s 2s linear forwards ;
    -moz-animation:eye 10s 2s linear forwards ;
    -webkit-animation:eye 10s 2s linear forwards ;
}
@-webkit-keyframes eye{
    0%{}
    10%{transform: translateX(20px)}
    20%{transform: translateX(20px)}
    30%{transform: translateX(-20px)}
    40%{transform: translateX(-20px)}
    50%{transform: translateX(20px)translateY(-20px)}
    60%{transform: translateX(20px)translateY(-20px)}
    70%{transform: translateX(-20px)translateY(20px)}
    80%{transform: translateX(-20px)translateY(20px)}
    90%{transform: translateX(20px)}
    100%{transform: translateX(0px)translateY(0px)}
}
body{
background-color: #fff;
    text-align: center;
overflow:hidden;
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
.svg {
    width: 420px;
    max-width: 100%;
}
.ball1{
    background: crimson;
    width: 5px;
    height: 5px;
}
.ball2{
    background: lightgreen;
    width: 20px;
    height: 20px;
}
.ball3{
    background: #ff00f5;
    width: 15px;
    height: 15px;
}
.ball4{
    background: #0000ff;
    width: 10px;
    height: 10px;
}
.ball5{
    background: #f5ff00;
    width: 5px;
    height: 5px;
}
.ball-effect{
    animation: grow 0.5s linear forwards;
    border-radius: 100%;
    position: fixed;
    z-index: 999999999;
}
div#changerColor {
    display: none;
}
@keyframes grow {
    0%{}
    100%{
        height: 100px;
        width: 100px;
        opacity: 0;
    }
}
</style>
  </b:if>
<b:if cond='data:blog.pageType != &quot;error_page&quot;'>

  1. وأخيرا ابحث عن الوسم </body>
  2. وضع فوقه مباشرة الكود التالي

  </b:if>

ان واجهتك اي مشكلة اثناء التركيب فباب التعليقات مفتوح للجميع لطرح مشكلتك



ولا تنسو دعمنا واعطاءنا آراءكم لموضوع اليوم لنقدم المزيد من المواضيع الحصرية *-*

شارك :

إنسانية نملة

إضافات بلوجر

بلوجر

دعم بلوجر

لا تقرأ وترحل .. شارك قول رأيك

0 تعليقات:

أداة الإبتسامات لتضمين رموز تفاعلية في التعليقات
:) :( =( :waaa: :s ^_^ :D =D ^:D @@, ;) :-bd :-d :yaya: :'( T_T :\ :p B) :Q :Ozz 7:( \o/ \m/ **p &amp;lt;3 0:) ^o^ :-a 7:O *fck* xV x@ X@ ~x( &amp;lt;:) &amp;lt;=) (-.-,) *=p =p* ''J :W :bye: :imhere: :cendol: :rolled: *bang* :drummer: :guitarist: :vocalist:
أداة محول الأكواد لتضمين شفرة في التعليقات
تحليل
تضمين عناصر منسقة في التعليقات

لتضمين -رابط- نص قابل للنقر إستعمل:

<a href="https://www.google.com/">إسم الرابط</a>

لتضمين شريحة صور إستعمل:

<i rel="img">رابط الصورة</i>

لتضمين إقتباس فقرة إستعمل:

<i rel="quote">نص الإقتباس</i>

لتضمين فيديو من يوتيوب إستعمل:

<i rel="video">معرف الفيديو</i>

موصي به لك

تقارير تشير لمغادرة رئيس كوريا الشمالية العاصمة إلى مكان مجهول

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

إنسانية نملة