Search & Find

Sponsor Post

Best Telegram Groups List Collection - Updated

Monday 2 October 2017

How to Add Stylish 404 Error Page to Blogger blog with Pictures

Hello friends welcome to the Techtspot blog, today I will show you how to insert or add a Stylish 404 Error page into the Blogger blog with pictures.
Add Stylish 404 Error Page to Blogger

What is a 404 Error Page?

In any case, when users suddenly visit a different URL for a page or post which does not exist in our blog, website, online store then a 404 error page will be displayed.

Why we need to add a 404 Error Page in the blog?

404 error page also known as page not found, this page is displayed when a user can access a page or post which does not exist in our blog, website, or online store and the 404 error page is a very helpful and useful page for our visitors when visitors suddenly visit any wrong URL then this page will help the users how can they move or navigate to our website or blog.
For Example -> we have 
https://www.techtspot.com/p/about-us.html
this page but visitors suddenly visit
https://www.techtspot.com/p/about-us.htmla
above the URL, you can see the 404 page not found error page when page URL open.

Now I give you some points that help you to understand that how the 404 error page occurs and how you can avoid error page in the blogger platform >>
@1 When we are using blogger platform for blogging and then we are publishing nice and long content in it then share it newly publish a post in various social media platforms and make backlinks using bookmarking, news aggregator, image, article, audio, video, infographics, PPT, and PDF submission websites, here when we add anchor text in the content for backlink and sometimes the other websites add some additional attributes in our blog post URL then the URL cannot find in our blogger blog and then a 404-page error occurs, when you share your content in these third-party websites then carefully check your post URL first.
@2 In the blogger blog whenever you delete a particular post that is no longer used then you can delete it, so now the deleted post URL always give you a 404 error page, here when delete any page or post in your blog first you have to maintain it in the Excel-sheet and then you go to the blog redirect option and redirect it to another related post.
@3 Blogger platform has a label function you can categorize your publish posts very easily using label function but when we create label without thinking and in the future, we delete the particular label then it gives us 404 error page, so whenever you thinking about categorizing your posts in the Blogger platform then first think carefully about the Labels then create.

In the market, most of the CMS tools already have a 404 error page for example WordPress when we set up our blog or website in WordPress platform then WordPress platform by default gives us a 404 error page option but in the case of blogger platform, there is no 404 error page by default, so here we are adding our custom 404 error page or page not found in the Blogger blog, now let's start.

These are the Following Steps:-
Step 1: First go to the Blogger platform and click the Settings option and here scroll a little bit then find out the Error and redirect section, in this section, we can click the Custom 404 option.
Add Stylish 404 Error Page to Blogger 1
Step 2: Here a new pop-up window appears in the middle of the screen, now we just paste the custom 404 error page code and click the Save button.
Add Stylish 404 Error Page to Blogger 2
Normal 404 Error Page Code:-
Normal 404 Error Page Code
<div class='error-custom'><h2>404 Not Found</h2>
<p class='error-body'>We&#39;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&#39;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 == &quot;&quot;) {this.value = &quot;Search...&quot;;}' onfocus='if (this.value == &quot;Search...&quot;) {this.value = &quot;&quot;;}' type='text' value='Search...'/>
<input id='searchsubmit' type='submit' value='Go'/></form><br/><h6><a href="https://techtspot.blogspot.com/2017/10/add-stylish-404-error-pages-for-blogger.html" rel="nofollow">Get 404 Page Gadget</a></h6></div>
Click here for 5 Stylish 404 Error Pages Codes, you can select or choose which you like and suitable for your blog or website

Step 3: Now open the Blogger blog to check the results.

How we can check the 404 error page is activated in our blog, so first, visit your blog and then in the URL you just put some extra words For Example >
Your blog URL
www.your-blog.blogspot.com/
The 404 error page URL
www.your-blog.blogspot.com/aa

Now Visit the - Demo Blog to see the result.

Above I give you my demo blog link, where I enable the Stylish 404 Error page, if you are thinking to set up a stylish 404 error page in your blog then first look at the ERROR page how it looks like in the demo blog.

19 comments:

  1. 10 Stylish 404 Error Pages awesome

    ReplyDelete
  2. Hello, I want to know how traffic will come on blog posts.

    ReplyDelete
    Replies
    1. hello
      best way is google search result and this is possible when u focus on Blogger SEO

      Delete
  3. 404 Error code it working but images are big on my blog any solution ?

    ReplyDelete
    Replies
    1. hello sir using width option on img tag ex:- width="200"

      Delete
  4. Nice one .....this is really helpful. Thank you!

    ReplyDelete
  5. does not worked for my blog

    ReplyDelete
    Replies
    1. hi there
      please message me your blog URL and this trick only work on blogspot blogs.

      Delete
  6. HI,

    Thanks for sharing this useful post.

    ReplyDelete
  7. nice sir plz check my site ready for ads or not

    ReplyDelete