How to customize 404 error page in Blogger? 07 tips to solve the problem of how to redirect 404 error page.

“Sorry, the page you were looking for in this blog does not exist.”

Oops..!!

Have you ever notice like that message when you are trying to log in to post page or page in blogger blog…?

Then that article is for you. Today we discuss How to customize 404 error page in Blogger? Especially this article will help your problem about how to redirect 404 error page to the homepage in blogger?

What is that 404 Page not found an error?

in simple word, that a blog/web page that does not exist on your blog/web site. That means when one of the visitors after clicking some link into our blog, because of bad, broken, expire or deleted post’s URL link or typed in a URL incorrectly visitor has landed on a “404 Page Not Found” Error page. Then visitor shows a message from the blogger that “Sorry, the page you were looking for in this blog does not exist.”

If you want to text How your error page looks? Then trying to open a page on your blog doesn’t exist. (Tip: add a random character after a slash that after the end of your blog’s URL. -  https://www.yourdomain.com/abcdefg  )

However, that message is not helpful to keep the readers on the site. As a result, when reader land on the 404 Page not found page, they will leave the site immediately. That is not good for Bloggers. It will cause to lose the readers for your blogger blog. But don’t worry about that issue because to fixed this issue blogger has an option to create a custom 404 message so bloggers can custom that error message with a friendly greeting, navigation links or a search box and any images. That 404 page has personalized recommendations along with a “call to action”, Then there is a huge chance that the readers will stay on the site. Yes, That’s good.

What you should include on yours customize 404 error page?

You should add minimum navigation links to help people find what they are looking for? The links can be navigating to your blog’s home page, a label, any other popular page or to popular posts.

Also, you can navigate them to

• Redirect to another post or page
• For your contact information
• Search box
• Link to subscribe
• For customize friendly greeting and a nice picture.
• Earn money by redirecting

How create your custom “Page Not Found” messages in your blogger blog?

1.     Log into your Blogger blog

2.    Go to Dash Board

3.    Go to Search Preferences

4.    Under “Errors and Redirections“click the option of Edit with the Custom Page Not Found

5.    Now there will be open the box and Copy & paste the One of below HTML Option.

6.   Click Save.

        Note: That HTML must be less than 10,000 characters.

If you want to text How your error page looks? Then trying to open a page on your blog doesn’t exist. (Tip: add a random character after a slash that after the end of your blog’s URL. -  https://www.yourdomain.com/abcdefg )

Tips for Some customize 404 error pages with Demos

1.For add Search box

<h2>Sorry, this page is no more exits </h2>

<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 blog" type="text" id="searchBox" onblur="if(this.value=='')this.value=this.defaultValue;" vinput="" name="q" /> <input id="searchButton" value="Go" type="submit" /></form>

Click here to view Demo Image

2. Custom page links to the homepage.

<div class='BB-404-box'>

<center>

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCDDZ5WET5ZSGOoZ00oRFZ0rom5i3Gam3Yr517jpw8RTvKES5zFuE9Z4mZUVTgvFOKlYyQKs0WRyrhSEpOgO0FXpYEnQl1pgBkmuaqYnRHD1m4yrjJBcgip2617kl3Kc36Zeqx2rK8P_QP/s1600/404-error-page.png" />

</center>

  <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)'>&#171; Go Back</a> </li>

    <li>Report the Problem to us by <a href='http://www.yourblogger.com/contact'>Clicking Here</a>&#160;&#160;&#160; (<em>This will help us serve you even better</em>) </li>

    <li>Go To Homepage by <a href='http://www.bbeginner.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>&#160;</p>

  <p align='center'/>

  <p align='center'><font size='5'>Page Not Found!</font></p>

<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;

}

.BB-404-box {

  background:#FFFFFF;

  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 #CCCCCC;

}

</style>

*Replace your blogger domain with www.yourblogger.com.

Click here to view Demo Image

3. A Custom message with links

<h2>Oops!</h2><p> <h3 align=”left”> Sorry that the page you are requesting isn’t more exits  in our blog.</h3></p>

<p align=”left”>But, here is the <strong>3 Best posts</strong> I’ve picked for you which can be useful to you.</p>

<ul align=left>

<li><a href=”http://yourdomain.blogspot.com/blog-post.html” target=”_blank”> title </a></li><br/>

<li><a href=”http://youromain.blogspot.com/blog-post.html” target=”_blank”> title</a></li><br/>

<li><a href=”http://yourdomain.blogspot.com/Thanks.html” target=”_blank”> Thanks for reading </a></li></ul>

<p align=”left”>And, I suggest you visit our<a href=”http://yourdomain.blogspot.com/”>Homepage</a> where you can see some of our latest posts.</p>

*Replace your blogger domain with yourdomain.blogspot.com.

click here to view demo image

4.Redirection for Homepage with message

Log into your Blogger blog>> Go to DashBoard >> Go to Search preferences>> Under Error and redirections you will see the “Custom Page Not Found“ option >> Click on Edit  >> Copy 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 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>

 That will be redirected within 5 seconds. (1000 = 1 second) you can customize it.

Click here to view demo image

5. Directly Redirection for Homepage without the message

Log into your Blogger blog >> Go to DashBoard >> Go to Search preferences >> Under Error and redirections you will see the “Custom Page Not Found “option >> Click on Edit  >> Copy paste the below code.

<script type = "text/javascript">

BSPNF_redirect = setTimeout(function() {

location.pathname= "/"

}, 5000);

</script>

 That will be redirected within 5 seconds. (1000 = 1 second) you can customize it.

6.If you want to create your own 404 Page Not Found page this guideline for you.

1.       Sign into blogger blog >> Go to Dash board >> Pages >> create a page

2.     Open the Post or page in Compose mode, insert images and texts and formatting them, design a page as you prefer.

3.       Click the save button but do not click the publish button.

  Note: That HTML must be less than 10,000 characters.

4.      After that open it in the HTML mode, then highlighted and copy that entire code. Then close it without publishing.

5.       Now open your Blog’s Search preferences settings

     

Log into your Blogger blog >> Go to Dash-board >> Go to Search preferences >> Under Error and redirections you will see the “Custom Page Not Found “option >> Click on Edit  

6.     In the edit box type in your message or paste the designed customize 404 error page HTML code

7.       Click Save changes.  

7. If you don’t interest any method in the above you can use that error page to earn money by redirecting your readers to your ad network direct link.

Keep in touch with Takitakibiz.com, we will discuss how to do that in the future post.

I Hope above 7 tips help you to solve the problem of how to redirect 404 error page to homepage in blogger blog. And if you have any problem or know more fixes on this 404 redirect issue, Please share with us in the comments section below. Thanks!