
By Default Blogger shows Error page message in a box and its not look Style.
Here I am saying about how to Customize it much better...
Only Custom message [No Style]
If you want to show only a custom message then First Go to updated Blogger InterfaceThen Go to Setting->Search Preferences

Error Message with Stylish 404 images
If you want Colorful Stylish 404 page do the following.- Go to Design->Edit HTML
- Find </head> and copy the below code just above it.
<b:if cond='data:blog.pageType == "error_page"'>
<style type="text/css">.status-msg-wrap{font-size:100%;margin:none;position:static;width:100%}.status-msg-border{display:none}.status-msg-body{padding:none;position:static;text-align:inherit;width:100%;z-index:auto}.status-msg-wrap a{padding:none;text-decoration:inherit}</style>
</b:if>
<style type="text/css">.status-msg-wrap{font-size:100%;margin:none;position:static;width:100%}.status-msg-border{display:none}.status-msg-body{padding:none;position:static;text-align:inherit;width:100%;z-index:auto}.status-msg-wrap a{padding:none;text-decoration:inherit}</style>
</b:if>
- Save the Template
Error Page Style 1

- Go to Setting->Search Preferences
- Copy below code in Custom Page Not Found section [as shown in fig. first]
<h2 style="font-size: 35px;margin: 0;text-align: center;">Oops..! </h2>
<h3 style="font-size:17px;">Sorry,You are trying to reach an invalid page...!<br><a href="/">Click here</a> to go to Homepage <br> Have a nice Day...</h3><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIpF1UToRG65za4UhxZOjdI7Y3vz4PkojtL_QVPgqLvwQ9dJU86Py7WkGfcfLmQuFW653R0FPFolo4t3Y-yxCalFtcbtn3a36BNTDe5IFFPWyZIBuo62HuZLUycaOyBldVL-DQvCXkIvo/s1600/404+error+page+1.jpg"/>
<h3 style="font-size:17px;">Sorry,You are trying to reach an invalid page...!<br><a href="/">Click here</a> to go to Homepage <br> Have a nice Day...</h3><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIpF1UToRG65za4UhxZOjdI7Y3vz4PkojtL_QVPgqLvwQ9dJU86Py7WkGfcfLmQuFW653R0FPFolo4t3Y-yxCalFtcbtn3a36BNTDe5IFFPWyZIBuo62HuZLUycaOyBldVL-DQvCXkIvo/s1600/404+error+page+1.jpg"/>
Error Page Style 2

- Go to Setting->Search Preferences
- Copy below code in Custom Page Not Found section [as shown in fig. first]
<h2 style="font-size: 35px;margin: 0;text-align: center;">Oops..! </h2>
<h3 style="font-size:17px;">Sorry,You are trying to reach an invalid page...!<br><a href="/">Click here</a> to go to Homepage <br> Have a nice Day...</h3><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaBKHh6tCPQ2_70V50NYtjbZJhNMX689aYYrv5HKBNqFvSjPT-3REwI6ScK-FSCVObxuZTmYFpI8eRbNx9ITjFZEkYV4JhAZMun9lYB5j4vJ60aZuS-O4lWAcRjjj72HlAiui1Q33-rQI/s1600/404+error+page+2.jpg"/>
<h3 style="font-size:17px;">Sorry,You are trying to reach an invalid page...!<br><a href="/">Click here</a> to go to Homepage <br> Have a nice Day...</h3><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaBKHh6tCPQ2_70V50NYtjbZJhNMX689aYYrv5HKBNqFvSjPT-3REwI6ScK-FSCVObxuZTmYFpI8eRbNx9ITjFZEkYV4JhAZMun9lYB5j4vJ60aZuS-O4lWAcRjjj72HlAiui1Q33-rQI/s1600/404+error+page+2.jpg"/>
Error Page Style 3

- Go to Setting->Search Preferences
- Copy below code in Custom Page Not Found section [as shown in fig. first]
<h2 style="font-size: 35px;margin: 0;text-align: center;">Oops..! </h2>
<h3 style="font-size:17px;">Sorry,You are trying to reach an invalid page...!<br><a href="/">Click here</a> to go to Homepage <br> Have a nice Day...</h3><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrYqlNf9MkCy80EQsmJhlYg5mkf2xqjdHls3rxL4p1aeknL9bU56vyzIGdQgVyerGVD6fCMDPB9LSYbsOJjLBZmZs5oaQSmCKmLCfOCgXknFODJ3UCawnOFS368wp0fiRZRd-BVagVbbI/s1600/404+error+page+4.jpg"/>
<h3 style="font-size:17px;">Sorry,You are trying to reach an invalid page...!<br><a href="/">Click here</a> to go to Homepage <br> Have a nice Day...</h3><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrYqlNf9MkCy80EQsmJhlYg5mkf2xqjdHls3rxL4p1aeknL9bU56vyzIGdQgVyerGVD6fCMDPB9LSYbsOJjLBZmZs5oaQSmCKmLCfOCgXknFODJ3UCawnOFS368wp0fiRZRd-BVagVbbI/s1600/404+error+page+4.jpg"/>
Error Page Style 4

- Go to Setting->Search Preferences
- Copy below code in Custom Page Not Found section [as shown in fig. first]
<h2 style="font-size: 35px;margin: 0;text-align: center;">Oops..! </h2>
<h3 style="font-size:17px;">Sorry,You are trying to reach an invalid page...!<br><a href="/">Click here</a> to go to Homepage <br> Have a nice Day...</h3><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrUNdexqBzY8NP_2uVQY-5Xb9d3YPsWdMMQ848NqkVO-_HBCf-iIprTEAHCtScGFSPeb65RnKFELXjqSdV-lw2yqZr0c2RFuTYH4fiVo2uhQFE2Frjoyf8VX4ASsQ2ZTxXWQ3ZTgmzuu8/s320/404+error+page+6.jpg"/>
<h3 style="font-size:17px;">Sorry,You are trying to reach an invalid page...!<br><a href="/">Click here</a> to go to Homepage <br> Have a nice Day...</h3><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrUNdexqBzY8NP_2uVQY-5Xb9d3YPsWdMMQ848NqkVO-_HBCf-iIprTEAHCtScGFSPeb65RnKFELXjqSdV-lw2yqZr0c2RFuTYH4fiVo2uhQFE2Frjoyf8VX4ASsQ2ZTxXWQ3ZTgmzuu8/s320/404+error+page+6.jpg"/>
Error Page Style 5

- Go to Setting->Search Preferences
- Copy below code in Custom Page Not Found section [as shown in fig. first]
<h2 style="font-size: 35px;margin: 0;text-align: center;">Oops..! </h2>
<h3 style="font-size:17px;">Sorry,You are trying to reach an invalid page...!<br><a href="/">Click here</a> to go to Homepage <br> Have a nice Day...</h3><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9pEIozAqDHzu2G1QxzXGKeILvShsY8qQAkXgvYM22D_ZzBzyKSFSsc8x1bURzZWMnHFa1Gc4Rlzg8x3icnNKsW04xafP9GksYqEbGKe_AVgBp8euomXS3XXU8aocpCf234ggjAj3Yy44/s1600/404+error+page+7.jpg"/>
<h3 style="font-size:17px;">Sorry,You are trying to reach an invalid page...!<br><a href="/">Click here</a> to go to Homepage <br> Have a nice Day...</h3><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9pEIozAqDHzu2G1QxzXGKeILvShsY8qQAkXgvYM22D_ZzBzyKSFSsc8x1bURzZWMnHFa1Gc4Rlzg8x3icnNKsW04xafP9GksYqEbGKe_AVgBp8euomXS3XXU8aocpCf234ggjAj3Yy44/s1600/404+error+page+7.jpg"/>
Error Page Style 6

- Go to Setting->Search Preferences
- Copy below code in Custom Page Not Found section [as shown in fig. first]
<h2 style="font-size: 35px;margin: 0;text-align: center;">Oops..! </h2>
<h3 style="font-size:17px;">Sorry,You are trying to reach an invalid page...!<br><a href="/">Click here</a> to go to Homepage <br> Have a nice Day...</h3><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9Z9yH2yIFLlXRrvLQrU0rCJson-Ui2wDJBB0FAQfD85_Y0tCxNe9VR22Qxl729TRrlfsydfDsQic1MzHb5wgGfiYm0AyEzuaa0HAeeV3XnQr9Nm3_H_4p95Qcsrqbxodxstge1vFfl0U/s1600/404+error+page+3.jpg"/>
<h3 style="font-size:17px;">Sorry,You are trying to reach an invalid page...!<br><a href="/">Click here</a> to go to Homepage <br> Have a nice Day...</h3><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9Z9yH2yIFLlXRrvLQrU0rCJson-Ui2wDJBB0FAQfD85_Y0tCxNe9VR22Qxl729TRrlfsydfDsQic1MzHb5wgGfiYm0AyEzuaa0HAeeV3XnQr9Nm3_H_4p95Qcsrqbxodxstge1vFfl0U/s1600/404+error+page+3.jpg"/>
Then Click Save..That all..
First thanks to Bloggerplugins.com for the custom error page code, visit here. Then i made some changes and add beautiful 404 images that i was inspired from HongKiat .
I thinks this article helped you..If any bugs of doubts don't hesitate to ask..do comment...
Like and share...
0 comments:
Post a Comment