Hướng dẫn tạo trang báo lỗi 404 đẹp cho blogspot

Ở một bài trước, mình đã hướng dẫn các bạn chuyển hướng trang bị lỗi 404 về trang chủ rồi đúng không ạ?

Nhưng bạn lại không thích như vậy. Bạn muốn sẽ có một trang báo lỗi 404 đẹp cho blog của mình?
Hôm nay Việt Blogger xin hướng dẫn các bạn tạo một trang báo lỗi theo đúng như ý của bạn.

Bước 1:

Các bạn hãy copy và chèn đoạn css này vào trước thẻ </style> trong blog của bạn

/* Error 404 Rip By Tips24h.net*/
#error-page{background-color:#e9e9e9;position:fixed!important;position:absolute;text-align:center;top:0;right:0;bottom:0;left:0;z-index:99999}
#error-404{margin:11% auto}
#error-404 .box-404{width:200px;height:200px;background:#21afa4;color:#fff;font-size:80px;line-height:200px;border-radius:10px;margin:0 auto 50px;position:relative}
#error-404 .box-404::after{content:"width:0;height:0;bottom:-8px;border-color:#21afa4 transparent transparent;border-style:solid;border-width:9px 9px 0;position:absolute;left:47%}
#error-404 h1{text-transform:uppercase}
#error-404 p{line-height:1.7em;font-size:15px;font-family:arial}

Bước 2:

Chính là bước quan trọng nhất. Bước hiển thị trang báo lỗi ra màn hình.

Ở bước này chúng ta có hai cách nhé.

Cách 1:

Chèn bộ code báo lỗi ngay trên blog của bạn.

Bạn hãy chèn đoạn code sau trước thẻ </body> trong blog của bạn:

<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<div id='error-page'>
<div id='error-404'>
<div class='box-404'>404</div>
<h1>Địa chỉ ỦL không tồn tại</h1>
<p>Có thể URL bị hỏng hoặc đã bị Admin blog gỡ bỏ</p>
<p>Trở về trang chủ <a expr:href='data:blog.homepageUrl'><data:blog.title/></a></p>
</div>
</div>
</b:if>

Cách 2:
Nhúng trang báo lỗi vào blog của bạn.
Với cách này, trước tiên chúng ta cần phải soạn thảo ra một trang báo lỗi riêng cho mình. Sau đó bạn up nó lên một host nào đó để có thể truy cập được vào tệp tin đó.
Sau khi là được những công việc đó rồi các bạn hãy dùng code này để chèn trang báo lỗi vào blog của bạn nhé. Cũng chèn trước thẻ </body> nhé

<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<div id='error-page'>
  <iframe height='100%' width='100%' src='link trang báo lỗi'/>
</div>
</b:if>

Xong rồi. Bây giờ lưu lại và ra xem kết quả nào:

DEMO: http://www.vietbg.com/trang-loi-404

Chúc các bạn có được một trang báo lỗi 404 như ý nhé!

Phải lòng Tuyết Thủy Tinh

Tuyết Thủy Tinh - Sự lạnh lùng mỏng manh! Nó không là băng, không cứng sờn, tê buốt. Nó mềm mại như hàng ngàn mảnh vỡ của một ánh sao xa, lung linh và khó thấy...

Những hạt tuyết như pha lê trong suốt, phản chiếu rất nhạy cảm với những màu sắc, dư vị và biến động của cuộc đời. Những hạt tuyết long lanh, bé nhỏ li ti, mỏng manh dễ vụn... Sẽ là buồn lắm, tiếc lắm nếu ai đó vụng tay sờ vào làm vỡ nó. Người vụn tay đáng trách hay vì tuyết quá mong manh? Không, đừng trách người kia, cũng đừng giận tuyết,vì dù sao họ cũng quyến luyến nhau.

Nhận ra vẻ đẹp của tuyết, cảm được cái sắc trong có hồn của tuyết là người đó. Đặt cả sự trân trọng chân thành và niềm cảm phục lẫn xót thương, người kia cố gắng bằng hết sự nhẹ nhàng có thể để sờ lên tuyết, để hi vọng được đặt nó ở trong tay và sưởi ấm nó ở trong lòng.Lúc ấy, tim người ta bỗng rùng lên bất giác một cảm xúc không thể nói hết thành lời của niềm vui sướng,của sự biết ơn, của tình thương đột nhiên khởi phát - Một sự gắn bó tự nhiên được kết thành đầy mãnh liệt khăng khít bất ly giữa người ta và tuyết vùng lên sống! 

Không biết tuyết có cảm nhận được điều gì tương tự như thế không? Nhưng với người kia, ngay lúc được chạm vào những hạt tuyết thủy tinh long lanh, trong suốt ấy, lòng người ta chợt nhiên đã có một phần là của tuyết. Có cái gì đó đã gắn kết họ lại với nhau như một cặp tri âm, một đôi tri kỷ "tương khí tương cầu" - thứ mà thế gian này nhiều khi muốn có, theo đuổi cả đời mà chẳng thể tìm ra lại đến với người ta chỉ trong vài khoảnh khắc. Một thứ định duyên, một sợi tơ hoặc nghĩa đã vướng sẵn chỉ chờ giây phút để họ gặp nhau như thế. Một thứ gì đó sẵn có đã tạo nên một sự "chợt nhiên" bất ngờ mà chỉ người trong cuộc mới hiểu hết được thôi.

Tuyết vì mang hơi lạnh giá ở trong mình rất cần hơi ấm. Tuyết chồng khít lên nhau thành lớp, trải kề nhau phủ ấp suốt mùa đông. Và lạnh! Nỗi lạnh bao giờ cũng tràn về những nỗi sợ của cô đơn và trống trải. Tuyết thủy tinh như mảnh lòng trong trắng, sẽ làm sao để trốn khỏi nỗi niềm cô sầu, hiu quạnh ở thâm tâm. Lóng lánh như những thước hồn nhạy cảm, dễ tổn thương, mặc dù cái khí lạnh quanh nó hay khiến người đời nhầm tưởng, đặt vội, gán cho nó cái nghĩa khó gần và lãnh đạm vô tâm để rồi tránh né nó, chê bai, xem thường nó.
Người đời đã nghe qua nước mắt chảy thành sông, thì cũng biết lệ lòng ngưng thành tuyết. Hạt tuyết, vì đã nếm đủ đắng cay và thấm cả giọt nước mắt khổ đau lẫn giọt máu lòng rỉ xát vết thương tâm, mới đọng thành được thế. Vẻ đẹp đó, sự thanh thoát mổng manh đó là cả một sức mạnh, một sự chống chịu sau tất cả những đau thương. Nó là vẻ đẹp sau cùng còn sót lại, kết tinh của giọt lệ đã trải trầm luân...
............!!!

Bài 10: Giới thiệu về Position

Trong bài số 8, mình đã giới thiệu cho các bạn về Float, chúng ta có thể sử dụng nó để dàn trang sang trái hoặc qua phải. Vậy nếu chúng ta muốn định một thành phần qua một vị trí khác chúng ta phải làm thế nào?

Thật may mắn là  trong CSS chúng ta có thuộc tính Position. Nó được sử dụng sử dụng để định vị trí của thành phần này so với thành phần khác (có thể tạm gọi là thành phần làm mốc) hoặc so với chính cửa sổ trình duyệt của chúng ta

1. Fixed

- Sử dụng để cố định 1 thành phần so với cửa sổ trình duyệt, khi kéo thanh cuộn thì thành phần đó vẫn được cố định so với trình duyệt.

Ví dụ:

<html>
<head>
<style type="text/css">
p.fixed {
background: blue;
position: fixed;
right: 40px;
top: 50px;
}
</style>
</head>
<body>
<div>
<p class="fixed">position fixed</p>
<p>text text text ...</p>
</div>
</body>
</html>

2. Relative

- Là cách cố định vị trí 1 cách tương đối của 1 thành phần nào đó so với vị trí bình thường( không định vị trí)  của nó

Ví dụ:

<style type="text/css">
div {
border: 1px solid red;
height: 100px;
}
p {
background: blue;
position: relative;
}
</style>

3. Absolute

- Là 1 cách cố định 1 thành phần so với 1 thành phần khác 1 cách tuyệt đối. Khi sử dụng position thông thường thì thành phần mẹ phải đặt Relative để nó biết phải cố định tuyệt đối theo thành phần nào, nếu không tồn tại nó sẽ nhận <html> làm thành phần mẹ

Ví dụ:

<style type="text/css">
div {
border: 1px solid red;
height: 100px;
}
p {
background: blue;
position: absolute;
}
</style>

Bạn có thể xem thêm tại: http://jsbin.com/uvaros/1/edit

Bổ sung:
Đi kèm 3 thuộc tinh trên chúng ta sử dụng thêm 4 thuộc tinh: Top, Right, Bottom, Left với các giá trị tương ứng với cửa sổ trình duyệt( với Fixed), chính nó ( Relative), thành phần mẹ( Đối với Absolute).

Đây cũng là bìa cuối cùng trong serie CSS cơ bản của mình rồi. Mong rằng nó sẽ có ích cho mọi người.

Chúc các bạn học thật tốt!!!

Bài 9: Tìm hiểu về Block và Inline

Trong bài này chúng ta sẽ tìm hiểu về Block và Inline trong CSS

Tuy nhiên đây không phải thuộc tính mà là giá trị quy định cách hiển thị của 1 thành phần nào đó. Sử dụng trong thuộc tinh display để quy định cách hiển thị.

- Block quy định các thành phần hiển thị theo từng khối riêng biệt, một số thẻ mặc định đã hiển thị theo khối như: p, ul, li, div, heading,… Tức là: Khi sử dụng các cặp thẻ này, mỗi nội dung ở 1 dòng riêng biệt không nằm cùng 1 dòng hay gọi là các khối. Hãy tưởng tượng như các cặp thẻ đó dù các bạn viết code  trên cùng 1 dòng thì chúng cũng tự động xuống dòng, giống như việc xếp 10 cái hộp lên nhau, mỗi hộp là 1 khối.

- Inline quy định các thành phần nằm cùng 1 hàng ( hay 1 dòng), ví dụ như Menu trên website,…
Ngoài ra chúng ta còn 1 số giá trị sau: inline-block, inline-table, list-item, table-cell,..

Tham khảo thêm tại: http://www.w3schools.com/cssref/pr_class_display.asp
Ví dụ: http://jsbin.com/evoxur/1/edit

Bài tập: Thiết kế website như hình bên dưới( Nên làm lại, không nên sử dụng kết quả của Bài 8)

Bài 8: Float và Clear

1. Float

- Là thuộc tính sử dụng để cố định thành phần của website về 1 phía: trái( left) hay phải( right).
- Thường sử dụng trong việc dàn trang, chia cột cho website.

Giá trị:

- Left: Dàn qua trái.
- Right: Dàn qua phải.
- None: Bình thường.

Bài toán: Sử dụng div kết hợp với CSS xây dựng website như hình dưới.
Hướng dẫn:
Xây dựng 2 cặp thẻ div tương ứng với 2 thành phần trong hình. Sử dụng float cho thành phần bên trái tàn sang bên trái. Sau khi làm xong các bạn có thể xem đáp án như trong hình:

 

2. Clear

- Là thuộc tinh sử dụng cho các thành phần đi cùng các thành phần sử dụng float. Sử dụng để định dạng
cách tràn cho thành phần này khi thành phần trước nó đặt float và còn khoảng trống.
- Giá trị:
+ Left: Tràn sang trái.
+ Right: Tràn phải.
+ Both: Không tràn, thường dung để tránh tràn các thành phần trong website.
Khi đặt float cho ảnh thì phần bên phải ảnh còn khoảng trống nên các thành phần bên dưới sẽ tràn lên để lấp đầy chỗ trống đó. Để giải quyết vấn đề này chúng ta đặt 1 thành phần vào giữa 2 thành phần trên( giữa thẻ img và thẻ p) sau đó cho thành phần này clear: both.
Ví dụ:

<br class=“clear” /> 

hoặc 

<div class=“clear”></div> 

hoặc …
Sau đó sử dụng: 

.clear{ clear: both;} 

Xem kết quả: 

Bài tập: Thiết kế website như hình bên dưới sử dụng css( Không dùng table), với tên các thành phần và kích thước cho trước.

Bài 7: Định dạng kiểu khối (Box Model)

Box model: Đước dùng để định dạng kiểu khối (hay kiểu hộp) cho website.

Ở bài này chúng ta sẽ tìm hiểu lần lượt 3 phần của Box model.

1. Border- Đường viền

- Trong border chúng ta có 3 thuộc tính

a) Border-width: Độ dày của đường viền.

- Cú pháp như sau:

border-width: apx bpx cpx dpx;

Với: a, b, c, d lần lượt là giá trị độ dày đường viền của các cạnh: bên trên, bên phải, bên dưới và bên trái (Theo thứ tự được sắp xếp theo chiều của kim đồng hồ).

Khi 1 trong 4 giá trị kia bị thiếu thì nó sẽ lấy giá trị độ dày của cạnh đối diện nó.
Ví dụ: 

borde-width: 2px 3px 3px;

Như vậy: Cạnh trên độ dày là 2px, phải là 3px và dưới là 3px, như vậy bên trái bị thiếu nó sẽ lấy của cạnh đối diện là độ dày cạnh bên phải.

b) Border-style: Kiểu đường viền

- Chúng ta có 1 số giá trị về đường viền như hình bên
- Không nhất thiếu phải định dạng cả 4 cạnh có viền mà có thể sử dụng 4 thuộc tính sau: border-top-style( viền trên), border-right-style( viền phải), Border-bottom-style( viền dưới), border-left-style( viền trái).

c) Border-color: Màu đường viền

- Giá trị của border là các loại mã màu.

Ví dụ:

p{
border-width: 2px;
border-style: solid;
border-color: blue;
}

Có thể viết tắt các thuộc tính về border như sau:

border: width style blue;

2. Padding- Biên

Là thuộc tính tạo khoảng cách đường viền và nội dung

Đối với padding chúng ta cũng có 4 thuộc tính: padding-top, padding-right, padding-bottom, adding-left. Sử dụng để căn chỉnh nội dung so với các viền tương ứng: trên, phải, dưới, trái.

Tương tự như border-width ở phần trên: Khi 1 thành phần bị thiếu nó sẽ lấy giá trị của thành phần đối diện.

Như ở ví dụ trên do chỉ có 1 giá trị: padding: 20px; nên khoảng cách từ nội dung tới đường viền đều bằng 20px.
Các bạn sẽ để ý thấy hình trên nội dung cách đường viền bên phải “hình như” lớn hơn 20px, lí do nó như vậy là nội dung của chúng ta ít trong khi đó chiều rộng của border lấy theo kích thước chiều ngang trình duyệt (Các bạn viết nội dung dài ra để cho tràn xuống dòng dưới sẽ thấy kết quả).

3. Margin- Lề

- Là thuộc tinh sử dụng để căn chỉnh các thành phần với nhau hay 1 thành phần nào đó với lề( như hình).

- Tương tự Padding, Margin cũng có 4 thuộc tính để căn chỉnh 4 vị trí: top, right, bottom, left hay auto.

Ví dụ: Căn chỉnh website ra giữa

body{
margin: auto;
}

- Khi lập trình chúng ta thường sử dụng đoạn code sau để reset

*{
margin: 0px;
padding: 0px;
}

Như vậy: Toàn bộ các thành phần của website sẽ có margin và padding bằng 0, để tránh việc các trình duyệt hiển thị khác nhau.

BÀI TẬP: Thiết kế website như hình bên dưới.

Bài 6: Pseodu- Phần tử giả

Trước khi bắt đầu bai học, chúng ta cũng cần phải hiểu thế nào là Pseodu đã.

Có thể nói một cách đơn giản nhất là như thế này

Pseodu (hay dịch là Phần tử giả): Nó là một phần quan trọng mà hầu hết các website đều có. Tại sao lại như vậy ạ? Tại sao nó lại xuất hiện trong hầu hết các website hiện nay. Câu trả lời chính là trong tất cả các website hiện nay đều chứ các đường link (liên kết)trên các trang trong web của mình. Và Pseodu dùng để quy định cách hiển thị cho một liên kết khi thực bạn thực thi 1 hành động nào đó. Ví dụ như:

1. Hover- di chuột qua

- Như đã nói bên trên do Pseodu áp dụng với liên kết nên trước tiên chúng ta cần phải xác định thành
phần tác động đến là thẻ <a>
- Ví dụ:

a:hover{ color: red; background: white; text-decoration: blink;}

Tức là: Khi di chuột qua liên kết thì nội dung bên trong cặp thẻ {…} sẽ hoạt động, cụ thể: Khi di chuột qua liên kết sẽ có màu đỏ và nền trắng và nháy.

2. Link

- Trong các thuộc tính cho liên kết, mặc định màu của liên kết là xanh chúng ta có thể chuyển qua màu khác cho nó để đẹp hơn và trong chuyên nghiệp hơn.
- Ví dụ: 

a:link { color: gold; }

Như vậy những ký tự nào trên trang web của bạn mà có chứa liên kết sẽ chuyển thành màu vàng.

3. Active

- Định các thuộc tính cho liên kết khi liên kết đó hoạt động ví dụ như khi nhấn giữ chuột vào liên kết đó. Tuy nhiên trường hợp đó ít được sử dụng. Đa số trường hợp này thường áp dụng cho menu hay list các chuyên mục,...

Nghĩa là sao? Có nghĩa là các thành phần trong menu đó sẽ dẫn bạn đến một trang nhất định và khi bạn truy cập vào trang đó thì cũng có nghĩa là liên kết đó đang hoạt động.

- Ví dụ:

a:active { background: gray; }

Ở như ví dụ của mình khi truy cập vào đường link thì chuỗi ký tự mà bạn chèn link vào sẽ có nền màu xám.

4. Visited

- Định các thuộc tính khi liên kết đã được ghé thăm( Những liên kết chúng ta đã click ít nhất 1 lần)

Ví dụ: