How To Add 404 Error Page In Blogger

One of the Most Exiting Feature was "404 Page Error" Redirection. "The 404 or Not Found Message" Might you have Seem Them On Many Websites or Blogs While Browsing. The "404 Error" is a simple HTTP standard response code that appears only when a broken link is clicked and it gives response to the user that the page he/she clicked no more exits or is deleted. Another reason behind this 404 error is change in URL structure due to which server do not respond to your requests properly. 
Blogger gives you default “404 error page” in plain text along with HTML tags inside the "Custom Page Not Found" input box using Search Preference option. Which is really frustrating and boring and might also result in the visitors never come back again therefore here we required a great looking “404 Error Page” to make our blogs even more attractive and beautiful. So here In this tutorial will help you out in setting up cool looking Custom “404 Error Page” for your blogs. Firstly have a screenshot of the 404 Error page below.

What is 404 Error Page ?

It is a web page which is being used by all websites to show the error when someone enters into a broken or not found location. In other words, when you enter an incorrect address then that page appears. Basically, In that page the error message and some options are added for better navigation.

Why 404 Error Is Displaying ?

The 404 errors are arising because of the page requested is not found. Before introducing this feature, Blogger was showing a default error page which was not customizable. It was same for every Blogger user.

How Customize Your Own 404 Page ?

It is now simple. You can set your content in Search Preferences in Settings. Under Errors and Redirection, select Edit option of Custom Page Found. Here you can enter The content.

How To Design a 404 Error Page ?

404 error page content uses the same style of status messages. In order to change the appearances, we need to add some CSS3 codes with content. Important CSS3 classes are below. It is easy to edit, no need of knowledge in CSS3.

How To Add 404 Error Page ?

  • Goto Blogger > Select your blog > Template > Edit HTML.
  • Add the following code before </body>
<b:if cond="data:blog.pageType == &quot;error_page&quot;">
#error-not-found {
    background: #ff0000;
    background: url( top center,-moz-radial-gradient(center 40%, circle cover, #ff0000 0%, #880000 100%);
    background: url( top center,-webkit-gradient(radial, center 40%, 0,  center 40%, 800, from(#ff0000), to(#880000) );  
#error-not-found  h1 {
        font-family:impact,sans serif!important;
        letter-spacing: -8px;
#error-not-found  h2 {
        font-family:arial black,sans serif!important;
        letter-spacing: -3px;
#error-not-found p a,
#error-not-found p a:visited,
#error-not-found p a:hover{
        font-family:arial black,sans serif!important;
        font-weight: bold;
<div id="error-not-found">
 <h1>404</h1> <h2>Ops..sorry</h2>
 <h2>Page Not Found</h2>
 <p> <a title="home page" href="/"> Back To Home page</a></p>
  • Save it. That's it. 

From The Editor's Desk

So Friend, I Know this Beautiful and Professional 404 Page Error Is Help Full For Gain More Visitors I Spent My 5 Hours To Write This Article Any Problem Then Comment Me.


Subscribe to our Newsletter

Get Free Tips and Guides to Make Money Online!


2016,13,2017,7,2018,18,2019,1,Adsense,8,Advertising,6,Affiliate Marketing,5,Alexa,1,Alternatives,2,Android,1,Announcements,1,Apps,6,Ask Me,9,Back linking,9,Backup,1,Bing,1,Black Friday,1,Blockquote,1,Blog Names,4,Blogging,27,Blogging Mistakes,6,Books,1,Branding Ideas,1,Business Tips,16,Career Advice,1,Case Study,6,Content Marketing,23,CSS,4,Customization,20,Digital Marketing,6,Domains,6,Downloads,1,eCommerce,3,Email Marketing,4,Entrepreneurship,15,Essay Writing,1,Event Blogging,2,Exclusive,39,Expert Roundups,4,Facebook,10,Facebook Marketing,2,Facts,2,Featured Snippet,1,Finance Tips,1,Forums,2,Freebies,3,Freelancing,4,Giveaways,1,Google,12,Google Adwords,1,Guest Contributions,89,Health Tips,2,Hosting,9,How To,138,Ideas,4,Images,1,Influencer Marketing,3,Info graphic,21,Inspiration,5,Instagram Marketing,1,Interviews,4,Jobs,6,Keywords Research,1,Make Money,59,Motivation,1,Newbie's Guide,82,News,28,NLB,9,Offline Business Ideas,2,Page Rank,4,Paid Reviews,1,PayPal,1,Pictorial,2,Posts,7,PSD Files,1,Quotes and Sayings,42,Reddit Marketing,1,Referral Earning,6,Relationship Tips,2,Review & Guide,14,Save Money,1,Self Improvement,3,Selling,1,SEO,49,SMO,4,SMS - Messages,1,Social Media,19,Social Media Marketing,7,Sponsors,5,Startups,1,Technology,2,Templates,8,Tips and Tricks,56,Tools,5,Tops and Lists,52,Traffic,15,Twitter,2,Video Marketing,1,Viral,2,Vlogging,4,Web Designing,10,Widgets,24,Wishes and Greetings,1,WordPress,11,Work at Home,10,Writing,31,YouTube,2,
item - Online Earning, Blogging, Content Marketing: How To Add 404 Error Page In Blogger
How To Add 404 Error Page In Blogger
The "404 Error" is a simple HTTP standard response code that appears only when a broken link is clicked and it gives response to the user that the page he/she clicked no more exits or is deleted learn more at blog post. - Online Earning, Blogging, Content Marketing
Viewing All Posts Bad, Try Again VIEW ALL Read More Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED! LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back To Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec Just now About 1 minute ago $$1$$ minutes ago 1 hour ago About $$1$$ hours ago Yesterday About $$1$$ days ago About $$1$$ weeks ago More than some weeks ago Followers Follow PREMIUM and Locked Please share to unlock this content Copy All Code Select All Code All coding here were copied to your clip-board If You can't copy the coding or text here, please press CTRL+C or CMD+C with Mac to copy now