Create 404 Fault Page For Blogger

Blogger of late introduced 404 mistake pages along alongside novel SEO update. How to customize the default 404 mistake condition message inwards Blogger together with practice beautiful mistake page.

With the introduction of 404 mistake page, Blogger is placing some other stride inwards SEO.

Why 404 mistake is displaying?

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

How to customize your ain 404 page

It is straight off simple. You tin laid upwards your content inwards Search Preferences inwards Settings. Under Errors together with Redirections, lead Edit pick of Custom Page Found. Here y'all tin larn into The content.

How to pattern a 404 mistake page

404 mistake page content uses the same fashion of condition messages. In gild to alter the appearances, nosotros postulate to add together some CSS codes alongside content. Important CSS classes are below. It is slow to edit, no postulate of cognition inwards CSS.

 <style> .status-msg-bg {background-color: #CCCCCC;} .status-msg-body{text-align:left;background:#fff;} .status-msg-border{border: 0 none;} .status-msg-wrap{font-size:15px;line-height:29px;} h2 {font-size:30px;} h3 {font-size:20px;} </style> 

To laid upwards the background of mistake page, alter #CCCCCC together with #fff inwards to a desired value. First ane is the background color together with mo ane is the trunk color.
Border color tin survive changed using the 3rd trouble .status-msg-border. Change border: 0 none; into border: 1px corporation #000000 for changing edge color into black. If y'all don't wishing edge color, utilization border: 0 none; .
Change font-size value for changing font size. utilization h2 font-size value for changing header font size. h3 font-size tin survive used for subheadings.

Where to position this CSS codes

Don't position this CSS codes inwards your template because it volition overwrite all other condition message styles. If y'all wishing to position this inwards your Template, respect ]]></b:skin> together with add together next code simply above.

 <b:if cond='data:blog.pageType == "error_page"'> <style type='text/css'> .status-msg-bg {background-color: #CCCCCC;} .status-msg-body{text-align:left;background:#fff;} .status-msg-border{border: 0 none;} .status-msg-wrap{font-size:15px;line-height:29px;} h2 {font-size:30px;} h3 {font-size:20px;} </style> </b:if> 

Now Go to Custom Page Not Found inwards Search Preferences of Settings. Add condition message equally y'all want. Here is an example.

 <div style='align:center'><img src='https://lh4.googleusercontent.com/-RdRSviGM0DI/T21ZAw7LI6I/AAAAAAAAA_0/GdQwk-7aKL0/s800/Ouh.png' /></div> <h2>Are y'all lost?. But y'all are establish a page that doesn't exist!</h2> It seems that the page y'all are looking for isn't around anymore. <a href='https://inaredhouse.blogspot.com/p/contact.html'>Report it missing using contact form</a>, I'll run into what tin I practice for you. In the hateful fourth dimension y'all tin <a href='https://inaredhouse.blogspot.com/'>browse this blog</a> together with depository fiscal establishment tally out articles.<br /> You tin search this weblog for what y'all are looking for using the <a href='#search'>search box</a> or depository fiscal establishment tally pop posts together with recent posts from sidebar..<br /> <div id='search'> <form action='/search' id='searchform' method='get'>          <input id='s' name='q' onblur='if (this.value == "") {this.value = "search";}' onfocus='if (this.value == "search") {this.value = "";}' type='text' value='search'/>     </form> </div> 

If y'all don't wishing to edit your template..

Add CSS code alongside condition message. Here is an example..

 <div style='align:center'><img src='https://lh4.googleusercontent.com/-RdRSviGM0DI/T21ZAw7LI6I/AAAAAAAAA_0/GdQwk-7aKL0/s800/Ouh.png' /></div> <h2>Are y'all lost?. But y'all are establish a page that doesn't exist!</h2> It seems that the page y'all are looking for isn't around anymore. <a href='https://inaredhouse.blogspot.com/p/contact.html'>Report it missing using contact form</a>, I'll run into what tin I practice for you. In the hateful fourth dimension y'all tin <a href='https://inaredhouse.blogspot.com/'>browse this blog</a> together with depository fiscal establishment tally out articles.<br /> You tin search this weblog for what y'all are looking for using the <a href='#search'>search box</a> or depository fiscal establishment tally pop posts together with recent posts from sidebar..<br /> <div id='search'> <form action='/search' id='searchform' method='get'>          <input id='s' name='q' onblur='if (this.value == "") {this.value = "search";}' onfocus='if (this.value == "search") {this.value = "";}' type='text' value='search'/>     </form> </div> <style> .status-msg-bg {background-color: #CCCCCC;} .status-msg-body{text-align:left;background:#fff;} .status-msg-border{border: 0 none;} .status-msg-wrap{font-size:15px;line-height:29px;} h2 {font-size:30px;} h3 {font-size:20px;} </style> 

This Article is a role of serial on Blogger SEO

This is an article from Blogger SEO series. Articles on this serial is listed below.

Share this post