Here, We add custom page not found (404) Error Page in Blogger, It is very important page for our blog because when a visitor visits our blog and if they put wrong URL,
Then they are automatically Redirects to 404 Error Page.
These are Following Steps:-
Step 1: Go to Blogger Settings and click Search preferences link then click Edit link in Custom Page Not Found ? option.
Step 2: Paste the code in box and click the Save changes button.
404 Error Page Style Code:-
<div class='error-custom'>
<h2>404 Not Found</h2>
<p class='error-body'>We're sorry but we could not find the page you are looking for.<br/>
This may happen if you have entered site url incorrectly or this page doesn't exist anymore.</p>
<p>You can try searching page again or go back to home</p>
<form action='/search' id='searchform' method='get'>
<input id='s' name='q' onblur='if (this.value == "") {this.value = "Search...";}' onfocus='if (this.value == "Search...") {this.value = "";}' type='text' value='Search...'/>
<input id='searchsubmit' type='submit' value='Go'/>
</form><h6><a href="https://forzecode.blogspot.com"> Get More Widgets</a></h6>
</div>
<h2>404 Not Found</h2>
<p class='error-body'>We're sorry but we could not find the page you are looking for.<br/>
This may happen if you have entered site url incorrectly or this page doesn't exist anymore.</p>
<p>You can try searching page again or go back to home</p>
<form action='/search' id='searchform' method='get'>
<input id='s' name='q' onblur='if (this.value == "") {this.value = "Search...";}' onfocus='if (this.value == "Search...") {this.value = "";}' type='text' value='Search...'/>
<input id='searchsubmit' type='submit' value='Go'/>
</form><h6><a href="https://forzecode.blogspot.com"> Get More Widgets</a></h6>
</div>
<style
type="text/css"> #error-404 { border: 20px solid #1B1B1B;
border-radius: 240px 240px 240px 240px; height: 240px; margin: 0 auto
40px; text-align: center; transition: all 0.8s ease 0s; width: 240px; }
#error-404:hover { border-color: #333; } #error-404 span { color:
#FA4C29; font-size: 100px; font-weight: bold; line-height: 240px; }
.large-heading { font-size: 48px; line-height: 1.2em; } .light-heading {
font-weight: 400; } .status-msg-bg { background-color: transparent; }
.sidebar-wrapper, .page-header { display: none; } .main-wrapper {
margin-right: 0; } .outer-wrapper { min-height: 0; } .status-msg-border {
border: 0 none; } </style> <div id="error-404">
<span>404</span>
</div> <h2 class="large-heading" style="text-align: center;">Page not found.</h2>
<h3 class="light-heading" style="text-align: center;">Sorry, the page you were looking for on this blog does not exist.<br>You will be redirected shortly to the homepage.</h3>
<script type = "text/javascript">
BSPNF_redirect = setTimeout(function() {
location.pathname= "/"
}, 5000);
</script>
</div> <h2 class="large-heading" style="text-align: center;">Page not found.</h2>
<h3 class="light-heading" style="text-align: center;">Sorry, the page you were looking for on this blog does not exist.<br>You will be redirected shortly to the homepage.</h3>
<script type = "text/javascript">
BSPNF_redirect = setTimeout(function() {
location.pathname= "/"
}, 5000);
</script>