Wednesday, August 1, 2018

August 01, 2018

How to customize 404 error page in Blogger?

Hello Friends…!!

“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?
 What is that 404 Page not found error?
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 )

Some of 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>


Sorry, this page is no more exits

Try the search box below to find what you're looking for.


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.

Oops! Looks like you either clicked a broken link or a Page that no more exits. Kindly do one of the followings:
  1. « Go Back
  2. Report the Problem to us by Clicking Here    (This will help us serve you even better)
  3. Go To Homepage by Clicking Here



404

Page Not Found!

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.

Oops!


Sorry that the page you are requesting isn’t more exits in our blog.


But, here is the 3 Best posts I’ve picked for you which can be useful to you.
  • title

  • title

  • Thanks for reading
And, I suggest you to visit our Homepage where you can see some of our latest posts.



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.


404

Page not found.

Sorry, the page you were looking for on this blog does not exist.
You will be redirected shortly to the homepage.




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 blogge.


For more reading THEWONDERSPOT

........................................................................................................................................................................................................................
EMoneySpot  -  Earn with us..........................................................................................>>>
........................................................................................................................................................................................................................

 How to earn money online.......................................................................................>>>

Improve organic SEO rankings while EARN MONEY (0.05/0.10$) per view.......>>>

How to take screenshots in windows 10 : Different Methods?................................>>>

Free Bandwidth Monitoring Tools For windows PC?.............................................>>>

Abnormally high internet bandwidth usage, c-0001.c-msedge.net of window 10....................>>> 

How to Speed up Internet connection on Windows 10..............................................................>>>

How to Disable Automatic Updates in Microsoft Office 2016?.................................................>>>

How to Disable Automatic Updates in Microsoft Office 2016?..................................................>>>

How to Block Windows 10 "Spying"? ........................................................................................>>>

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

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

How to make your blog SEO friendly?........................................................................................>>>


All in one SEO pack for Blogger blog..........................................................................................>>>

Thank you for reading.
Good Luck.

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

0 comments:

Post a Comment

Thank you for visit us.
Give your feedback. Don't worry. Your email is safe with us.
Subscribe us to get latest news letters.

amazon

 
Copyright © The WonderSpot All Right Reserved
Powered by Blogger