Trang chủ \22.3.12

Thiết kế trang báo lỗi 404 cho Blogger

404Hôm nay Blogger cập nhật thêm rất nhiều tính năng về SEO vô cùng mạnh mẽ. Đầu tiên là Meta Description tag (trước đây muốn thêm nó chúng ta phải khai báo trong template), câu lệnh tương ứng là data:blog.metaDescription. Điều mình đánh giá cao nhất là có thể đặt Meta Description tag tương ứng trong từng bài viết, tính năng này mới giới thiệu chứ chưa thấy xuất hiện trong phần cài đặt bài viết. Tính năng thứ 2 là dễ dàng thêm rel="nofollow", target="_blank" cho thẻ liên kết. Tính năng thứ 3 là dễ dàng thêm alt, title cho ảnh. Và cuối cùng, tính năng được mong đợi từ lâu: Tạo trang báo lỗi 404.

Để báo lỗi hiển thị thì template của bạn phải có hàm <b:include data='top' name='status-message'/> và hàm này phải được gọi ra. Theo mình biết thì phần lớn template hiện nay được chỉnh sửa đã xóa bỏ hàm này. Trong bài viết này mình sẽ hướng dẫn các bạn tùy chỉnh để có thể hiển thị được dòng thông báo khi không tìm thấy bài viết trong kết quả tìm kiếm và lỗi trang không tìm thấy (404). Dòng thông báo sẽ không xuất hiện khi truy cập Nhãn, Bài đăng Cũ hơn...

Thêm đoạn mã dưới đây vào sau thẻ <b:includable id='main' var='top'> trong template của bạn.
<b:if cond='data:numPosts == 0'>
 <data:navMessage/>
</b:if>

Về cơ bản đến đây là xong. Dòng thông báo chỉ xuất hiện khi số lượng bài viết trên blog bạn ở trang hiện tại là 0. Tức là khi tìm kiếm không thấy kết quả hoặc khi trang truy cập không tồn tại (404).

Để thiết kế cho trang 404 bạn vào Cài đặtTùy chọn tìm kiếm. Ở mục Lỗi và chuyển hướng chọn Chỉnh sửa và viết dòng thông báo bạn muốn hiển thị (hỗ trợ cả mã HTML) hoặc sử dụng đoạn mã dưới đây để hiển thị giống blog demo.
<img alt='404' width='590' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_mLFs3coEMP9LQJm0UjEySEnGkF7Upx5hmfvIgj65xn4yS-UOL8jkyGxt93HItg-saRAPNYmuzjRoI3FGxNm-tcT7vhVQD87fUCS10aArxnEgs31Xy8ULJBS0Ldut1uE_VCGw5ClJKuE/s590/404.png' height='399'/>

setup

Thiết kế trên đây chỉ mang tính gợi mở, hãy thể hiện sự sáng tạo của bạn trong việc thiết kế trang báo lỗi 404!

Hướng dẫn thủ thuật Blogger, Blogspot

91

Nhận xét
1

Nhận xét này đã bị tác giả xóa.

Reply
2

oh shit, hôm qua thấy buzz cập nhật gì đó mà ko để ý cái này :))

Reply Xóa nhận xét
3

thấy bên blog a Fandung cũng viết một bài nhưng không cụ thể thế này

Reply Xóa nhận xét
4

Mới nhận được tin viết bài đăng lên cái thấy 2 FD và bác DP đã có bài... nhanh thật :)

Reply Xóa nhận xét
Nặc danh 22/3/12 19:51
5

Cảm ơn bác Duy nhé :))

Reply Xóa nhận xét
6

Blogger ngày càng hay...ngon bổ rẻ =)

Reply Xóa nhận xét
7

Hi DP...
Bạn có thể hướng dẫn mình làm cái thống kê giống blog demo của bạn ko...
hoặc giống của bên vnblogspot đấy...
Thanks

Reply Xóa nhận xét
8

Cảm ơn bác, bài bổ :D

Reply Xóa nhận xét
9

Chà, đụng hàng với em nữa rồi. Không ngờ tin này hot đến độ anh em nào cũng đưa tin rần rần. Kỳ này template 404 lại có dịp rộ rồi. Bác Noct và bác Duy chuẩn bị mỏi tay vì cầm . . . chuột =))

Reply Xóa nhận xét
10

Hay quá, cảm ơn bài viết của Duy :)) dạo một vòng các blog thủ thuật thấy khí thế quá, Blogspot #1 =))

Reply Xóa nhận xét
11

ohh blogger bổ sung nhiều tính năng trội quá

Reply Xóa nhận xét
13

mình cũng thấy có chức năng này nhưng ko thấy hiển thị
thì ra phải thêm dòng mã kia vào
cảm ơn bạn về bài viết, giờ blogspot nhìn pro thật =D>

Reply Xóa nhận xét
14

@Tien NguyenChắc bác k đọc kỹ rồi, blog em chỉ viết về thủ thuật chứ k đưa tin. Trọng tâm bài này là cách sử dụng data:numPosts để hiển thị thông tin cho những blog đã xóa hàm status message. Trước đây em có định viết bài làm trang báo lỗi khi tìm kiếm, nay kết hợp với báo lỗi 404 luôn.

Reply Xóa nhận xét
Nặc danh 23/3/12 14:42
15

Cho em hỏi chút, khi vào trang 404 blog em thì title hiển thị dòng: "| Rùa bông Blog" còn của Duy thì không có dấu |. Để loại bỏ cái dấu thì làm cách nào. Mong Duy giúp cho. Nếu cần để em send Template

Reply Xóa nhận xét
16

@Phan Thành ĐăngMình sẽ cập nhật cho bài All in One SEO để mọi người biết thêm cách phân biệt những kiểu trang con trong kiểu index.

Reply Xóa nhận xét
17

Hay đó bác, còn em đã nâng cấp blogger thành một phần của WP :

http://sieuluoi.blogspot.com/video/aloha/1/cool-aloha.anc

Reply Xóa nhận xét
18

Thực lòng mình hơi lơ mơ:((
=))

Reply Xóa nhận xét
19

@Anh N.CJS của bạn khá thật nhưng mình k cho rằng đây là nâng cấp Blogger. Mình k thích cách sử dụng Blogger chỉ như 1 trang index đặt js lên đó, mua 1 host và dùng thì hay hơn. Dân web development sẽ k coi bạn là mang tiếng đi ở nhờ Blogger, mà dân Blogger thì k coi bạn là "khác thường" :D. Bạn đang theo con đường mà code1k làm, mình k gọi đó là Blogger vì k khai thác tính năng thực sự của Blogger mà chỉ dùng HTML/js.

Reply Xóa nhận xét
20

mình ko tìm thấy chỗ: Cài đặt → Tùy chọn tìm kiếm. Ở mục Lỗi và chuyển hướng chọn Chỉnh sửa

Reply Xóa nhận xét
21

@Tùng BiDùng giao diện mới của Blogger nhé bạn.

Reply Xóa nhận xét
23

Hay đó pác Duy. Trước giờ cũng chưa nghĩ đến chuyện phải thiết kế trang 404 này bao giờ. Giờ nhờ pác gợi ý chắc phẩi dành ít thời gian làm thử mới đc.

Reply Xóa nhận xét
24

Nhận xét này đã bị tác giả xóa.

Reply
25

@Duy Pham Cảm ơn bác, rất chân thành.. em chỉ làm giải trí với đúng nghĩa tên miền Siêu lười thôi, mục đích chính vẫn là mảng Media. Em đang phát triển chức năng Search Video Youtube cho nó :d

Reply Xóa nhận xét
26

Trang 404 thì cần đơn giản là chính :D

Reply Xóa nhận xét
27

@Duy PhamÀ, ý em là em đụng thôi, vì em biết tin này sau. Hi vọng bác và Noct cho ra nhiều cái template sau đợt này. Blogger cần 2 người như các bác thì nó mới xôm được. Mà vào Nam off một phát chứ bác????

Reply Xóa nhận xét
28

@Tien NguyenNếu có cơ hội vào đó sẽ liên lạc với bác liền :D Hi vọng hè này có thời gian đi đây đi đó :D

Reply Xóa nhận xét
29

trang 404 khủng nè =)) http://goo.gl/RyPxe test đi mọi người , tự search kết quả không tìm thấy

Reply Xóa nhận xét
30

@Minh NguyenKhủng ở chỗ nào hả bạn :D. Thường là kết quả tìm kiếm từ Google tới bài đã xóa rồi thì báo lỗi 404, bạn lại đi search ngược lại.

Reply Xóa nhận xét
31

@Duy Pham hehe, thì fix lại thành search google.com là được chứ gì :) , dùng _blank để hok mất visit

Reply Xóa nhận xét
32

@Duy Pham mình vừa fix lại đó , bạn vào cho mình cái cm nha :D

Reply Xóa nhận xét
34

Mới làm trang báo lỗi 404 khá đẹp bằng css3 bác nào hứng thú thì sang xem nhé ...

Reply Xóa nhận xét
35

rất hay đã thử thành công

Reply Xóa nhận xét
40

Anh duy chỉ em cách làm nút Reply giống anh với.pro ghê.nhấn vào => xuống khung nhận xét=> có tên người mình trả lời. Hay đáo để

Reply Xóa nhận xét
38

anh chơi cái hình 404 zui hểy =.="

Reply Xóa nhận xét
39

Wow! Trang báo lỗi có hiệu ứng gì mà cool thế :D

Reply Xóa nhận xét
41

Anh duy chỉ em cách làm nút Reply giống anh với.pro ghê.nhấn vào => xuống khung nhận xét=> có tên người mình trả lời. Hay đáo để
:))

Reply Xóa nhận xét
43

@-) mấy hôm nay về quê ăn cưới đứa bạn thân, vào blog chỉ một chút nên k có thời gian reply mọi người. Tạ lỗi và hẹn vài ngày nữa vậy :-SS, vẫn đang còn phê :D

Reply Xóa nhận xét
44

:D:D đúng là người việt có khác.hì

Reply Xóa nhận xét
45

nhơ trả lời câu hỏi của em nha. :)):))

Reply Xóa nhận xét
46

Nhận xét này đã bị quản trị viên blog xóa.

Reply
47

Nhận xét này đã bị quản trị viên blog xóa.

Reply
48

Nhận xét này đã bị tác giả xóa.

Reply
49

Nhận xét này đã bị tác giả xóa.

Reply
50

4 comments ngay trên này đều là của 1 mình bạn, bạn đang cố tình spam hả.

Reply Xóa nhận xét
52

Có thể biết được comment của ai ko anh Duy

Reply Xóa nhận xét
54

Comments với tên/url hoặc ẩn danh với cùng 1 người vẫn phát hiện được. Giống như cái site thiết kế web gì đó hay spam blog mình, tự hỏi rồi tự trả lời =)).

Reply Xóa nhận xét
56

Bác cho họ chút đỉnh lượng truy cập qua lại đê, blog bác uy tín họ mới cần, chớ blog em chẳng ma toi nào thèm comment, cứ coi như giúp họ lên đời ấy, còn hơn những người chuyên đi quang link tùm lum vào comment ấy à. Em là Thọ péo, mới làm cái blog này nữa, hihi :):):)

Reply Xóa nhận xét
51

mình không tìm thấy 3 dong này thôi mà. ( b:if cond='data:numPosts == 0'- data:navMessage - b:if

Reply Xóa nhận xét
53

Bạn tìm làm gì, bạn k hề đọc hướng dẫn thì phải.

Reply Xóa nhận xét
55

Ồ xin lỗi nhé. đọc lại rồi

Reply Xóa nhận xét
57

Bác này vui tính vô đối rồi b-(

Reply Xóa nhận xét
58

Xin lỗi, đáng lẽ cái này mình hỏi bên thủ thuật blogger nhưng do anh Hà mất tích nên mạn phép qua đây hỏi :)

http://www.thuthuatblogger.info/2011/01/newer-and-older-related-posts-widget.html
Duy cho hỏi, thủ thuật này mình có thể áp dụng bên sidebar hay không? Nếu có thì làm cách nào?

Reply Xóa nhận xét
59

Được, nhưng sẽ phải viết thêm nhiều thứ bác ạ.

Reply Xóa nhận xét
60

Mình nghĩ có thể thêm 1 tiện ích Blog2 vào sidebar thì có thể áp dụng thủ thuật này được.

Reply Xóa nhận xét
61

Và sẽ có thêm cơ số hàm được add tự động vào widget Blog này, dung lượng temp sẽ rất lớn. Đã dùng js rồi thì sidebar thêm widget và gọi nó ra thôi.

Reply Xóa nhận xét
62

Rất mong Duy giúp đỡ mình thủ thuật này :)

Reply Xóa nhận xét
63

Bờ lốc với bờ liếc, hồi này chẳng sôi động tí nào. Bác Hà thì bỏ hoang nhà cửa, bác Dũng thì không xuất hiện nữa, bác Tiến chắc đang lo kiếm xiền từ dịch vụ của bác ấy nên khó mà có cái temp free nào, Trí - Noct thì lâu lâu mới ra bài, còn bác Duy thì lại than hết ý tưởng. Đau đầu ghê, lượn 1 vòng mà ko kiếm chác được gì :(

Reply Xóa nhận xét
64

Đến thời kỳ bão hòa hay là khoảng lặng trước cơn bão mới nhỉ :D

Reply Xóa nhận xét
65

Lúc nào mà chả thế... lúc thịn lúc suy thôi bác, kể cả lúc này Google toàn tin nóng thôi mà lượt view cũng không tăng là mấy :)...

Reply Xóa nhận xét
66

Mình đã làm giống thế, nhưng kết quả trang 404 lại hiện ra tới 2 ảnh lận, ko hiểu vì sao lại bị double ảnh như thế :(

Reply Xóa nhận xét
67

Hehe! Đã khắc phục đc roài :D
Thì ra lúc đầu mình add cái thêm cái hàm như bác hướng dẫn:



Sau đó xóa cái hàm đó đi, chỉ add thêm ảnh thì ko còn bị double nữa :D

Reply Xóa nhận xét
68

Demo của mình đây! Xin được chia sẻ :D

http://photo.vietdesigner.net/404

Reply Xóa nhận xét
70

cảm ơn vì những thông tin bổ ích

Reply Xóa nhận xét
71

thông tin đã cung cấp cho tôi những hiểu biết thật thú vị

Reply Xóa nhận xét
72

cách này hay ghê vừa áp dụng thử tah61y rất good

Reply Xóa nhận xét
73

Nhận xét này đã bị quản trị viên blog xóa.

Reply
74

làm trang này thì có lợi cho seo đây

Reply Xóa nhận xét
75

hay, cám ơn bạn

Reply Xóa nhận xét
76

Lâu rồi mới ghé lại blog của Phạm, thấy bài viết của Duy ngày càn chất lượng hơn !

Reply Xóa nhận xét
77

Welcome you back, người dùng Blogger đang vắng dần so với trước kia.

Reply Xóa nhận xét
78

Tìm hiểu từ trưa tới giờ thì mới biết lý do vẫn là do VNPT, FPT chặn mất một số server của Google vì thế nên lượng truy cập giãm đi dẫn đến nhiều blogger chuyển sang dịch vụ khác.

Reply Xóa nhận xét
79

Thủ thuật hay!... Cám ơn Duy Phạm rất nhiều!...
Demo: http://banhcomanninh.blogspot.com/2012/11/blog-post_21.html

Reply Xóa nhận xét
80

Hi, hiện tại mình gặp 1 rắc rối lớn đó là mình trỏ tên miền về Google Site nhưng sau đó mình muốn thoát tên miền ra để trỏ về Blogger. Tuy nhiên dù đã thực hiện lênh thoát nhưng mà tên miền của mình vẫn tiếp trỏ về Google Site. Trong google site thì mặc định https://sites.google.com/site/trangwebcuaminh. Giờ mình ko biết đổi DNS làm thế nào để tên miền riêng của mình không trỏ về Google Site nữa để mình chuyển nó về Blogger

Reply Xóa nhận xét
81

"thực hiện lệnh thoát" là bạn làm thế nào?

Bạn có vào google site và gỡ bỏ domain chưa? Và cần khoảng thời gian để thay đổi có hiệu lực.

Reply Xóa nhận xét
84

Mình nghĩ bạn tùy chỉnh cấu hình ip hay cname trong dns về đúng ip và cname của blogger. Nhưng có lẻ phải chịu khó chờ đợi để dữ liệu cập nhật mới lại sẽ cài đặt cho blogger của bạn.

Reply Xóa nhận xét
82

Mình đã gỡ bỏ nó ra rồi. Nhưng có lẽ do DNS mà mình cấu hình trong trong tên miền của mình vẫn tiếp tục trỏ về google site. Vậy có phải bây giờ mình cấu hình cho dns trỏ đến 1 nơi khác sau đó mới cho nó trỏ về Blogger?

Reply Xóa nhận xét
83

Hiện nay mình k rõ Google site cấu hình ntn, còn trước đây thì nó giống như ở Blogger, bạn chỉ cần bỏ ở Google site và vào add domain ở Blogger mà k cần cấu hình lại DNS.

Reply Xóa nhận xét
85

bác Duy cho em hỏi là tại sao trang 404 của em lại hiện dở hơi như này
http://binzon.blogspot.com/404
và dù cho thêm cái dòng kia thì khi tìm kiếm ko có bài viết nào nó vẫn ko hiện trang 404

Reply Xóa nhận xét
86

Bạn không chèn vào sau thẻ <b:includable id='main' var='top'> mà chèn vào sau thẻ <div id='content'> nhé.

Còn tìm kiếm là kiểu index chứ không phải kiểu error nên không tìm thấy bài nào khác với đường dẫn không có.

Reply Xóa nhận xét
87

hic, em sửa được rồi bằng cách khai thêm #blog1
Nhưng cái tìm kiếm ko có bài viết vẫn phải nhờ bác xem hộ:(

Reply Xóa nhận xét
88

uhm hiểu òi, thanks Duy

Reply Xóa nhận xét
89

Cám ơn bạn, mình tìm mãi bài này!

Reply Xóa nhận xét
90

Mình đã làm thành công! Thank

Reply Xóa nhận xét
91

cảm ơn vì những chia sẻ thú vị

Reply Xóa nhận xét

Đăng nhận xét

Cancel