Wednesday

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.

Image



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.

Image





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





<style>
#search-button-links1 {
    position: relative;
    top: 0;
    right: 0;
    height: 60px;
    width: 580px;
    font-size: 18px;
    color: #000;
    text-align: center;
    text-decoration:none;
    line-height: 42px;
    border-width: 0;
    background-color: #5caddf;
margin:5px;
    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;
}
</style>
<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>
  </form>
</div>
<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>

ARRANGEMENT
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.
Share :

zealmatblog

No comments:

Post a Comment



Parse Your Adsense HTML code Here





We love to hear from you!

Sign in to comment "anonymously" without entering verification text.