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

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

وأخيرا ابحث عن الوسم </body>
وضع فوقه مباشرة الكود التالي
  </b:if>
ان واجهتك اي مشكلة اثناء التركيب فباب التعليقات مفتوح للجميع لطرح مشكلتك
ولا تنسو دعمنا واعطاءنا آراءكم لموضوع اليوم لنقدم المزيد من المواضيع الحصرية *-*

ملاحظة هــامة: يرجى ذكر مصدر التدوينة مع رابط الموضوع الاصلي عند نقل الموضوع وشكرا
اضافة صفحة خطأ قالب نقطة ماج

اضافة صفحة خطأ قالب نقطة ماج

هناك تعليقان (2):

  1. لو سمحت انا عايز اعرف انتا شارى الدومين الخاص بك من موقع اييية واشتريتة بكام
    وشرح طريقة شراء دومين مثلة لى
    ارجوك افدنى اخى الكريم

    ردحذف
    الردود
    1. الدومين اشتريته من موقع Lws الثمن متغير حسب العرض
      وطريقة الشراء بالبايبال, يمكنك شراء الدومين بطريقة عادية كما تشتري اي شيء من النت

      حذف

جميع الحقوق محفوظة نكهة التقنية | تصميم : الروسافي عمر