How to Create and Setup Custom 404 Error Page In Blogger ?
Have you ever heard the term "Custom Error Page 404"? This is a modified 404 Error page that is more interesting. This time I will discuss "How to Create and setup Custom 404 Error Page in Blogger."
Let's do a quick survey: what do usually you do when you click a link and encounter a "404 File Not Found" error?
- Do you click on the BACK button of your browser and go somewhere else?
- Try to back up one directory in the URL (ie, web address) and try again?
- Write to the webmaster of the site and the referring site to inform them of the situation?
You thus need to do something so that you do not lose this group of people who come to your site by following an old link or by typing your URL incorrectly.
But Firstly,Let me explain what is Custom 404 Error Page ? and how it works ?
What Is Custom 404 Error Page?
Custom 404 error page are used to provide the best and interacting interface to your website or blog when someone enters wrong URL path or opens a broken URL by mistake. The main purpose of 404 error pages is to reduce Not Found errors in Google webmaster tools. And it also helps improve user engagement with your site.404 error pages are those web pages which are not available on your website or blog. And it display 404 not found error when anyone enters incorrect address in the browser.
How Custom 404 Error Page Works?
Customize 404 pages are those which we create to provide easy navigation to help the visitors by adding some HTML and CSS coding in our blogs.And it also helps improve user engagement with your blog.
Where Is The DEMO,Screenshot Of Custom 404 Error Page?
Wait!
There is it.
How To Create & Setup Custom 404 Error Page In Blogger!
From the above discussion I think you know a lot about Custom 404 error page,now just explain how to design this error page in blogger.If you wanna insert it to your blogger blog then follow the instructions below.
Instructions To Follow:
- Go to Blogger Dashboard→Your Blog
- Template→Edit HTML
- Search for that tag <meta charset='utf-8'/> by pressing Ctrl+F
- Copy and paste the code below under the code <meta charset='utf-8'/>
HTML Code:
<b:if cond='data:blog.pageType == "index"'>
<title><data:blog.pageTitle/></title>
<b:else/>
<b:if cond='data:blog.pageType != "error_page"'>
<title><data:blog.pageName/> - <data:blog.title/></title>
</b:if></b:if>
<b:if cond='data:blog.pageType == "error_page"'>
<title>Page Not Found - <data:blog.title/></title>
</b:if>
- Now find </head> tag in your template
- Copy the code below and paste it above code </head>
CSS Code:
<b:if cond='data:blog.pageType == "error_page"'>
<style type='text/css'>
.error-container{background-image: url(http://1.bp.blogspot.com/-zHS2luoiNTM/VTZJiQmK7RI/AAAAAAAAJxw/D1Kiy-euLXM/s1600/blog-bg.jpg);}
div#undefined-sticky-wrapper,div#blog_header,.container,#footer-wrapper,.backtotop,.top-menu,span.bg-opacity-inner,.bg-opacity p{display:none!important;margin:0;padding:0;overflow:hidden;}
#copyright {background-color:rgba(0,0,0,0.3);margin:auto;margin-top:-70px;}
.error-header{margin-top:-100px}
.error-title{line-height:42px}
.error-title span{background:#ed522e;padding:2px 10px;}
.error-image img{display:block;font-size:72px;font-weight:700;height:150px;margin:10px auto 40px}
.error-container{background-color:#101524;display:table;height:100vh;overflow-x:hidden;width:100%}
.error404 .anonymous{margin:0 auto 20px;display:block}
.error-404{background:rgba(0,0,0,.7);display:table-cell;vertical-align:middle}
.error-404 .page-content p{color:#c8c8c8}
.error-title{color:#fff;font-family:'Patua One',sans-serif;font-size:42px;font-weight:400;text-transform:uppercase;margin:.67em 0;text-align:center}
.search-title{font-size:48px;color:#3f3f46}
.page-content,.page-content p{color:#797979;font-size:18px;text-align:center}
.btn.back-to-home{background:none;border-radius:0;color:#fff;font-weight:400;left:40px;line-height:24px;opacity:.8;padding:10px 30px;position:absolute;text-transform:capitalize;top:40px;z-index:99}
.back-to-home:hover{color:#c9a96e;}
.back-to-home i{font-size:14px;margin-right:3px}
@media only screen and (max-width:479px){
.back-button-container{max-width:80%;width:80%}.page-content .back-to-home{width:100%;margin:10px auto}.error-header{margin-top:30px}.error-title{font-size:24px;line-height:32px}.page-content,.page-content p{font-size:14px}.error-404{padding-bottom:60px}.page-footer{padding:20px 10px}}
</style>
</b:if>
- Now find the tag <body> by pressing Ctrl+F
- Copy and paste the code below under the code <body>
HTML Code:
<b:if cond='data:blog.pageType == "error_page"'>
<div class='error-container'>
<a class='btn back-to-home' expr:href='data:blog.homepageUrl'><i class='fa fa-home fa-fw'/>Back to Home</a>
<section class='error-404 not-found text-center'>
<header class='error-header'>
<div class='error-image'>
<img alt='404' src='http://1.bp.blogspot.com/-Gb2gYMW4VC0/VTZJg0pSIrI/AAAAAAAAJxo/CXhWMecSCNI/s1600/anonymous.png'/>
</div>
<h1 class='error-title'><p><span>Oops!</span> That page can’t be found.</p> </h1>
</header>
<div class='page-content'>
<p>It looks like nothing was found at this location.</p>
</div>
</section>
</div>
</b:if>
- After this,SAVE your template.You have done successfully.
Visit your blog now and be the first to see it live.It must be working fine if you did not miss any step. The process is little long but well worth the time.If you're unable to get it working then you can leave a comment with your blog URL and I'll surely check it.Thanks.Stay Blessed!
Blogger! Congratulation: You have successfully Installed this plugin to your blogger blog!
