إضافة صفحة خطأ احترافية لمدونات بلوجر بشكل جديد

السلام عليكم ومرحبا بكم في مدونة عبدو تكنولوجي

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

لاكن اضافة اليوم تتميز بشكل حصري وانيق جدا يمكنك معاينته من هنا

شرح تركيب الاضافة

اولا إبحث على <body وضع الكود التالي اسفله مباشرة

<b:if cond='data:view.isError'><style type='text/css'>
/*<![CDATA[*/
.error-number,.wrapper{text-align:center;display:flex}.particles,.type,.wrapper{overflow:hidden}body{margin:0;font-family:inherit,sans-serif;background-color:#2196f3;background:linear-gradient(to top left,#2196f3,#080417);color:#fff}img{max-width:100%;height:auto}.particles{position:absolute;top:0;left:0;width:100%;height:100%}.wrapper{flex-wrap:wrap;justify-content:center;align-items:center;min-height:100vh;position:relative}.error-404{position:relative;z-index:999}.moon,.moon::after,.moon::before{position:absolute;border-radius:50%}.error-number{font-size:8rem;font-weight:700;line-height:1;justify-content:center;align-items:center;animation:scale 1.4s ease-in-out}.icon{width:7rem;max-height:8rem;margin:0 .2rem;animation:balance 3s ease infinite 1.3s}@keyframes scale{0%{opacity:0;transform:scale(.1)}100%{opacity:1;transform:scale(1)}}@keyframes balance{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,1rem,0)}}.type{font-size:1.2rem;font-weight:400;word-spacing:.4rem;letter-spacing:.1rem;white-space:nowrap;border-left:8px solid transparent;margin:2rem 0;animation:typing 3.5s steps(35,end) forwards 1.5s,blink .7s linear infinite 1.6s;opacity:0;width:0}@keyframes typing{0%{width:0;opacity:1}100%{width:100%;opacity:1}}@keyframes blink{0%{border-color:#fff}100%{border-color:transparent}}.moon{bottom:0;right:0;width:50vw;height:30vw;background-color:#eee;background:radial-gradient(#7b4e27 0,#fff 100%);transform:translate3d(20%,80%,0);box-shadow:0 0 3px 27vw rgba(96,83,142,.05),0 0 3px 18vw rgba(96,83,142,.1),0 0 3px 9vw rgba(96,83,142,.15);z-index:998}.moon::after,.moon::before{content:'';top:50%;left:50%;width:5%;height:4%;background-color:rgba(0,0,0,.1)}.moon::before{transform:translate3d(-400%,-1000%,0)}.moon::after{transform:translate3d(0,-600%,0);width:10%;height:6%}@media only screen and (max-width:48em){.type{font-size:.75rem;word-spacing:.2rem}}
/*]]>*/
</style><main class='wrapper'><div class='error-404'>
<div class='error-number has-animation'>
<span>4</span><span><img alt='' class='icon has-animation' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTavDFetB4WjQCB6zgn5yYRKUETaO9ZBPNvMGbgO51-JEF5BzADfLOcIUYT4wARNb7bJLV21smuHepM1ygjuZDQEJVolNfY9n7_OQFNdDhUd34MDAeMOwIb0u_pB6qCHFwbue2OhTNGO4/s1600/error404.png'/></span><span>4</span></div>
<h1 class='type has-animation'>
عفوا ,, هذه الصفحة غير متوفرة</h1>
</div>
<div class='moon'/>
</main></b:if>
<b:if cond='not data:view.isError'>

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

Forms

عبدو تكنولوجي

إضافة صفحة خطأ احترافية لمدونات بلوجر بشكل جديد

قد تُعجبك هذه المشاركات

تعليقات