السلام عليكم و رحمة الله تعالى و بركاته،إخواني أخواتي الكرام في هذا الدرس سوف نتعرف على كيفية إضافة صفحة خطأ " error 404 " بشكل إحترافي لمدونات بلوجر. وبأذن الله سوف أعرض عليكم اليوم شكلين من هذه الصفحة ، وسوف أشرح طريقة تركيبها بإسهاب .
وفي تحديثات بلوجر الأخيرة قامت بإضافة صفحة الخطأ من الإعدادات تسمح لك فقط بإضافة رابط مدونتك لظهور صفحة الخطأ عندما لا تتواجد صفحة أو حذفتها فالزائر يعلم بالرسالة أنه يوجد خطأ ، طبعا عندما تحدثت عن صفحة 404 الذي تتيحها لنا بلوجر فهي ليست بتصميم إحترافي .. فقط كتابة ، وهنا يأتي دورنا في إضافة صفحة الخطأ 404 بشكل إحترافي وجذاب .
ما فائدة صفحة الخطأ : تدور اهمية صفحة الخطأ حول كسب المزيد من الزواروأيضاً كسب عناكب البحث لمدونتك , بدون خروجهم من الموقع في حالة اتباعهم للرابط خاطئ.
1- الشكل الأول :
- طريقة التركيب :
1- اختر لوحة التحكم من مدونتك .
2- من لوحة التحكم اختر قالب ، ثم اضغط على تحرير قالب .
3- ابحث عن الوسم : <head>
4- ضع الكود التالي تحته.
<link href='//fonts.googleapis.com/earlyaccess/droidarabickufi.css' rel='stylesheet'/> 5- ابحث عن الوسم :</head>
6- ضع الكود التالي فوقه .
<b:if cond='data:blog.pageType != "error_page"'>
<title><data:blog.pageName/><data:blog.title/></title>
</b:if>
<b:if cond='data:blog.pageType == "error_page"'>
<title>نعتذر الصفحة غير موجودة <data:blog.title/></title>
</b:if>
<b:if cond='data:blog.pageType == "error_page"'>
<style type='text/css'>
.sidebar,.ct-wrapper, .header-wrapper, #header, #post-wrapper, #outer-wrapper, #footer-wrapper, #credit,.topwrapper,::-webkit-scrollbar,.banner,.topwrapper{display:none!important;margin:0;padding:0;overflow:hidden;}
/* CSS Error Page */
#oopss {background:#222;text-align:center;margin-bottom:50px;font-weight:400;font-size:30px;font-family:'Roboto Condensed',sans-serif;position:fixed;width:100%;height:100%;line-height:1.5em;z-index:9999;}
#error-text {top:30%;position:relative;font-size:30px;color:#aaa;}
#error-text a{color:#aaa;}
#error-text p {margin:0!important; font-family: droid arabic kufi;}
#error-text span {color:#aaa;font-size:120px;font-weight:700;letter-spacing:0.1em;}
#error-text a.back { display: inline-block;margin: 10px auto;background: #F23D3D;color: #fff;padding: 6px 10px 3px;font-size: 10px;font-weight: 700;line-height: normal;border-radius: 3px;transform: scale(1);transition: all 0.5s ease-out;}
#error-text a.back:hover {background:#181818;color:#fff;}
#error-text a.back:active {-webkit-transform:scale(0.95);-moz-transform:scale(0.95);transform:scale(0.95);background:#F23D3D;color:#fff;}
.fa-frown-o:before {content: "\f119";color: #F23D3D;}
.er-homeblogger {font-size: 18px!important;font-family: droid arabic kufi;}
/* CSS Error Page Responsive */
@media only screen and (max-width:640px){
#error-text {color:#aaa;font-size:20px;}
#error-text span {font-size:60px;}
#error-text a.back {padding:5px 10px;font-size:12px;}
#error-text a.back:hover,#error-text a.back:active {border:0;}}
</style>
</b:if> 7- ابحث عن الوسم : </body> :
8- ضع الكود التالي فوقه .
<b:if cond='data:blog.pageType == "error_page"'>
<div id='oopss'>
<div id='error-text'>
<span>4<i class='fa fa-frown-o'/>4</span>
<p> أخي الفاضل ... أختي الفاضلة ... هل فقدت الصفحة ؟</p>
<div class='er-homeblogger'> نعتذر من شخصك الكريم ...من عدم توافر الصفحة ... ويمكنك الآن...</div>
<p><a class='back' href='ضع رابط مدونتك هنا/'><i class="fa fa-home fa-2x"/> العودة للرئيسية</a></p>
<p>أو متابعتنا على مواقعنا الإجتماعية</p>
<div class='er-homeblogger'/>
<ul id='social-icons'>
<li><a class='back' href='http://feeds.feedburner.com/ضع اليوزرنيم هنا'>feeds<li class='fa fa-rss fa-4x'/></a></li>
<li><a class='back' href='http://www.twitter.com/ضع اليوزرنيم هنا'>twitter<li class='fa fa-twitter fa-4x'/></a></li>
<li><a class='back' href='http://www.facebook.com/ضع اليوزر نيم هنا'>facebook<li class='fa fa-facebook fa-4x'/></a></li>
<li><a class='back' href='https://plus.google.com/ضع اليوزرنيم هنا'>google+<li class='fa fa-google-plus fa-4x'/>
</a></li>
</ul>
</div>
</div>
</b:if> 2- الشكل الثاني :
- طريقة التركيب :
1- اختر لوحة التحكم من مدونتك .
2- من لوحة التحكم اختر قالب ، ثم اضغط على تحرير قالب .
3- ابحث عن الوسم :</body>
4- ضع الكود التالي فوقه .
<b:if cond='data:blog.pageType == "error_page"'>
<style>
/* www.homeblog7.blogspot.com */
#error-not-found {
background: #ff0000;
background: url(http://cdn.top4top.co/p_559nnqh1.gif)no-repeat top center,-moz-radial-gradient(center 40%, circle cover, #ff0000 0%, #880000 100%);
background: url(http://cdn.top4top.co/p_559nnqh1.gif)no-repeat top center,-webkit-gradient(radial, center 40%, 0, center 40%, 800, from(#ff0000), to(#880000) );
text-align:center;
position:fixed;
top:0px;
right:0px;
bottom:0px;
left:0px;
padding-top:200px;
z-index:999999;
}
#error-not-found h1 {
font-size:220px!important;
position:absolute;
font-family:'sultan_-_3_line_2sultan3line'!important;
top:90px;
left:50%;
letter-spacing: -8px;
margin-left:-502px!important;
width:960px;
z-index:-2;
color:rgba(0,0,0,.09)!important;
}
#error-not-found h2 {
font-family:'sultan_-_3_line_2sultan3line'!important;
text-transform:uppercase;
font-size:31px;
line-height:70px!important;
letter-spacing: -3px;
color:#fff!important;
margin:0!important;
padding:0!important;
}
#error-not-found p a,
#error-not-found p a:visited,
#error-not-found p a:hover{
font-family:'sultan_-_3_line_2sultan3line'!important;
text-transform:uppercase;
font-size:31px;
line-height:40px!important;
border:none;
font-weight: bold;
color:rgba(0,0,0,.5)!important;
margin:0!important;
padding:0!important;
text-decoration:none!important;
}
</style>
<div id='error-not-found'>
<h1>404</h1> <h2> أخي الفاضل ... أختي الفاضلة ...نعتذر لعدم وجود الصفحة... نرجو المعذرة ... </h2>
<h2>يمنكنك الرجوع إلى الصفحة الرئيسية أو متابعتنا عبر مواقعنا الإجتماعية</h2>
<p> <a href='ضع هنا رابط مدونتك' title='الرئيسية'> الرجوع للصفحة الرئيسية</a></p>
<ul class="social-icons">
<li><a class='back' href='http://feeds.feedburner.com/ضع هنا اليوزرنيم'>feeds<li class='fa fa-rss fa-4x'/></a></li>
<li><a class='back' href='http://www.twitter.com/ضع هنا اليوزرنيم'>twitter<li class='fa fa-twitter fa-4x'/></a></li>
<li><a class='back' href='http://www.facebook.com/ضع هنا اليوزرنيم'>facebook<li class='fa fa-facebook fa-4x'/></a></li>
<li><a class='back' href='https://plus.google.com/ضع هنا اليوزرنيم'>+google<li class='fa fa-google-plus fa-4x'/>
</a></li>
</ul>
</div>
</b:if> 5- احفظ القالب .
0 Comments:
إرسال تعليق