Tổng hợp các mẫu trang lỗi 404 đẹp cho Blogger

( Khởi nghiệp với Internet)

Mặc định thì khi người dùng nhập giá trị URL không hộp lệ thì trang 404 Error hoặc Page Not Found sẽ tự động xuất hiện để thông báo người dùng là họ đã nhập sai. Tuy nhiên những trang này thường được thiết kế đơn giản và không hấp dẫn cho lắm, vì thế hôm nay mình xin chia sẻ cho các bạn 6 mẫu hoàn toàn đẹp và riêng biệt, đủ để cho các bạn tha hồ lựa chọn.

Nếu các bạn chỉ muốn hiển thị thông báo hoặc là thay đổi nội dung thông báo trên màn hinh thì trước hết các bạn vào updated Blogger Interfacerồi vào Setting->Search Preferences.

Ngược lại , nếu các bạn muốn màu sắc hơn thì lần lượt chọn các mẫu sau :

Mẫu số 1

Vào Setting->Search Preferences , rồi sau đó copy đoạn code bên dưới vào bên trong khu vực Custom Page Not Found.

<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/AVvXsEhfNISLGWvNfdU0gCxTY7AUxDEAOVDCqF7X9bIi_lgHiONaGRb86-eOMjnZ-yJtjiVhdXNcjW3TwGOOSQm_5pwxwVyGqq7cDZCXUvPSTt7v_81ES8J3yp_xnjEnc7io9gwlBBUkngHRVfg/s1600/404+error+page+1.jpg"/>

Mẫu số 2

Làm tương tự như bước 1 , nhưng lần này là copy và dán với đoạn code bên dưới :

<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/AVvXsEhc60GXKJekY7TVMJb63Mc39Vt5sWJGRhZgQqiN-NBoGzScgZgvDtwhYVFI5M_zWaSTF8WGZ-Wkc2nnWKa4t-Ozg2lJGuiBXaCYhWzSgn9NlfP6wRwXwWhboIfM_yLGKGgTAKgV724pXnQ/s1600/404+error+page+2.jpg"/>

Mẫu số 3

Với mẫu này, các bạn copy đoạn code sau :

<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/AVvXsEit2npBjmubdtS8drYZvhd2h-IjGQBAgXnCu915h1ndTuKCsegabnToexE7BjJHd6-ZGT06r7Sx2LWVD3v0vKIPszhGQiYHV5nmahrF0d7H92NatkAtFaKLUADK4gH2hy0p8K1dqFalego/s1600/404+error+page+4.jpg"/>

Mẫu số 4

Các bạn copy đoạn code bên dưới để có được mẫu này :

<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/AVvXsEi_C8k3L8Q8BjDMwHMJjkAnaiR2bp35ui5h35ygzDdndLN26Tu418FFW8kJFESxrXFZyC_6stk3FQtPQSkfBfQUVW4v2of6K0cTd87XvRbPO8Y25zrQ_Zk72MF15mXdfBDL8L_7RbnBseg/s320/404+error+page+6.jpg"/>

Mẫu số 5

Đoạn code sau sẽ tương ứng với mẫu này :

<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/AVvXsEhYykFpA6yQ0WlN-EBjjiBQtQoV6UqHlCOMu_Cen8nxhR66VjSLHFl5-7mAdYqcwaQ9zsqBI7PxD_g66lW3o4K8GFEhqrxuroiEg1SafgGdvaw5qjtg0WHFOtIOXx7ACrf_lh4XjPiX94k/s1600/404+error+page+7.jpg"/>

Mẫu số 6

Các bạn copy đoạn code này :

<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/AVvXsEggNEvrIm6uN4k_UWliakgLl6LtfzZZq7E3Ed5tzHMBJypxd1MnPfDYjLtA9HjT1-KY66XT6lmkPq_ilmL-jAOmBAa5CrcyUdAnDhK3CRKJD5SgDjqiYCzSNuU9GCbDClAK_0FvdPOeO20/s1600/404+error+page+3.jpg"/>

Hy vọng với những mẫu mà mình chia sẻ trong bài viết này, đủ sức để các bạn lựa chọn cho trang blog của mình, nếu các bạn có những mẫu nào khác, thì chia sẻ cho mình và mọi người khác biết dưới dạng comment nhé.

Chúc các bạn thành công !

Có thể tạo thêm search box cho trang 404

Google.com.vn Khởi nghiệp Internet

Code đây:

<form method=get action="http://www.google.com/search" class="googlesearch">
<input type="hidden" name="ie" value="UTF-8" />
<input type="hidden" name="oe" value="UTF-8" />
<table align="center"><tr><td>
</td>
<td class="bodyText">
<input type="hidden" name="domains" value="khoinghiepinternet.blogspot.com" />
<input type="radio" name="sitesearch" value="" />Google.com.vn
<input type="radio" name="sitesearch" value="khoinghiepinternet.blogspot.com" checked />Khởi nghiệp Internet<br />
<input type="text" name="q" size="28" maxlength="255" onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;;' type='text' value="Nhập từ khóa..." />
<input class="button" type="submit" name="btng" value="Tìm kiếm" /></td></tr></table></form>

<div style="border-style:ridge; width:280px; border-width:0px; border-color:dede; margin:1px 0px 1px 9px; padding:1px;"><div style="background-color:#FFFFFF; style="border:lime 1px dashed;margin:1px;padding:0px" align="left"> 

<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
<a class="addthis_button_compact"></a>
<a class="addthis_counter addthis_bubble_style"></a>
</div>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-527a92ec749b0e6e"></script>

</div>

Blog tổng hợp những kinh nghiệm được học, áp dụng và chia sẻ