Tạo trang thông báo lỗi 404 đẹp cho Blogspot

Mặc định của trang lỗi 404 của Blogspot chả có gì đẹp nhưng bạn đừng lo chúng ta hoàn toàn có thể tùy chỉnh trang này. Dưới đây là một mẫu trang lỗi 404 đẹp cho Blogspot. Cùng thủ thuật Blogspot thực hiện tạo trang lỗi 404 này nhé!

• Chia sẻ 2 Template bán hàng miễn phí đẹp cho Blogger
• Tải Template Excelencia Responsive đẹp cho Blogspot

XEM DEMO
Hướng dẫn tạo trang báo lỗi 404

Bước 1: Từ trang quản trị Blog bạn chọn Cài đặt > Tùy chọn tìm kiếm > Chọn chỉnh sửa ở phần

Không tìm thấy trang tùy chỉnh ở mục Lỗi và chuyển hướng

- Sau đó sẽ có một khung hiện ra

Bước 2: Các bạn chèn vào khung đoạn code sau:

<!-- 404 Error Page share by NvPN Blog --> <p align='center'> <font size='5'>Trang không tồn tại!</font> </p> <p align='center'> <font style='font-size:70px; font-weight:bold;' color='#5FC6EB'> ERROR 404 </font></p> <p style='line-height: 30px'> <strong> <font color='#ff0000' size='5'> Oops! </font> <font color='#666666'> Có vẻ bạn vừa nhấn vào một liên kết bị hỏng hoặc không tồn tại. <br/> Bạn hãy thực hiện một trong các điều sau: </font></strong></p> <ol style='line-height: 25px'> <li>«<a href='javascript:history.go(-1)'>Trở về trang trước</a> </li> <li>Báo cáo vấn đề<a href='Đường dẫn trang liên hệ'>tại đây</a> (<em>Bạn sẽ được hỗ trợ tốt nhất</em>) </li> <li>Trở về<a href='Đường dẫn trang chủ'>trang chủ</a> <br/></li> <li>Sử dụng hộp tìm kiếm sau để tìm đến nội dung bạn cần</li> </ol> <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=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value=''" value="Nhập từ khóa..." type="text" /> <input id='searchbutton' style='vertical-align: top;' type='submit' value='Tìm kiếm'/> </form></center> <p> <br/> <br/> <br/></p> <style> .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; } #sidebar-wrapper, #midsidebar-wrapper, .gapad2, .blog-pager, .post-header-line-1, .post-footer , #rsidebar-wrapper { display:none !important;} #main-wrapper { width:98%!important;} .post { width:98%!important; } #searchinput { background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfRrzy7ByqB16MpXgLwSES91S4SJZcgVR2eFM4BUdlHrKUvY4vtUetzxDt9xJClnRwGtcabVgk9d_-UJ5wan1D-KNAXqDk9w44Ow8T6otbjYcDxYt5ICa2lte_8HnFZUO9gcS2t5-XEwhL/s0/search.png) no-repeat 7px 8px; background-color: #FFF; border: 1px solid #ddd; color: #A0A0A0; display: inline-block; font-family:arial; font-size: 12px; font-weight:bold; height: 21px; width:300px; margin: 0; margin-top: 5px; padding: 5px 15px 5px 28px; vertical-align: top; } #searchinput:hover{ border: #6aa84f; box-shadow: 0 1px 2px rgba(5, 95, 255, .1); padding: 5px 15px 5px 28px; } #searchbutton { background:#6aa84f; color:#fff; height:35px; border:1px solid #fff; margin-top:3px; padding:8px; } #searchbutton:hover{background:#555;} </style>

Các bạn tùy chỉnh các chữ màu xanh thành liên kết đến trang tương ứng nhé

Bước 3: Nhấn Lưu thay đổi

Test trang báo lỗi

Bạn có thể kiểm tra trang bào lỗi của mình bằng cách vào đường dẫn có dạng như:
http://diachitrangwebcuaban/abcxyz

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

Pig Ella

Từ khóa:

tạo trang lỗi 404 

tạo trang lỗi 404 cho blogspot

Trang lỗi 404 cho blogspot

Trang lỗi 404 Blogspot

LIKE and Share this article: :

Share on Google Plus