Trần Bá Đạt Blog
  • Học SEO
    • SEO Local
    • SEO Onpage
    • Tài liệu SEO
  • Windows
  • Thủ thuật CNTT
  • WordPress
    • Thủ thuật WordPress
    • Theme WordPress
    • Plugin WordPress
  • Học Blogspot
    • Thủ thuật Blogspot
    • Template Blogspot
    • SEO Blogspot
  • Pocket Ninja
Không có kết quả
Tất cả kết quả
Trần Bá Đạt Blog
  • Học SEO
    • SEO Local
    • SEO Onpage
    • Tài liệu SEO
  • Windows
  • Thủ thuật CNTT
  • WordPress
    • Thủ thuật WordPress
    • Theme WordPress
    • Plugin WordPress
  • Học Blogspot
    • Thủ thuật Blogspot
    • Template Blogspot
    • SEO Blogspot
  • Pocket Ninja
Không có kết quả
Tất cả kết quả
Trần Bá Đạt Blog
Không có kết quả
Tất cả kết quả
Trang chủ Blogspot

Cách tạo trang lỗi 404 với hộp tìm kiếm đẹp cho Blogspot

Trần Bá Đạt bởi Trần Bá Đạt
27/04/2018
trong Blogspot, Thủ thuật Blogspot
0
CHIA SẺ
615
LƯỢT XEM
Chia sẻTweetPinChia sẻ

Với những trang lỗi 404, nếu không được tùy chỉnh gì thì nó thật sơ sài và chán ngắt ^_^ Vì thế, với mục đích làm đẹp trang 404, thì mình sẽ hướng dẫn các bạn cách tạo trang lỗi 404 với 1 hộp tìm kiếm đẹp cho Blogspot của bạn.

Trang lỗi 404 là gì?

Là trang sẽ xuất hiện mỗi khi người dùng truy cập vào web nhưng địa chỉ này không tồn tại, có thể đường dẫn này là của 1 bài viết cũ đã bị xóa, cũng có thể đó là 1 đường dẫn chưa từng tồn tại, do người dùng gõ nhầm. Trang 404 sẽ thông báo cho độc giả biết rằng bài viết đã bị xóa hoặc đường dẫn chưa từng tồn tại, và độc giả nên vào 1 đường dẫn khác.

Lợi ích của trang 404 là gì?

Như đã nói ở trên, trang 404 thông báo cho người dùng biết rằng đường dẫn này đã không tồn tại hay không còn tồn tại nữa. Ngoài ra trang 404 giúp thông báo với các bots tìm kiếm trang không tồn tại và điều hướng bots trên web, việc không có trang 404 sẽ làm cho website bị đánh giá thấp vì quá nhiều đường dẫn không tồn tại và báo lỗi.

Hướng dẫn cách tạo trang lỗi 404 với hộp tìm kiếm đẹp cho Blogspot

Vì trang 404 mặc định nó sẽ chẳng có gì, nhìn sẽ mất cảm tình. Vì thế, với thủ thuật blogspot này, mình muốn đưa 1 hộp tìm kiếm vào trang này, nhằm giúp người dùng tìm kiếm nội dung mình cần thông qua nó nếu gặp phải trang lỗi 404.

Trang lỗi 404 tùy chỉnh

– Truy cập vào trang quản trị Blogger

– Vào Cài đặt (Settings) -> Tùy chọn tìm kiếm (Search preferences):

NÊNĐỌC THÊM

Người chơi không nạp làm thế nào mạnh hơn người chơi nạp?

Kinh nghiệm sử dụng kim cương hợp lý trong Pocket Ninja

Những tính năng cơ bản của game Pocket Ninja

Tùy chọn tìm kiếm (Search preferences)

– Tại mục Lỗi và chuyển hướng (Error and redirections) -> Không tìm thấy trang tùy chỉnh (Custom page not found), thêm vào đoạn code sau:

Không tìm thấy trang tùy chỉnh
<style>
#search-button-links1 {
position: relative;
top: 0;
right: 0;
height: 60px;
width: 580px;
font-size: 18px;
color: #000;
text-align: center;
text-decoration:none;
line-height: 42px;
border-width: 0;
background-color: #5caddf;
margin:5px;
cursor: pointer;
}
#search-box1 {
position: relative;
width: 100%;
margin: 0;
}
#search-form1 {
height: 40px;
border: 1px solid #999;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background-color: #fff;
overflow: hidden;
}
#search-text1 {
font-size: 14px;
color: #ddd;
border-width: 0;
background: transparent;
}
#search-box input[type="text"] {
width: 90%;
padding: 11px 0 12px 1em;
color: #333;
outline: none;
}
#search-button1 {
position: absolute;
top: 0;
right: 0;
height: 42px;
width: 80px;
font-size: 14px;
color: #fff;
text-align: center;
line-height: 42px;
border-width: 0;
background-color: #4d90fe;
-webkit-border-radius: 0px 5px 5px 0px;
-moz-border-radius: 0px 5px 5px 0px;
border-radius: 0px 5px 5px 0px;
cursor: pointer;
}
</style>
<div id='search-box1'>
<form action='/search' id='search-form1' method='get' target='_top'>
<input id='search-tex1t' name='q' placeholder='Tìm kiếm trên tranbadat.info' type='text'/>
<button id='search-button1' type='submit'><span>Tìm kiếm</span></button>
</form>
</div>
<p style="color:#e33633; font-family:verdana, sans serif; font-size:16px; padding:24px; text-decoration:none">Trang này đã được xóa hoặc chưa từng tồn tại - Vui lòng truy cập <a href="https://www.tranbadat.com">_CTP_</a>

Bạn có thể thay các đoạn chữ bên trong tùy theo ý của bạn nhé, hoặc để nguyên đó mà xài thôi.

  • Xem thêm: Tối ưu Google Adsense bằng cách dùng Google Search Box

– Sau khi chỉnh sửa xong thì lưu lại. Và hãy kiếm tra web của bạn bằng 1 đường dẫn bất kỳ để dẫn tới trang lỗi 404 xem. ^_^

5/5 - (1 bình chọn)
Chia sẻTweetPinChia sẻ

Nhận thông báo khi bài viết này được cập nhật. Đăng ký ngay!

Hủy đăng ký
Trần Bá Đạt

Trần Bá Đạt

Là một người yêu thích công nghệ thông tin và hiện đang là một SEOer, một Marketer. Trong đó tranbadat.com là một trong những dự án của mình nhằm cung cấp nhiều kiến thức hơn cho mọi người về Internet, SEO, Blogspot, Wordpress và Windows

Trả lời Hủy

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Bình luận 3

  1. Đoàn Xuân Tiên says:
    7 năm trước

    sau khi mình làm test thì không thấy trang hiện ra 404 mà chỉ là 1 trang trống thôi ạ. Web của mình hiện đã cài tem
    link web: doanxuantien.tk

    Trả lời
  2. Trần Bá Đạt _CTPG_ says:
    9 năm trước

    Được chứ, cái này tùy bạn thôi à :-d

    Trả lời
  3. Nguyen Thanh Truong says:
    9 năm trước

    Đặt code chuyển trang vào được không ta…?

    Trả lời

ĐƯỢC YÊU THÍCH

  • Cách gỡ bỏ Microsoft Office tận gốc

    Cách gỡ bỏ Microsoft Office hoàn toàn khỏi máy tính khi bị lỗi

    62 chia sẻ
    Chia sẻ 60 Tweet 0
  • Cách bỏ gạch đỏ trong Word/Excel/PowerPoint

    1 chia sẻ
    Chia sẻ 1 Tweet 0
  • Tổng hợp 1069 icon Facebook – biểu tượng cảm xúc FB 2020

    104 chia sẻ
    Chia sẻ 103 Tweet 0
  • Template MagOne bản quyền 21$ – Chia sẻ miễn phí

    2 chia sẻ
    Chia sẻ 1 Tweet 0
  • Hướng dẫn active theme Newspaper 12.1.1 dễ dàng và đơn giản

    2 chia sẻ
    Chia sẻ 1 Tweet 0

VPS NÊN DÙNG

Trần Bá Đạt Blog
Trần Bá Đạt Blog hình thành với mục đích chia sẻ, hướng dẫn và đồng hành cùng bạn tiếp cận và giải quyết các vấn đề về Internet, Windows, Wordpress và SEO.

Email: [email protected]
Fanpage: Trần Bá Đạt Blog

DMCA.com Protection Status

EXTERNAL LINKS

  • Technology Knowledge

TAGS THÔNG DỤNG

  • Tìm hiểu Gmail
  • Tìm hiểu theme Newspaper
  • Kiến thức Wordpress

INTERNAL LINKS

  • Biểu tượng Facebook
  • Key Win 10
  • Key Office 2016
  • Cách vào Facebook
  • SEO Blogspot
  • Thủ thuật Blogspot
  • Lập Gmail
  • Ứng dụng học tiếng Anh
  • Key Office 2019
  • Liên hệ
  • Sitemap

© Copyright 2017 Trần Bá Đạt Blog. Hosted by Vultr.

Không có kết quả
Tất cả kết quả
  • Học SEO
    • SEO Local
    • SEO Onpage
    • Tài liệu SEO
  • Windows
  • Thủ thuật CNTT
  • WordPress
    • Thủ thuật WordPress
    • Theme WordPress
    • Plugin WordPress
  • Học Blogspot
    • Thủ thuật Blogspot
    • Template Blogspot
    • SEO Blogspot
  • Pocket Ninja

© Copyright 2017 Trần Bá Đạt Blog. Hosted by Vultr.