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.
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.
Custom 404 Page Made By BloggingEarning.Com
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.
- 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhi96f4tWgQqUJpL9GWs4PkcFGhQZ7rn9WrZbYPYofDPId049RVYZcziedodrNhkaFzSpIRvDoQ8ShuHuzROyNLStgwk88JM-TLv9Qvb4K4OywQeY9Whf9y84VVDnYxt8OYkrd5-bV7P06s/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 implemented 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!
Syed Zaver Abbas is SEO expert in pakistan. he is web designer, web developer, software developer and graphics designer that means he is multi talented. he is also learning more about computer science.
Dear readers, after reading the Content please ask for advice and to provide constructive feedback Please Write Relevant Comment with Polite Language.Your comments inspired me to continue blogging. Your opinion much more valuable to me. Thank you. ConversionConversion EmoticonEmoticon