لسلام عليكم و رحمة الله تعالى و بركاته،إخواني أخواتي الكرام في هذا الدرس سوف نتعرف على كيفية إضافة صفحة خطأ " error 404 " بشكل إحترافي لمدونات بلوجر. وبأذن الله سوف أعرض عليكم اليوم شكلين من هذه الصفحة ، وسوف أشرح طريقة تركيبها بإسهاب .
وفي تحديثات بلوجر الأخيرة قامت بإضافة صفحة الخطأ من الإعدادات تسمح لك فقط بإضافة رابط مدونتك لظهور صفحة الخطأ عندما لا تتواجد صفحة أو حذفتها فالزائر يعلم بالرسالة أنه يوجد خطأ ، طبعا عندما تحدثت عن صفحة 404 الذي تتيحها لنا بلوجر فهي ليست بتصميم إحترافي .. فقط كتابة ، وهنا يأتي دورنا في إضافة صفحة الخطأ 404 بشكل إحترافي وجذاب .
ما فائدة صفحة الخطأ : تدور اهمية صفحة الخطأ حول كسب المزيد من الزواروأيضاً كسب عناكب البحث لمدونتك , بدون خروجهم من الموقع في حالة اتباعهم للرابط خاطئ.
- طريقة التركيب :
1- ادخل إلى مدونتك ثم اختر لوحة الحكم .
2- من لوحة التحكم اختر قالب ثم اضغط على تحرير قالب .
3- ابحث عن الوسم : </head>
4 - اضف الكزد التالي فوقه .
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
// Set error
var error = $('section[data-error]');
error.attr('class', 'error error-' + error.attr('data-error'));
});
//]]>
</script>
6 -اضف الكود التالي تحته .
<!-- Start-->
<b:if cond='data:blog.pageType == "error_page"'>
<style>
.error-page-404 {
background: -webkit-radial-gradient(black 10%, transparent 11%) 0 0,
-webkit-radial-gradient(black 10%, transparent 11%) 8px 8px,
-webkit-radial-gradient(rgba(255,255,255,.1) 10%, transparent 15%) 0 1px,
-webkit-radial-gradient(rgba(255,255,255,.1) 10%, transparent 15%) 8px 9px;
background: -moz-radial-gradient(black 10%, transparent 11%) 0 0,
-moz-radial-gradient(black 10%, transparent 11%) 8px 8px,
-moz-radial-gradient(rgba(255,255,255,.1) 10%, transparent 15%) 0 1px,
-moz-radial-gradient(rgba(255,255,255,.1) 10%, transparent 15%) 8px 9px;
background: -o-radial-gradient(black 10%, transparent 11%) 0 0,
-o-radial-gradient(black 10%, transparent 11%) 8px 8px,
-o-radial-gradient(rgba(255,255,255,.1) 10%, transparent 15%) 0 1px,
-o-radial-gradient(rgba(255,255,255,.1) 10%, transparent 15%) 8px 9px;
background: -ms-radial-gradient(black 10%, transparent 11%) 0 0,
-ms-radial-gradient(black 10%, transparent 11%) 8px 8px,
-ms-radial-gradient(rgba(255,255,255,.1) 10%, transparent 15%) 0 1px,
-ms-radial-gradient(rgba(255,255,255,.1) 10%, transparent 15%) 8px 9px;
background:
radial-gradient(black 10%, transparent 11%) 0 0,
radial-gradient(black 10%, transparent 11%) 8px 8px,
radial-gradient(rgba(255,255,255,.1) 10%, transparent 15%) 0 1px,
radial-gradient(rgba(255,255,255,.1) 10%, transparent 15%) 8px 9px;
background-color:#282828;
-webkit-background-size:16px 16px;
-moz-background-size:16px 16px;
background-size:16px 16px;
text-align:center;
position:fixed;
top:0px;
left:0px;
bottom:0px;
right:0px;
padding-top:50px;
z-index:999;
}
header, section, footer { text-align: center; margin:20px 0 0 0; }
section { margin-top: 25px; }
.ribbon { margin-top: 20px; }
.error-logo {margin-top: 0px;}
/* transitions */
#n1, #n2, #n3 { -webkit-transition-duration: 2s; -moz-transition-duration: 2s; -o-transition-duration: 2s; -ms-transition-duration: 2s; transition-duration: 2s; }
/* errors */
.error { background-position: center 185px; background-repeat: no-repeat; }
.error .number { width: 348px; height: 225px; margin: 0 auto; }
#n1, #n2, #n3 { float: right; width: 100px; height: 150px; margin: 0 8px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3RZUhJKGoaUlX_SVEOzDCxgH6luiBcAdyih7gzBGrDCSs-zfUcRetBHXu92SriTR_HODUJ1kSJjO5TlaeO6PWRHzYqN8epRpDBMsh3KWin2mbPdbjFs9crYAxwr-a4sDzUK8Jvu48zZc/s1600/numbers.png) 0 -1500px repeat-y; }
.error-404 #n1 { background-position: 0 -600px; }
.error-404 #n2 { background-position: 0 0; }
.error-404 #n3 { background-position: 0 -600px; }
#error-not-found h1{
font-family:arial ,sans serif!important;
text-transform:uppercase;
font-size:50px;
line-height:50px!important;
border:none;
font-weight: bold;
color:#131313!important;
text-shadow: 0px 1px 1px #4d4d4d;
margin:0!important;
padding:5px!important;
text-decoration:none!important;
}
#error-not-found h2 {
font-family:arial black,sans serif!important;
text-transform:uppercase;
font-size:55px;
line-height:50px!important;
border:none;
font-weight: bold;
color:#191B1C!important;
text-shadow: 0px 1px 1px #4d4d4d;
margin:0!important;
padding:5px!important;
text-decoration:none!important;
}
#error-not-found p a{
font-family:arial black ,sans serif!important;
text-transform:uppercase;
font-size:40px;
border:none;
font-weight: bold;
color:#111111!important;
text-shadow: 0px 1px 1px #4d4d4d;
margin:0!important;
padding:5px!important;
text-decoration:none!important;
}
/* footer */
footer {
height: 92px;
background: url() 0 0 repeat-x;
margin:80px auto 0 auto;
}
footer .container {
width: 552px;
height: 32px;
margin: 0 auto;
padding: 20px 0;
}
footer .engine{
z-index: 99999;
display:block;
position:absolute;
top:-47px;
margin-right:770px;
width:175px;
height:40px;
background:url() no-repeat right top;
padding:0
}
footer .search .field{
float:right;
display:inline;
height:40px;
width:135px
}
footer .search .field input{
color:#ccc;
border:0;
background:transparent;
font-size:11px;
margin:3px 10px 0 0;
padding:4px;
width:110px
}
footer .search .button{
float:right;
display:inline;
height:40px;
width:37px;
cursor:pointer;
border:0;
background:url(http://cdn.top4top.co/p_560arxe1.png) no-repeat 0 0
}
footer .search { display: block; width:173px; height: 32px; margin: 0 auto; background:url(http://cdn.top4top.co/p_560mcp21.png) no-repeat right top; }
</style>
<div class='error-page-404'>
<div class='error-logo'><img alt='' src='http://cdn.top4top.co/p_5608upr1.gif'/></div>
<header>
<div class='ribbon'><img alt='' src='http://cdn.top4top.co/p_560d9hn1.gif'/></div>
</header>
<section class='error' data-error='404'>
<div class='number'>
<div id='n1'/>
<div id='n2'/>
<div id='n3'/>
</div>
</section>
<div id='error-not-found'>
<h1> الصفحة غير موجودة</h1>
</div>
<footer>
<div class='container'>
<div class='search'>
<form action='/search' id='searchthis' method='get'>
<div class='field'><input name='q' onblur='if (this.value == "") {this.value = "Search...";}' onfocus='if (this.value == "Search...") {this.value = "";}' type='text' value='Search...'/></div>
<input class='button' type='submit' value=''/>
</form>
</div>
</div>
<div id='error-not-found'>
<p><a href='/'>انقر هنا للذهاب إلى الصفحة الرئيسية</a></p>
</div>
</footer>
</div>
</b:if>
7- ابحث عن السطر التالي :
<b:includable id='main' var='top'> 8 - ضع الكود التالي تحته .
<b:if cond='data:numPosts == 0'>
<data:navMessage/>
</b:if> 9- وأخيراً أحف القالب .
0 Comments:
إرسال تعليق