How to customize 404 error page in Blogger? - The WonderSpot - Know all in one spot
Breaking News:
Loading...

How to customize 404 error page in Blogger?

Add 404 error page into Blogger

“Sorry, the page you were looking for in this blog does not exist.”
 
Opps..!!
Have you ever notice like that massage when you are trying to log into post page or page in blogger blog…?
Then that article is for you. Today we discuss about  How to customize 404 error page in Blogger?Specially this article will help your problem about how to redirect 404 error page to homepage in blogger?
How to customize 404 error page in Blogger?

 What is that 404 Page not found error?
How to customize 404 error page in Blogger?
In simple word, that a blog/web page that does not exist on your blog/web site. That means when one of the visitor 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 show a massage from 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 exit. (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 the Bloggers. It will cause to loss 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 a good.

What you should include on yours customize 404 error page?

You should add a 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 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 exit. (Tip: add a random character after a slash that after the end of your blog’s URL. -  https://www.yourdomain.com/abcdefg )

Demo for Some customize 404 error pages


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>





2. Custom page links to homepage.

<div class='BB-404-box'>
<center>
<img src="https://lh3.googleusercontent.com/-qQJubaGtgv0/WTTic_WYEII/AAAAAAAAArM/ltAAfLTWqakC8VMYNaRGA2fsSwbbsMq-gCEw/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.


3.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 to 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.

4.Redirection for Homepage with message

Log into your Blogger blog >> Go to Dash Board >> Go to Search preferences >> Under Error and redirections yo 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 redirect within 5 seconds. ( 1000 = 1 second )  you can customize it.


5. Directly Redirection for Homepage without message

Log into your Blogger blog >> Go to Dash Board >> Go to Search preferences >> Under Error and redirections yo 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 redirect within 5 seconds. ( 1000 = 1 second )  you can customize it.


6.If you want to create your own 404 Page Not Found page this guide lines 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 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
 publish.
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 interested 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 thewonderspot.com, we will discuss how to do that in the future post.

Ok. Then I think you have a better understand about “404 Page Not Found” Error page in blogger and solve the problem of how to redirect 404 error page to homepage in blogger blog.


For more reading THEWONDERSPOT



How to start a Blog?..........................................................................>>>

How to Choose the Best Blogging Platform, advantages & disadvantage.....>>>

Thank you for reading-How to customize 404 error page in Blogger?
Good Luck.

Don’t forgot to Subscribe us to get latest news letters and give your feedback in below comment section ;-) ;-)

Post a Comment

0 Comments