اضافة صفحة الخطا v2


 اهلا بكم متابعى الموقع. اضافة جديدة ومهمة جدا فى اى قالب مهما كان جميل او سى فهذة الاضافة تعطى جمالية على القالب بكل معنى الكلمة واضافاتنا تشهد بابداعنا فى ايصال كل مفيد😉 اليكم مجانا ومدفوع على حسب قيمته والمهم ان هذة الاضافة تكاد تكون معدومة فى الويب لانها اضافة ليست صعبة انما لا يراها البعض مهمة ولكن هى مهمة جدا ومن نشر او صمم هذة الاضافة يعرف مدى قيمتها واهميتها فى القوالب اترككم مع المعاينة وطريقة الاضافة
avatar طريقة الاضافة
الخطوة الاولى
  1.  خذ نسخة احتياطية من القالب لتجنب حدوث اى مشاكل او اخطاء (لوحة التحكم => قالب => نسخ احتياطى / استعادة => تنزيل النموذج الكامل)
  2.  افتح القالب من تحرير html
  3. ابحث عن <body> ثم اضف الكود التالى بعده مباشرة

<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<style>
body,html{height:100%;width:100%;overflow:hidden}body{font:normal normal 14px/19px Arial,sans-serif;letter-spacing:1px;margin:0;background:#FAEECF}::-moz-selection{background:#2D3363;color:#FAEECF}::selection{background:#2D3363;color:#FAEECF}.clearfix{display:inline-block}.clearfix::after{content:&quot;&quot;;visibility:hidden;display:inline-block;font-size:0;clear:both;height:0}.text{position:absolute;bottom:20px;left:25px;color:#2D3363;text-transform:uppercase;font-size:14px;line-height:28px;font-weight:bold;letter-spacing:2px;z-index:99}a{color:#6172BA;text-decoration:none;cursor:pointer}a:hover{text-decoration:underline}.obraz{position:absolute;width:400px;height:264px;top:50%;left:50%;margin-left:-200px;margin-top:-132px}@media (max-width:550px){.obraz{-webkit-transform:scale(0.75);transform:scale(0.75)}}@media (max-width:440px){.obraz{-webkit-transform:scale(0.5);transform:scale(0.5)}}.sweter{position:absolute;bottom:0;left:50%;width:400px;height:75px;overflow:hidden;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.sweter .kolor{position:absolute;top:0;left:50%;width:600px;height:600px;background:#FE591D;border-radius:600px;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.wlosy{position:absolute;top:0;left:50%;width:234px;height:75px;overflow:hidden;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.wlosy .kolor{position:absolute;top:0;left:50%;width:250px;height:250px;background:#FFCB1A;border-radius:250px;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.kok{position:absolute;top:-85px;left:50%;width:95px;height:95px;background:#FFCB1A;border-radius:95px;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.glowa{position:absolute;top:10px;left:50%;width:210px;height:210px;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.glowa::before{content:&#39;&#39;;position:absolute;top:0;left:0;width:210px;height:205px;background:#F7A98D;border-radius:210px}.glowa .nos{position:absolute;top:73px;left:50%;width:18px;height:30px;background:#FA7F59;border-radius:18px;-webkit-transform:translateX(-50%);transform:translateX(-50%);z-index:3}.glowa .oko{position:absolute;top:72px;width:13px;height:13px;background:#2D3363;border-radius:13px;-webkit-animation:oczy 10s infinite ease-in-out;animation:oczy 10s infinite ease-in-out}.glowa .oko.lewe{left:42px}.glowa .oko.prawe{right:42px}.glowa .szalik{position:absolute;bottom:7px;left:50%;width:230px;height:110px;background:#6172BA;background:repeating-linear-gradient(90deg, #2D3363, #2D3363 11px, #6172BA 11px, #6172BA 21px);-webkit-transform:translateX(-50%);transform:translateX(-50%)}.glowa .szalik .szal{position:absolute;top:0;right:41px;width:105px;height:210px;background:#6172BA;background:repeating-linear-gradient(0deg, #2D3363, #2D3363 11px, #6172BA 11px, #6172BA 21px)}.glowa .szalik .szal span{position:absolute;bottom:-32px;width:6px;height:32px}.glowa .szalik .szal span:nth-child(1){left:0px;background:#6172BA}.glowa .szalik .szal span:nth-child(2){left:16px;background:#2D3363}.glowa .szalik .szal span:nth-child(3){left:32px;background:#6172BA}.glowa .szalik .szal span:nth-child(4){left:48px;background:#2D3363}.glowa .szalik .szal span:nth-child(5){left:65px;background:#6172BA}.glowa .szalik .szal span:nth-child(6){left:82px;background:#2D3363}.glowa .szalik .szal span:nth-child(7){left:99px;background:#6172BA}.uszy{position:absolute;top:0;left:50%;width:234px;height:75px;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.uszy .ucho{position:absolute;bottom:-14px;width:22px;height:22px;background:#F7A98D;border-radius:20px}.uszy .ucho.lewe{left:2px}.uszy .ucho.prawe{right:2px}.kropla{opacity:0;position:absolute;width:16px;height:16px;background:#6172BA;border-radius:80% 0 55% 50% / 55% 0 80% 50%;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);-webkit-animation:deszcz 0.95s infinite ease-in-out;animation:deszcz 0.95s infinite ease-in}.kropla.pierwsza{top:0;left:5px;-webkit-animation-delay:0;animation-delay:0}.kropla.druga{top:-100px;left:100px;-webkit-animation-delay:0.25s;animation-delay:0.25s}.kropla.trzecia{top:-100px;right:100px;-webkit-animation-delay:0.75s;animation-delay:0.75s}.kropla.czwarta{top:-30px;right:5px;-webkit-animation-delay:1.10s;animation-delay:1.10s}@-webkit-keyframes oczy{0%,3%,6%,48%,51%,53%,100%{-webkit-transform:rotateX(0deg);transform:rotateX(0deg)}5%,50%,52%{-webkit-transform:rotateX(90deg);transform:rotateX(90deg)}}@keyframes oczy{0%,3%,6%,48%,51%,53%,100%{-webkit-transform:rotateX(0deg);transform:rotateX(0deg)}5%,50%,52%{-webkit-transform:rotateX(90deg);transform:rotateX(90deg)}}@-webkit-keyframes deszcz{0%{opacity:0;-webkit-transform:translateY(0) rotate(-45deg);transform:translateY(0) rotate(-45deg)}10%{opacity:1}90%{opacity:1}100%{opacity:0;-webkit-transform:translateY(300px) rotate(-45deg);transform:translateY(300px) rotate(-45deg)}}@keyframes deszcz{0%{opacity:0;-webkit-transform:translateY(0) rotate(-45deg);transform:translateY(0) rotate(-45deg)}10%{opacity:1}90%{opacity:1}100%{opacity:0;-webkit-transform:translateY(300px) rotate(-45deg);transform:translateY(300px) rotate(-45deg)}}
</style>
<div class='obraz'><span class='sweter'><span class='kolor'/></span><span class='glowa'><span class='oko lewe'/><span class='nos'/><span class='oko prawe'/><span class='szalik'><span class='szal'><span/><span/><span/><span/><span/><span/><span/></span></span></span><span class='kok'/><span class='wlosy'><span class='kolor'/></span><span class='wlosy'><span class='kolor'/></span><span class='uszy'><span class='ucho lewe'/><span class='ucho prawe'/></span><span class='kropla pierwsza'/><span class='kropla druga'/><span class='kropla trzecia'/><span class='kropla czwarta'/></div>
<p class='text'>
<a class='btn blue-hoki btn-outline sbold uppercase' href='/' style='position: static;display: block;margin: 0px auto;' type='button'>الرجوع للرئيسية </a>
Design by <a href='https://dribbble.com/shots/3111859-Miserable-Weather' target='_blank'>Jane Bowyer</a></p>
</b:if>
<b:if cond='data:blog.pageType != &quot;error_page&quot;'>

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

</b:if>
  1. احفظ القالب
المؤلفMI LOالتاريخ تعليقان (2)
مشاركة
التسميات,

تعليقات

  1. Unknown13‏/4‏/2017، 3:58 م

    المرحلة الأولى تمت بنجاح لكن حينما أضفتُ الكود الثاني ظهر لي التالي :\ http://i.imgur.com/pFZ9qA1.png
    أمن حلٍ يا ترى؟ الصفحة مهمة للغاية لأي مدونة لذا أود إضافتها يا رجل :| شكرًا لك على الدرس بطبيعة الحال ^^
    أنا من المتابعين الجدد

    ردحذف
    الردود
    1. MI LO13‏/4‏/2017، 9:54 م

      تم تحديث التدوينة وحل المشكلة
      اتمنى لك حياة موفقة

      حذف

الأرشيف

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

إرسال