يونيو 14, 2017
اضافة بلوجر
السلام عليكم ورحمة الله تعالى وبركاته في موضوع جديد على قسم اضافات بلوجر, واليوم سنقدم لكم اضافة صفحة خطأ 404 أنيقة ومتحركة الموجودة بقالب نقطة ماج والذي أستعمل شخصيا, الصفحة جد احترافية لا تحتوي على صورة بل اكواد Svg يمكنك معاينتها لتكتشفها اكثر.
المصدر نكهة التقنية
معاينة
طريقة التركيب
- اولا قم بتحرير قالب مدونتك ثم ابحث عن الوسم <body
- وضع أسفله الأكواد التالية
<b:if cond='data:blog.pageType == "error_page"'>
<!-- 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;'>
عفواً ، الصفحة التي تبحث عنها غير موجوده
</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 != "error_page"'>
- وأخيرا ابحث عن الوسم </body>
- وضع فوقه مباشرة الكود التالي
</b:if>

ليست هناك تعليقات: