Custom 404 Page Not Found For Blogger


#1

Today I tried to add my Custom 404 page in to my Blog, so I made some Changes adding HTML code in to Error Page at

Go to Blogger.com >> Settings >> Search and Reference Click Edit link next to Custom Page Not Found

But still My Blog not showing added 404 error template which i Customized, Its showing nothing in Content.

My Site URL: http://www.dealdimer.com

Is there anything I need to add in template to pointing 404 page

Please Help…!!!

I Think this tip may help most of Bloggers, Get more >> Save More @ ask.mbt Happy Blogging…!!!


#2

@Sandhya I was also facing the problem like you. I added the the 404 code on my blog but it was not showing.

Then i made small change in my template and now its working. I will share this with you. I hope this will also work for you.

  • First go to Blogger template editor and search for

<b:includable id='main' var='top'>

The code look like this.

<b:includable id='main' var='top'>
..........code .......................
</b:includable>
  • Then add the below code just after / below <b:includable id='main' var='top'>

    <b:if cond=‘data:blog.pageType == “error_page”’> <b:include data=‘top’ name=‘status-message’/> </b:if> It will look like in the image below.

  • Save the template and now add the custom 404 page .

This had solved my issue not showing custom 404 page on blogger. So give it a try.


#3

Hi @shahsantosh,

Thanks for the replay,

 <b:includable id='main' var='top'>
<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<b:include data='top' name='status-message'/>
</b:if>

I added the above Code as you said but still the problem exits.

I also added MBT sugested Code below ]]></b:skin>

<b:if cond='data:blog.pageType == &quot;error_page&quot;'> 
<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; 
}
.MBT-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> 
</b:if>

MBT reference URL: http://www.mybloggertricks.com/2012/03/create-404-error-page-in-blogger-use.html

even the problem not solved.


#4

@Sandhya, Can you upload your blog’s template here?


#5

@Sandhya yes please can you provide your blog template ?


#6

Hi @Shivansh & @shahsantosh,

Please check the PM for my Template, i Changed the extension from XML to txt

Thanks both of you in Advanced… @;-


#7

@Sandhya

If you have added the below code as i suggest you above then delete it first.

<b:if cond='data:blog.pageType == "error_page"'>
<b:include data='top' name='status-message'/>
</b:if>

Then find <b:includable id='status-message'>

In you template provided by you the code look like below:

 <b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div>
</div>
<div style='clear: both;'/>
</b:if>
</b:includable>

Replace the above code with below code.

<b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div id='breakcrumb' style='display:none'>
<data:navMessage/>
</div>                                        
<b:if cond='data:blog.pageType == "error_page"'>
<div class='status-msg-wrap'>
<div class='status-msg-body'>
<data:navMessage/>
</div>
<div class='status-msg-border'>
<div class='status-msg-bg'>
<div class='status-msg-hidden'><data:navMessage/></div>
</div>
</div>
</div>
<div style='clear: both;'/>
</b:if>
</b:if>
</b:includable>

Save it. Then go to Setting > Search Preferences > Custom Page Not Found and add the below code.

  <p style='line-height: 50px'><strong>
<font color='#ff0000' size='5'>
Oops!
</font> <font color='#666666'>
Looks like you either clicked a broken link or a page that you were looking for doesn't exist. Sorry for that.<br/> 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.gulmiresunga.com/p/contact-us.html'>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.gulmiresunga.com/'>Clicking Here</a>
      <br/></li>
<li>Download Songs by <a href='http://www.gulmiresunga.com/p/download-nepali-songs.html'>Clicking Here</a>
      <br/></li>
<li>Search Anything Using Below Search Box</li>
  </ol>
<br />
 <center><form _lpchecked='1' action='/search' class='search-form' id='search_mini_form' method='get'>
<input id='searchinput' name='q' onblur='if (this.value == &apos;&apos;) {this.value = &apos;Type Here & Hit Enter&apos;;}' onfocus='if (this.value == &apos;Search the site&apos;) {this.value = &apos;&apos;;}' type='text' value='Type Here & Hit Enter'/>
<input id='searchbutton' style='vertical-align: top;' type='submit' value='Search!'/>
</form></center>
  <p>
    <br/>
    <br/>
    <br/></p>
<p align='center'><font size='10'>Page Not Found!</font></p>
<br /> <br /> <br />
<p align='center'> <font style='font-size:250px; font-weight:bold;' color='red'> 404 </font></p>
<style>
.status-msg-wrap {
-webkit-border-radius: 15px;
border: #686868 5px solid;
padding: 10px;
    font-size: 100%;
    margin: none;
    position: static;
    width: 97%;
}
.status-msg-border {
    display:none
}
.status-msg-body {
    padding: none;
    position: static;
    text-align: inherit;
    width: 99%;
    z-index: auto;
}
.status-msg-wrap a {
    padding: none;
    text-decoration: inherit;
}
#sidebar-wrapper, #midsidebar-wrapper, .gapad2, .blog-pager, .post-header-line-1, .post-footer , #rsidebar-wrapper { display:none !important;} #main-wrapper { width:100%!important;} .post { width:100%!important; }
#searchinput {

background: #FFF url(http://1.bp.blogspot.com/-DqsSIdDHoXE/UC7emvfWcII/AAAAAAAAAwo/X7HUuvC4oBs/s000/search.png) no-repeat 7px 8px;
background-color: #FFF;
border: 1px solid #ddd;
color: #A0A0A0;
display: inline-block;
font-family:arial;
font-size: 12px;
font-weight:bold;
height: 24px;
width:300px;
margin: 0;
margin-top: 5px;
padding: 5px 15px 5px 28px;
vertical-align: top;
}
#searchinput:hover{
border: 1px solid #bebebe;
box-shadow: 0 1px 2px rgba(5, 95, 255, .1);
padding: 5px 15px 5px 28px;
}
#searchbutton {
background:#444;
color:#fff;
height:35px;
border-radius:5px 5px 5px 5px;
box-shadow:1px 2px 1px 1px #ABABAB;
border:1px solid #fff;
margin-top:3px;
padding:8px;
}
#searchbutton:hover{background:#555;}
</style>

I above error page code is from my own blog. So replace the link with your blog link and also you can style as your necessities. The error page will look like below.

or you can add your own error page style. It’s working fine in your template. :smiley: