客製化 404 網頁 – Tools for Blogger |

OMG, I haven’t played with my blog for a long time!!!

It’s been a while, all I have done is focused on my little one, keep updating her daily life, recording her every mileage, etc. And, in deed, as a newly mom, these really filled my life, I barely have extra time to even think about my blog or read some stylish blog design.

Several days ago, I’m just kinda bored of my blog design and wanna give it a new look. I have tried dynamic templates, however, it’s just a tragedy! There’re too many limitations and too few things that I can customize.

So, I came back to my original version, just changed the top banner picture, background and fixed some useful widgets though.

Besides the functional widgets, the biggest change of my website was the personal and informational 404 page, yoohoo~!!!! Why do we need a personalized 404 page? Because being the same as others is always boring, but the most important is to provide more information and help readers to find the right page!

The following picture is the default page when your link is broken. However, through this page, readers can’t get any information except go back to your homepage. By this way, you may loose some of your readers.

So, as an nice author, I think an informative 404 page is a way to show your responsibility. Since 99% of the broken links are created from the author!

So, how could personalize your 404 page? Easy two steps!

Design a 404 page content by HTML
Navigate to your Blogger Dashboard –> Settings –> Search Preferances –> Custom Page Not Found –> Edit –> Paste your HTML code –> Save

If you’re not familiar with HTML, the followings are the websites that might help! Enjoy~!!

Helpful websites, really thank you for their help!!!!!!

(Ref.) 404 Page code: mybloggertricks
(Ref.) 404 Page code: superwebtricks
stylish 404 Page: hellobrio
Sample CSS code of Buttons: graemeboy
Border Radius CSS code Generator: http://border-radius.com/

Useful HTML tools

Google Custom Search Engine: https://cse.google.com
HTML character map: http://toolstud.io/web/charmap.php
HTML color codes: http://html-color-codes.info/

See below, this is my creative and friendly 404 page, really love it ^^

Besides having a friendly 404 page to re-direct to the right contents, it’s also a good idea to always check your crawl errors! I always check my crawl errors through Google Webmaster, it’s a really good tool though!