Tùy chỉnh blogspot template

Trong bài viết trước mình đã hướng dẫn các bạn tạo một blog tại blogspot và tìm hiểu một vài HTML code cơ bản thường dùng. Sau khi lựa chọn được template phù hợp bạn có thể bắt tay vào việc tùy chỉnh sao cho phù hợp với mình. Trong bài này sẽ hướng dẫn tùy chỉnh các thành phần hiện có của template.


Template mà bạn chọn có thể bao gồm 2, 3 hay 4 cột nhưng về cơ bản nó thường bao gồm các thành phần sau đây. Mình lấy ví dụ template mình đang dùng.

Để tiến hành chỉnh sửa bạn vào Layout, Edit HTML. Tùy vào template mà việc bố trí code có thể khác nhau đôi chút nhưng bản chất của chúng đều giống nhau. Khi thay đổi bất cứ thành phần nào bạn có thể dùng nút Preview để xem trước, nếu hài lòng thì tiến hành lưu lại. Bạn cũng nên sao lưu template trước khi tiến hành bất cứ sự thay đổi nào mà bạn không chắc chắn nó có ảnh hướng xấu tới template hay không bằng cách chọn Download full template.

• Thay đổi font chữ, cỡ chữ, màu chữ, màu nền.

- Nếu blog của bạn có thành phần /* Variable definitions (nằm ở phần đầu của HTML code).

<variable name="bodybgcolor" description="body background color"
type="color" default="#ffbbe8" value="#ffffff">

<variable name="textcolor" description="text color"
type="color" default="#191919" value="#000000">

<variable name="textfont" description="text font"
type="font"
default="normal normal 90% arial, sans-serif"
value="normal normal 80% arial, sans-serif">

Để chỉnh sửa bạn thay đổi các giá trị phù hợp vào phần value

Bạn nên sử dụng chương trình bắt màu để có được màu sắc thích hợp.

- Nếu blog của bạn không có thành phần trên thì các yếu tố font chữ, màu sắc sẽ được qui định ở bên dưới. Với mỗi thành phần như Header, Post, Sidebar... bạn có thể chỉnh sửa các yếu tố như:

font-family: times, serif;
font-size: 180%;
letter-spacing: .5px;
text-align:left;
color:#000000;
background-color: #ffffff;
text-transform: uppercase;
text-decoration: underline;
text-decoration: none;
border: 1px solid #fff;

Tạo background bằng hình ảnh

background: url('link tới file ảnh') repeat-x;

• Thay đổi chiều rộng, chiều cao của các thành phần.

Bạn tìm tới thành phần Width, Height. Một lưu ý nhỏ là do chiều ngang của blog là một số nhất định nên khi bạn tăng cái này thì phải giảm cái kia và ngược lại.

• Chỉnh sửa blockquote.

Bạn sử dụng blockquote khi muốn nhấn mạnh một phần nào đó trong bài viết. Như phần hiển thị code của mình trong bài này chẳng hạn.

Code:

/* ----- BLOCKQUOTE ----- */
blockquote {
margin: 10px 0px 10px 15px;
padding: 10px 15px 10px 15px;
font: $quoteFont;
line-height: 1.6em;
color: $blockQuoteColor;
background: $blockquotebgColor;
border: 2px solid $blockquoteBorderColor;
}

• Chỉnh sửa các liên kết có sẵn trong template.

Trong template tác giả thường để sẵn một số links để thử nghiệm, bạn có thể chỉnh sửa nó thành links của mình hoặc xóa bỏ nó đi. Tuy nhiên các bạn nên giữ link gốc tới nơi cung cấp template để tôn trọng tác giả đã tạo nó.

Như vậy là các bạn đã có thể tự mình điều chỉnh một số thành phần trong template. Bây giờ chúng ta sẽ tiến hành thêm các Gadget vào blog. Trong phần Layout chọn Page Elements, giao diện có dạng như sau:

Để thêm Gadget bạn chọn Add Gadget. Trong mục Basics có 19 Gadgets cho bạn chọn lựa, tuy nhiên chỉ nên chọn một số nhất định vì càng nhiều Gadget thì sẽ làm giảm tốc độ hiển thị của blog. Có lẽ thành phần HTML/JavaScript sẽ được sử dụng nhiều nhất sau này. Khi những Gadget sẵn có không đáp ứng được yêu cầu thì bạn sẽ phải sử dụng các đoạn HTML code hay JavaScript để đạt được mong muốn.