Thursday, September 04, 2014

Replace Blogger 404 Page with Beautiful Search Box in Blogger

Blogger Widgets, Blogger Tricks, Blogger Tutorials
Blogger is not a dynamic as WordPress, and not complete with WordPress however experts are every where. So here we found the way by which you can easily replaced 404 page with a beautiful search box. This will your blog beautiful and easy to understand. Whenever someone enter wrong URL or address of your blog it will show a search box and link of a homepage by which he/she  will easily back to the homepage or anything search of your blog for other query. Other thing is that the design of a search box cute and attractive and it will give a great looking to the fancy design of your blog, lets how it's work.

How To Replace Blogger 404 Page with Beautiful Search Box in Blogger ?

  • Login your blogger dashboard.
  • Goto setting.
Blogger Widgets, Blogger Tricks, Blogger Tutorials
  • Then click on Search Preferences.
Blogger Widgets, Blogger Tricks, Blogger Tutorials
  • After that click on Edit (Custom Page Not Found).
Blogger Widgets, Blogger Tricks, Blogger Tutorials
  • Now copy the below whole script and paste inside it.
<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 True Blogging Tricks' 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 safety purposes <br /> Visit <a href="http://truebloggingtricks.blogspot.com">True Blogging Tricks</a>
  •  Click on save changes.

Customization

You can change the highlighted color to the desired text you need. If you have any problem with this tutorial feel free to comment below and also share this helpful tutorial with friends. Stay blessed and Happy Blogging!
Share this article :

1 comments :

  1. I do not even know how I ended up here, but I thought this post
    was good. I do not know who you are but certainly you are going to a famous blogger if you are not already ;) Cheers!


    Here is my weblog - Famous engagement rings

    ReplyDelete

Contact Form

Name

Email *

Message *

 

Blog Archive

Support Us

About Author

Hi Friends, my name is Rj HaSsan and i m 20 years old, certified SEO consultant, addicted blogger and the Entrepreneur of True Blogging Tricks who based out of the wonderful country name "Pakistan". ...Read More