Recommended: Custom Robots Header Tags Setting For Blogger Blog.
So, we should make a nice and creative style by some code in our Blogspot blog for a better look. First of all, now I will see you about the demo which I want to appreciate you for using your blogger blog. Please see this demo of our Error 404 Not Found Page.
404 Error Page Design For Blogger Blog
Blogspot is most powerful for blogging but it's have not more feature as like as WordPress. Wordpress is so easy for customizing, SEO setting and designing by using the plugin and his other codes or options but blogger is so critical for editing or setting this design or SEO option. So we need manually setting SEO and other important option which is recommended search engine algorithm like as 404 Not Found Page.
Recommended: How to SEO Optimize You Blogger Post Titles Updated.
Today I am gonna showing you how to set up your nice and customized 404 Not Found Page. This page raises your blog visitors from the broken link or the wrong page will important link and provide him three significant option they are bellow.
- Go Back to the main page from there where he came from. We will use JavaScript for that.
- 2nd option: contracts the blog admin for inform him about the broken link page or post. This option helps you for track and solve the broken link.
- 3rd Option: this option provides the visitors to homepage link.
- First, go to Blogger Dashboard > Settings > Search Preference.
- Click on Edit link beside Custom Page Nor Found.
- Inside the custom page not found box paste the following code:
<!-- MBT Default Template -->
<div class='MBT-404-box'>
<p style='line-height: 30px'><strong>
<font color='#ff0000' size='5'>
Oops!
</font> <font color='#666666'>
Looks like you either clicked a broken link or a Page that no more exits. Kindly do one of the followings:
</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='http://www.megaupdate24.com/p/blog-page_17.html'>Clicking Here</a>    (<em>This will help us serve you even better</em>) </li>
<li>Go To Homepage by <a href='http://www.megaupdate24.com/'>Clicking Here</a>
<br/></li>
</ol>
<p>
<br/>
<br/>
<br/></p>
<p align='center'><font color='#0080ff' style='font-size: 150px'><strong>404</strong></font></p>
<p> </p>
<p align='center'/>
<p align='center'><font size='5'>Page Not Found!</font></p>
</div>
- Now customize the Codes.
- The orange color codes http://www.megaupdate24.com/p/blog-page_17.html replace your contract page Link.
- The green color codes http://www.megaupdate24.com/ replace your homepage link.
- Now click the Save Change button and you are half way done.
Error 404 Not Found Page 2nd Step Setting Is
- Now go to blogger Template > Edit HTML.
- Search ]]></b:skin> inside the HTML code.
- Just under it paste the following code:
<b:if cond='data:blog.pageType == "error_page"'>
<style type='text/css'>
.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;
}
.MBT-404-box {
background:#fbbc05;
width:98%;
margin:10px 0px;
padding:20px 10px;
border:1px solid #ddd;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
box-shadow: 5px 5px 5px #4285f4;
}
</style>
</b:if>
- Now you are fully done.
- If you want to change your Background color Just change #fbbc05 it.
- Save your Blogger template.
- Finally Done.
http://www.megaupdate24.com/404Hopefully, you are successfully created Error 404 Not Found Page by following this post. If any problem for doing it you must inform me via comment. Don't forget to share it with social media like Facebook, Twitter, and Google+.
http://www.megaupdate24.com/xyz
http://www.megaupdate24.com/blabla
http://www.megaupdate24.com/anything what you want
