Cùng học tạo Blogspot: 50.Làm việc với sidebar

50.Làm việc với sidebar

8.12.2012

Đã cập nhật: Giải pháp sử dụng tên miền miễn phí CO.CC cho Blogger và Yahoo! 360plus.

Sidebar là thành phần nằm bên trái hay phải hoặc cả hai của blog (phụ thuộc vào template). Trong blogger.com bạn có thể dễ dàng nhìn thấy trên Layout (Xem hình 2). Khi click xem blog, các thành phần này sẽ hiển thị đúng như những gì bạn sắp xếp hay thay đổi tại layout.

Về cơ bản bạn có thể xem hình minh họa cụ thể layout (hình 1) và hiển thị của nó (hình 2).

Hình 1

Hình 2

Kích thước sidebar template của tôi là bao nhiêu và chỉnh thế nào?

Đăng nhập vào blogger.com, trên Template (Mẫu) click Edit HTML (Chỉnh sửa HTML), kéo thanh trượt và tìm như dưới hình. Chiều rộng của sidebar đối với template ví dụ này là 220px (pixels). Tất nhiên ai ngăn cản bạn thay đổi? Ở đây không giới hạn chiều cao (height).

Hình 2a

Bạn có thể cho phép hiển thị gì ở sidebar?

Như đã nói, sidebar là thành phần cơ bản không thể thiếu của blog. Bạn có thể thêm bất kỳ widget nào vào đây bằng cách click trên Add a Page Element (Thêm phần tử trang) (hình 3), chọn và thực hiện thao tác theo hướng dẫn của mỗi widget. Blogger.com cung cấp đủ các widget cho bạn thỏa sức sử dụng, đặc biệt hơn cả bạn có thể chèn mã ứng dụng được cung cấp bởi một hãng thứ ba (widget HTML/JavaScrpipt), không giới hạn số lượng. Về điểm này, nhiều nhà cung cấp blog khác còn lâu mới đuổi kịp!

Hình 3

Làm thế nào để sắp xếp các widget trên sidebar?

Rất đơn giản, bạn chỉ cần kéo và thả (drop and drag) vị trí của chúng theo trật tự ưu thích sau đó click Save (Lưu lại) để kết thúc.

Hình 4

Làm thế nào để đổi màu nền cho sidebar?

Bạn vào Edit HTML (Chỉnh sửa HTML), kéo thanh trượt và chèn đoạn mã như hình 5:

background: #giátrịmàuthậplục;

Ví dụ: Màu đỏ

background: #cc0000;

Hình 5

Lưu ý thêm, khi chúng ta dùng màu nền trong body, màu nền này phủ lên toàn trang, nghĩa là sẽ phủ hết cả header, main, sidebar và footer. Còn màu nền cho sidebar chỉ thay đổi trên sidebar.

Làm thế nào để chèn hình nền cho sidebar?

Tương tự như cách chèn hình nền cho blog. Xem bài.
Cũng xin nhắc là bạn nên dùng một tấm ảnh đủ nhỏ và cân đối với kích thước của sidebar.

Làm thế nào để đổi màu nền cho nhan đề widget trên sidebar?

Bạn muốn có một nhan đề có màu khác với nội dung trên mỗi widget? Trước hết bạn cần thêm một thành phần để hiển thị nhan đề. Hãy chép đoạn mã này và paste như hình 6.

.sidebar h2 {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 10px;
background-color: #ffffff;
font-size: 120%;
font-weight:bold;
color: #333333;
}

Hình 6

Trong đó các giá trị bạn margin và padding, background-color (màu nền) và color (màu), font-weight (kiểu hiển thị font: đậm, nghiêng), font-size (kích thước chữ)... cho text nhãn của widget được chèn vào sidebar. Hãy thay đổi các giá trị màu theo ý thích của bạn.

Giá trị màu ở đây là giá trị thập lục phân. Tôi sẽ viết một bài hướng dẫn về các biến màu mà blogger.com sử dụng và cách lấy giá trị này. Để đơn giản bạn có thể dùng link này http://www.colorschemer.com/online.html tìm mã màu.

Kết quả của hiển thị đoạn mã này, hình 7:

Hình 7

Làm thế nào để hiển thị đường viền (border) cho sidebar?

Đường viền dựa trên vị trí hiển thị, độ rộng, kiểu và màu sắc.
Các vị trí: border-right, border-left, border-top, border-bottom (phải, trái, trên dưới), hoặc tất cả: border . Kết hợp với:

border-width (rộng)
border-style (kiểu)
border-color (màu)

Bạn có thể kết hợp các vị trí với các yếu tố rộng, kiểu và màu sắc. Ở đây tôi chỉ hướng dẫn bạn border-width, border-style, border-color,

1. border-width. (độ rộng đường viền)

Có thể bao gồm các giá trị px, em hay các từ khóa thin(mỏng), medium(trung bình), và thick(dầy). Ví dụ: Lần lượt các đoạn mã này sẽ cho kết quả một đường viền mỏng, 1px và 2em:

border-width: thin;
border-width: 1px;
border-width: 2em;

2. border-style. (kiểu đường viền)

Lần lượt các đoạn mã dưới đây là sẽ cho kết quả đường viền như hình 8.

border-style: dotted;
border-style: dashed;
border-style: solid;
border-style: double;

Hình 8

3. border-color (màu đường viền)

Có nhiều cách để sử dụng màu: giá trị thập lục phân, mã màu RGB hay thậm chí tên màu (tất nhiên bằng tiếng Anh). Ví dụ: màu đỏ

border-color: #FF0000;
border-color: red;

Cách dùng tắt: lần lượt độ rộng, kiểu và màu (ví dụ):

border-right: 1px dotted red;

Bạn có được đoạn mã chẳng hạn như ví dụ trên, hãy chép đoạn mã này vào vị trí như được tô màu ở hình 9 và kết quả hình 10

Hình 9

Hình 10

Làm thế nào để chèn đường viền cho các widget chứa link?

Các widget như là linklist hay chứa link, bạn có thể chèn đường viền bao quanh nó, việc chèn này không làm ảnh hưởng widget không chứa liên kết. Cách chèn hình 11 và kết quả hình 12.

Hình 11

Hình 12

Làm thế nào để chèn đường viền bao quanh nội dung trong các widget chứa link?

Cách chèn hình 13 và kết quả hình 14.

Hình 13

Hình 14

Làm thế nào để chèn đường viền cho tất các widget?

Kéo thanh trên trên Edit HTML (Chỉnh sửa HTML) và tìm (phụ thuộc vào template có thể không giống nhau)

.sidebar .widget, .main .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}

Bạn thấy dòng border-bottom:1px dotted $bordercolor; cho biết đường viền dưới, độ rộng 1px, kiểu chấm, màu của biến bordercolor. Chúng ta muốn sử dụng là đường viền bao quanh tất cả, vì vậy sẽ dùng border. Xin đọc ở trên nếu chưa quen với đường viền. Ngoài ra chúng ta còn phải dùng đến padding để đường viền hiển thị cân đối với nội dung. Ví dụ ở đây tôi thay bằng dòng code như được dùng ở các hướng dẫn trên. Các vị trí và kết quả hiển thị lần lượt hình 15 và 16 và bao phủ toàn bộ sidebar cũng như main.

Hình 15

Để khắc phục điểm này, bạn chỉ cần sửa lại như hình 17 và kết quả hiển thị, hình 18.

Hình 17

Hình 18

Thông qua việc tìm hiểu sidebar, bạn sẽ nắm được những thành phần cơ bản để làm cho blog mình "không giống ai". Blog thể hiện cá tính của người, hãy sáng tạo thỏa thích những gì mình muốn nhé! Chúc buổi tối vui vẻ!

Dropbox, dịch vụ lưu trữ đám mây, chia sẻ và đồng bộ dữ liệu giữa điện thoại di động, tablet, laptop và desktop. Tài khoản miễn phí 2.25GB! Bạn có thể kiếm thêm tối đa đến 18GB khi giới thiệu thêm người đăng ký Dropbox (mỗi người mà bạn giới thiệu đăng ký và cài đặt thành công Dropbox, bạn được 500MB!)

Posted by Thủ Thuật Blog at 11:12 AM