السلام عليكم ورحمة الله تعالى وبركاته
اليوم كباقي الايام احضرنا لكم اضافة رائعة من مدونة عرب ويب وهي اضافة او تغير شكل صفحة الخطأ 404 الى شكل جذاب ورائع ونعلم ان صفحة الخطأ هي اهم عناصر القالب ولا يمكن ان نستغني عنها وصفحة الخطأ الجذابة يمكنها جذب الزائر فتخيل انك دخلت لرابط معين وضهرت لك صفحة ببيضاء تماما ومكتوب عليها 404 وغير منسقة فتعرف ان هذا الموقع الذي دخلتله غير منسق وليس به تدوينات او مواضيع شيقة لاكن نحن في تقني الانترنت سنجعل الزائر لا يعود الى الخلف اذا دخل لصفحة الخطأ.
يمكنك معاينة الصفحة من هنا
شرح طريقة تركيب الإضافة
1 . توجه لقالب ثم تحرير
2. ابحث بإستعمال CTRL+F عن <b:skin/><[[
3. اضف الكود التالي فوقه
#error-page{background-color:#142D3A;position:fixed!important;position:absolute;text-align:center;top:0;right:0;bottom:0;left:0;z-index:99999}
#error-inner{margin:11% auto}
.box-404{position:relative;font-weight:bold;width:700px;height:210px;color:#fff;margin:0 auto;}
#error-inner h2{text-transform:uppercase;color:#fff;font-size:50px;margin:0 auto 20px;font-family:Electrolize,ge_ss_tvbold;background-color:#34647E;margin:5px}
#error-inner h1{text-transform:uppercase;color:#FFB616;padding-top:10px;font-family: droid arabic kufi;
font-weight: 600;}
#error-inner p{line-height:0.7em;font-size:15px;color:#999;font-family: droid arabic kufi;
font-weight: normal;}
#social-icons li{float:left;width:147px;height:147px;margin:10px 6px 6px 0;padding:0 0 0 0;border-bottom:none;list-style:none}
#social-icons li a{line-height:1px;display:block}
#social-icons li a:hover img{-webkit-opacity:0.8;-moz-opacity:0.8;opacity:0.8}
#social-icons li a span{display:none!important}
4. ابحث عن <body> ضع الكود التالي اسفله
<b:if cond='data:blog.pageType != "error_page"'>
5. ابحث عن </body> ضع الكود الأتي فوقه
</b:if>
<b:if cond='data:blog.pageType == "error_page"'>
<div id='error-page'>
<div id='error-inner'>
<h2> الصفحة غير موجودة : 404</h2>
<h1>نعتذر إن لم تجد ما تبحث عنه</h1>
<p>بإمكانك العودة لصفحة الرئيسية<br/><br/> الصفحة الرئيسية <a expr:href='data:blog.homepageUrl' expr:title='data:blog.title'><data:blog.title/></a> تابعنا على الشبكات الإجتماعية</p>
<div class='box-404'>
<ul id='social-icons'>
<li class='rss-icon'><a href='http://feeds.feedburner.com/ar1web' target='_blank'><img height='147' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyqQnQi8W4_rpbZ59Hr5gDH29AgC3zwBz4XcQ7h5TeJuMZOB5Yz8SRe7n3vTHY6OBthnrMvCGLwTO0CrkxGwO4x7zJO8BvIJzOHAoXP8P5mMa4p3YYebrcLyioFtWRFC3UDDc6EwI0VQ/s1600/rss.png' width='147'/></a></li>
<li class='twitter-icon'><a href='http://www.twitter.com/ar1web' target='_blank'><img height='147' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6aHOek9A_9HEwmM3iD_l2FswleaPo_fBkhkdPAbIGJ8-7J8PmDX60uZP_pZpKFLFBXpRQ6BbmGKeMCSw8d1Ptf5zo6yyZ5PIIeR1H3rMG1iryv0uRGzOMw7F_7B2mUDIEZdWdP3pf4g/s1600/twitter.png' width='147'/></a></li>
<li class='facebook-icon'><a href='http://www.facebook.com/arabe1web' target='_blank'><img height='147' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhM-iNanT8g9I2BsepOEachKd9nsztpJxWpR2SPjt_Yuv9-R20udCHZ7C0RCteEK_9Yh5tJdr7f4yXrOf7RZuP3nApdnw-qTNQnpYasU1aCqoG8PUisetoinkMqMLWg3kSHtEjB0ciuBw/s1600/facebook.png' width='147'/></a></li>
<li class='google-icon'><a href='https://plus.google.com/+iHussam' target='_blank'><img height='147' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIP_WPQ9aoWAZcaPEeJ4NW8Bbgmch5Tq27Njka30yvfNSkpw8Cb59UQC7GCXvk-oUp6cGHn7Jeu6QN0RjuIKypDGI28jYgLPFjqVEHLkBNEaays_uFM-ctDvS4VqvRRoINuTejBA70tA/s1600/google.png' width='147'/></a></li>
</ul>
</div>
</div></div></b:if>
- غير العبارات المحددة بالصفر بالعبرات التي تناسك.
- وغير الروابط بروابط صفحاتك الشخصية على الشبكات الاجتماعية
مصدر الاكواد والاضافة مدونة عرب ويب
تجربة تعليق
ردحذف