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

Blogger is not rapid as WordPress , and can't rival WordPress however specialists matters each where.Here we have found a way by means of which you can without much of a stretch Replace Blogger 404 Page with Beautiful Search Box.This will make your online journal navigative and simple to understand.Whenever somebody enters any wrong URL or any location it will demonstrate the hunt box and connection to the landing page by means of which he/she can get once more into the landing page or can hunt your site down some other inquiry! Also the configuration of this inquiry box is exceptionally charming it will give an awesome touch to an extravagant outline of your blog. Let's go how to Replace Blogger 404 Page with Beautiful Search Box in Blogger !

Replace Blogger 404 Page with Beautiful Search Box in Blogger

• Go To Blogger Dashboard 
• Click On Settings
• Then Click On Search Preferences
• In Errors and redirections section Click On Edit (custom page not Found)
• Copy the below script and paste it over there

<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 ThatsBlogging' 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 | Visit <a href="http://tech-tricks4all.blogspot.com">Tips And Tricks</a>

Alterations

You can change the content highlighted in red to the craved content you require! The above segment of this code is only a lump of code for CSS and the underneath is 2 divs which will announce the inquiry box area.Hope you got it , on the off chance that you got any issue don't hesitate to remarks below.Stay Blessed , Happy Blogging!

Advertisement