Create 404 error page with search box for Blogger
Create 404 error page with search box for Blogger. With 404 error pages , if not customized, it is very sketchy and boring ^_^ Therefore, with the purpose of beautifying the 404 page, I will guide you how to create a 404 error page with a beautiful search box for your Blogger.
What is a 404 error page?
This is a page that will appear every time a user accesses a website but this address does not exist, maybe this link is of an old article that has been deleted, or maybe it is a link that never existed, because the user typed it wrong. The 404 page will notify readers that the article has been deleted or the link never existed, and readers should go to another link.
What is the benefit of a 404 page?
As mentioned above, the 404 page informs users that this link does not exist or no longer exists. In addition, the 404 page helps notify bots that the page does not exist and navigates bots on the web. Not having a 404 page will cause the website to be rated low because there are too many non-existent links and error messages.
Create 404 error page with search box for Blogger
Because the default 404 page will have nothing, it will look unappealing. Therefore, with this Blogger tips, I want to put a search box on this page, to help users search for the content they need through it if they encounter a 404 error page.
Access the Blogger admin page
– Go to Settings -> Search preferences:
– In Error and redirections -> Custom page not found, add the following code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 |
<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 on wifikillpro.com' 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 deleted or never existed - Please visit <a href="https://wifikillpro.com">_CTP_</a> |
You can change the text inside as you like, or just leave it as it is.
– After editing, save. And check your website with any link to lead to the 404 error page. ^_^