Advanced Search Box For 404 Page On Blogger

Advanced Search Box For 404 Page On Blogger

404 Page is just an error page on your website or blog and it is not good for you to have lots of error pages on your website or blog.
Few weeks back we talked on how to add the 404 page on your blog without much stress......
Today we want to give out this wonderful tips on how to serve your blog audience better and make them stay active on your blog using this advanced search box for 404 page on blogger.


Step 1
You need to login to your blogger account and then click on the blog you want to work on.

Step 2
Now scroll your mouse down to the settings tab and just click in it

Step 3
On the settings drop down menu click on search and preference button

Step 4
Now after the meta tag description you will find the custom page not found just click on the edit button by the side.


Step 5
Now copy this code below and paste it inside the box given to you and click on the save changes button below.

#search-button-links1 {
    position: relative;
    top: 0;
    right: 0;
    height: 60px;
    width: 580px;
    font-size: 18px;
    color: #000;
    text-align: center;
    line-height: 42px;
    border-width: 0;
    background-color: #5caddf;
    cursor: pointer;
#search-box1 {
    position: relative;
    width: 100%;
    margin: 0;
#search-form1 {
    height: 40px;
    border: 1px solid #999;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background-color: #fff;
    overflow: hidden;
#search-text1 {
    font-size: 14px;
    color: #ddd;
    border-width: 0;
    background: transparent;
#search-box input[type="text"] {
    width: 90%;
    padding: 11px 0 12px 1em;
    color: #333;
    outline: none;
#search-button1 {
    position: absolute;
    top: 0;
    right: 0;
    height: 42px;
    width: 80px;
    font-size: 14px;
    color: #fff;
    text-align: center;
    line-height: 42px;
    border-width: 0;
    background-color: #4d90fe;
    -webkit-border-radius: 0px 5px 5px 0px;
    -moz-border-radius: 0px 5px 5px 0px;
    border-radius: 0px 5px 5px 0px;
    cursor: pointer;
<div id='search-box1'>
  <form action='/search' id='search-form1' method='get' target='_top'>
    <input id='search-tex1t' name='q' placeholder='Search schoolans' type='text'/>
    <button id='search-button1' type='submit'><span>Search</span></button>
<p style="color:#e33633; font-family:verdana, sans serif; font-size:16px; padding:24px; text-decoration:none">This Page has been removed for some reasons please | Visit <a href="http://schoolans.com">schoolans</a>

Change any coloured link or word to you preferred choice.

And that's all... Your blog visitors will use the search box as an advantage to search your blog content.