How To Set A Custom Page Not Found On Blogger - Farhan Tutorials

Latest:

BANNER 728X90 Ad Space Available for Rent

Tuesday, 18 April 2017

How To Set A Custom Page Not Found On Blogger



Blogger has the option to set a custom page not found message and redirect (if needed). For my personal blog I decided not to only add a small message whenever a user misspells any links (or if I delete older posts) but also to redirect them to my blog's homepage.


Follow the below easy steps and you're good to go:
Access your blogger draft and go to "Search preferences". Under "Error and redirections" you'll see the "Custom Page Not Found" option > click on Edit.

Copy and paste the below code:

<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 Content you were looking for on this Website/Blog does not exist.</h3>
<p>Try the search box below to find what you're looking for.</p>
<form id="searchThis" action="/search" style="display: inline; margin: 20px auto;" method="get"><input onfocus="if(this.value==this.defaultValue)this.value='';" value="Search this Website/Blog" type="text" id="searchBox" onblur="if(this.value=='')this.value=this.defaultValue;" vinput="" name="q" /> <input id="searchButton" value="Go" type="submit" /></form><br>

As you can see this is my demo blog Page not Found Code and the background is from my template not in this code so don't worry This code is transparent :)

The user will be presented with the above message

I hope you like the tutorial :)

Don't Forget to Subscribe my Channel for More Videos :)

No comments:

Post a Comment