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

آخر المواضيع

breaking/مقالات/9
بلوجر

إشترك في قناتنا على اليوتيوب لتتوصلو بجديد حلقاتنا التقنية

الخميس، 9 مارس، 2017

1:35:00 م

تكبير النص تصغير النص أعادة للحجم الطبيعي
السلام عليكم ورحمة الله تعالى وبركاته في موضوع جديد على قسم اضافات بلوجر, واليوم سنقدم لكم اضافة صفحة خطأ 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>
ان واجهتك اي مشكلة اثناء التركيب فباب التعليقات مفتوح للجميع لطرح مشكلتك
ولا تنسو دعمنا واعطاءنا آراءكم لموضوع اليوم لنقدم المزيد من المواضيع الحصرية *-*

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

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

      حذف
  2. لماذا لا تضع لنا صور لكيفية التعديل مثل هذه الاضافات
    لأنه يوجد كثير من من الأوسمة <body لذا لا يمكن لنا أن نعرف أيها الصحيحة
    أرجوا أن تفهمني

    ردحذف
    الردود
    1. اغلبية القوالب يتواجد فيه < body > واحد, ضع رابط مدونتك لاتمكن من مساعدتك

      حذف

مقالات