How to create professional custom 404 Error Pages for Blogger 2016
How to create professional custom 404 Error Pages for Blogger 2016
404 error pages are the web pages which doesn’t exists. In short, If you will enter an incorrect URL in the address bar then the page will appear is called ” 404 error page ” If that will not be exists. Recently we have covered many articles on 404 error pages which you can read to know more about it.
Recently one of our reader asked us through an email that how we can create a professional looking custom 404 error page for blogger blog that’s why I have decided to cover an article on this topic. In default 404 error page of blogger, blogger will just shows a message saying ” Sorry, the page you were looking for in this blog does not exist “.
But In custom 404 error page, we can add several features to our those readers who accidentally lands on the 404 error pages. We can customize it by giving the option to contact us, option to go to at the homepage of the blog etc.
Go to Blogger.com >> Settings >> Search Preferences >> Custom Page Not Found under Errors and Redirection section as showing in the below image.
404 error pages are the web pages which doesn’t exists. In short, If you will enter an incorrect URL in the address bar then the page will appear is called ” 404 error page ” If that will not be exists. Recently we have covered many articles on 404 error pages which you can read to know more about it.
Recently one of our reader asked us through an email that how we can create a professional looking custom 404 error page for blogger blog that’s why I have decided to cover an article on this topic. In default 404 error page of blogger, blogger will just shows a message saying ” Sorry, the page you were looking for in this blog does not exist “.
But In custom 404 error page, we can add several features to our those readers who accidentally lands on the 404 error pages. We can customize it by giving the option to contact us, option to go to at the homepage of the blog etc.
Go to Blogger.com >> Settings >> Search Preferences >> Custom Page Not Found under Errors and Redirection section as showing in the below image.
Then Click on Edit then a box will appear as showing in the above image where you need to paste the following code.
<!– Worldwide tricks –>
<p style=’line-height: 30px’><strong>
<font color=’#ff0000′ size=’5′>
Oops!
</font> <font color=’#666666′>
It seems that you have accidentally landed on this page which does not exists because you may have either clicked on a broken link or entered the wrong URL in the address bar. Right
??? <br/> Kindly do one of the followings to go to the correct location of this blog :
</font></strong></p>
<ol style=’line-height: 25px’>
<li><a href=’javascript:history.go(-1)’>« Go Back</a> </li>
<li>Report the Problem to us by <a href=’ENTER YOUR CONTACT PAGE URL HERE‘>Contacting Us Here</a>    (<em>This will help us to serve you even better</em>) </li>
<li>Go To Homepage by <a href=’HOMEPAGE URL HERE‘>Clicking Here</a>
<br/></li>
<li>Search Anything Using Below Search Box</li>
</ol>
<br />
<center><form _lpchecked=’1′ action=’/search’ class=’search-form’ id=’search_mini_form’ method=’get’>
<input id=’searchinput’ name=’q’ onblur=’if (this.value == '') {this.value = 'Type Here & Hit Enter';}’ onfocus=’if (this.value == 'Search the site') {this.value = '';}’ type=’text’ value=’Type Here & Hit Enter’/>
<input id=’searchbutton’ style=’vertical-align: top;’ type=’submit’ value=’Search!’/>
</form></center>
<p>
<br/>
<br/>
<br/></p>
<p align=’center’><font size=’5′>Page Not Found!</font></p>
<br /> <br /> <br />
<p align=’center’> <font style=’font-size:150px; font-weight:bold;’ color=’red’> 404 </font></p>
<style>
.status-msg-wrap {
font-size: 100%;
margin: none;
position: static;
width: 100%;
}
.status-msg-border {
display:none
}
.status-msg-body {
padding: none;
position: static;
text-align: inherit;
width: 100%;
z-index: auto;
}
.status-msg-wrap a {
padding: none;
text-decoration: inherit;
}
#sidebar-wrapper, #midsidebar-wrapper, .gapad2, .blog-pager, .post-header-line-1, .post-footer , #rsidebar-wrapper { display:none !important;} #main-wrapper { width:98%!important;} .post { width:98%!important; }
#searchinput {
<p style=’line-height: 30px’><strong>
<font color=’#ff0000′ size=’5′>
Oops!
</font> <font color=’#666666′>
It seems that you have accidentally landed on this page which does not exists because you may have either clicked on a broken link or entered the wrong URL in the address bar. Right
??? <br/> Kindly do one of the followings to go to the correct location of this blog :</font></strong></p>
<ol style=’line-height: 25px’>
<li><a href=’javascript:history.go(-1)’>« Go Back</a> </li>
<li>Report the Problem to us by <a href=’ENTER YOUR CONTACT PAGE URL HERE‘>Contacting Us Here</a>    (<em>This will help us to serve you even better</em>) </li>
<li>Go To Homepage by <a href=’HOMEPAGE URL HERE‘>Clicking Here</a>
<br/></li>
<li>Search Anything Using Below Search Box</li>
</ol>
<br />
<center><form _lpchecked=’1′ action=’/search’ class=’search-form’ id=’search_mini_form’ method=’get’>
<input id=’searchinput’ name=’q’ onblur=’if (this.value == '') {this.value = 'Type Here & Hit Enter';}’ onfocus=’if (this.value == 'Search the site') {this.value = '';}’ type=’text’ value=’Type Here & Hit Enter’/>
<input id=’searchbutton’ style=’vertical-align: top;’ type=’submit’ value=’Search!’/>
</form></center>
<p>
<br/>
<br/>
<br/></p>
<p align=’center’><font size=’5′>Page Not Found!</font></p>
<br /> <br /> <br />
<p align=’center’> <font style=’font-size:150px; font-weight:bold;’ color=’red’> 404 </font></p>
<style>
.status-msg-wrap {
font-size: 100%;
margin: none;
position: static;
width: 100%;
}
.status-msg-border {
display:none
}
.status-msg-body {
padding: none;
position: static;
text-align: inherit;
width: 100%;
z-index: auto;
}
.status-msg-wrap a {
padding: none;
text-decoration: inherit;
}
#sidebar-wrapper, #midsidebar-wrapper, .gapad2, .blog-pager, .post-header-line-1, .post-footer , #rsidebar-wrapper { display:none !important;} #main-wrapper { width:98%!important;} .post { width:98%!important; }
#searchinput {
background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR66F9HEbWpNDv1QGTUI7VuQZl19WiXLXHW0-8UwJYg2Dx-tCb1rCCCQLoUCSA-mU4f6xjJ5PgvKff6aJa_b5XWtydd8KguM_ncdQuPakgAiEiXUsq3cHJxxkrkCTZB0KCfZiQXATUZwOI/s0/search.png) no-repeat 7px 8px;
background-color: #FFF;
border: 1px solid #ddd;
color: #A0A0A0;
display: inline-block;
font-family:arial;
font-size: 12px;
font-weight:bold;
height: 24px;
width:300px;
margin: 0;
margin-top: 5px;
padding: 5px 15px 5px 28px;
vertical-align: top;
}
#searchinput:hover{
border: 1px solid #bebebe;
box-shadow: 0 1px 2px rgba(5, 95, 255, .1);
padding: 5px 15px 5px 28px;
}
#searchbutton {
background:#444;
color:#fff;
height:35px;
border-radius:5px 5px 5px 5px;
box-shadow:1px 2px 1px 1px #ABABAB;
border:1px solid #fff;
margin-top:3px;
padding:8px;
}
#searchbutton:hover{background:#555;}
</style>
background-color: #FFF;
border: 1px solid #ddd;
color: #A0A0A0;
display: inline-block;
font-family:arial;
font-size: 12px;
font-weight:bold;
height: 24px;
width:300px;
margin: 0;
margin-top: 5px;
padding: 5px 15px 5px 28px;
vertical-align: top;
}
#searchinput:hover{
border: 1px solid #bebebe;
box-shadow: 0 1px 2px rgba(5, 95, 255, .1);
padding: 5px 15px 5px 28px;
}
#searchbutton {
background:#444;
color:#fff;
height:35px;
border-radius:5px 5px 5px 5px;
box-shadow:1px 2px 1px 1px #ABABAB;
border:1px solid #fff;
margin-top:3px;
padding:8px;
}
#searchbutton:hover{background:#555;}
</style>
Replace ” ENTER YOUR CONTACT PAGE URL HERE ” with your blog’s contact page link.
4. Replace ” HOMEPAGE URL HERE ” with your blog’s homepage link.
5. Click on SAVE CHANGES & You are Done.
This was the complete tutorial to Create Professional Custom 404 Error Page for Blogger Blog. Now after following the above steps, you can easily create your custom 404 page for blogger. If you wants to check that how your custom 404 page looks then simply enter any wrong URL in the address bar like http://www.yourblog.com/404 etc & you will see your hard work there.
Post a Comment