I know some of you probably know that what is 404 error page but newbies or beginners don't know about it so it's a page that shows up when a visitor click on a broken link or the link doesn't exist but some of the visitors are like they leave your blog because they don't get the information that's why I'm giving you a professional guide to make your 404 error page to an awesome page.
So let's begin on our much awaited step that how you can customize or create a custom 404 page with your own hands by this guide.
Create Custom 404 Error Page For Blogger
Blogger give you the option to create your own 404 error page in blogger but most of the newbies or beginners don't know about it because they don't go in brief in the bloggers options because they think that we can get in trouble if we go in brief in blogger. If you have any knowledge about Cascading Style Sheets (CSS) and HyperText Markup Language (HTML) then you can create your own 404 error page.
For creating 404 error page you have to follow these below steps.
- Blogger>>Settings >> Search Preferences >> Errors and Redirection>>
- Edit Option Of Custom Page Not Found
<div id='error-page'>
Add Your HTML
</div>
<style>
Add Your CSS
</style>
- Add Your Desire CSS And HTML With The Red Color Texts.
Don't worry guys if you don't have knowledge about CSS and HTML then you can use mine one which I created for my readers and using it on my own blog.
Demo of our 404 error page :
 |
| Click To See In Large Size |
Follow below steps to add my own created 404 error page for my valuable readers.
- Blogger>>Settings >> Search Preferences >> Errors and Redirection>>
- Edit Option Of Custom Page Found
- Add The Following Code In Custom Page Not Found Option.
<div id='error-page'>
<div class='large-heading'>OOPS! You're In Wrong Place!
</div>
<div class='light-heading'>Perhaps the page has been deleted. We apologize for any inconvenience. <br/>
Please return to the<a href='/' title='Homepage'><b>Homepage</b></a>,<br/>or use the search box to re-find the article you want. <br/>
<center><form _lpchecked='1' action='/search' class='search-form' id='search_mini_form' method='get'>
<input id='searchinput' name='q' onblur='if (this.value == '') {this.value = 'Type Here & Hit Enter';}' onfocus='if (this.value == 'Search the site') {this.value = '';}' type='text' value='Type Here & Hit Enter'/>
<input id='searchbutton' style='vertical-align: top;' type='submit' value='Search!'/>
</form></center>
<font style="font-size:150px; font-family: OSWALD; color: rgb(255, 255, 255); font-weight: bold; text-shadow: rgb(204, 204, 204) 1px 1px 0px, rgb(204, 204, 204) 2px 2px 0px, rgb(68, 68, 68) 3px 3px 0px, rgb(68, 68, 68) 4px 4px 0px, rgb(68, 68, 68) 5px 5px 0px, rgb(68, 68, 68) 6px 6px 0px, rgb(153, 153, 153) 5px 5px 15px;line-height: 170px;"color="wihite"> 404 </font>
</div>
</div>
<style>
#sidebar-wrapper, #midsidebar-wrapper, .gapad2, .blog-pager, .post-header-line-1, .post-footer , #rsidebar-wrapper, .footerintro, span.background-top, #site-generator, #menu-bar, .headribbion { display:none !important;} #main-wrapper { width:98%!important;} .post { width:98%!important; }
body{background:#888 url(http://1.bp.blogspot.com/-XiZ8oBOirBQ/VKDD0FJfq2I/AAAAAAAAeaE/1kWldcAwz0M/s1600/bo_play_pattern.png) repeat top left;position:relative;text-align:center;height:100%;margin:0;padding:0;color: #666;font-family:'Open Sans',sans-serif;overflow:auto}
.large-heading {text-align: center;text-shadow: 0px 1px 0px #c7c8ca, 0px 2px 0px #b1b3b6, 0px 3px 0px #9d9fa2, 0px 4px 0px #8a8c8e, 0px 5px 0px #77787b, 0px 6px 0px #636466, 0px 7px 0px #4d4d4f, 0px 8px 7px #001135;color: #fff; font-size:400%; font-weight: 700;width:100%;margin-top:50px;}
.light-heading,.another-option {font-size: 22px;text-shadow:0 1px 1px #000, 0 -1px 1px #000, 1px 0 1px #000, -1px 0 1px #000;color:#fff;line-height:1.8em}
.another-option {margin:40px auto -40px}
.light-heading a{color:#fff!important}
.light-heading a:hover{color:red!important}
#searchinput { border: 2px solid #dce4ec; color: #34495e; font-family: "Lato", sans-serif; font-size: 14px; padding: 8px 0 9px 10px; text-indent: 1px; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 3px; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; width: 250px; margin-top: 4px; } #searchinput:focus{ border-color: #1abc9c; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } #searchbutton { margin-top: 5px; font-size: 12px; line-height: 1em; padding: 11px; outline: none; font-weight: bold; background-color: #000000; border: none; border-radius: 2px; color: #fff !important; cursor: pointer; display: inline-block; text-decoration: none; text-shadow: 0px 1px 1px rgba(207, 207, 207, 1); -moz-box-shadow: 0px 1px 1px rgba(0,0,0,0.2); -webkit-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.14); box-shadow: 0px 2px 5px rgba(255, 255, 255, 1); } #searchbutton:hover{background: #3A3A3A;}
</style>
- Click On Save Changes.
- Done!
From The Editor's Desk!
I know you have successfully implement this awesome + professional + beautiful 404 error page in blogger because everyone in the blogosphere want to beautify their blog with some stylish things because they also want that visitors should impress by their blog and change into readers. Stay Tuned! Peace & Happy Blogging!
About the Author
Ali Jutt is a Pro Blogger, Blogger Template Designer.I always wish to meet with SEO Experts and Pro Bloggers. You can get in touch with me on facebook and on Twitter
