Bài 1 - Seri học thiết kế giao diện cho blogspot

- Xin chào các bạn, do kì thi học kì 2 nên mình không có thời gian để đăng bài cho các bạn đọc. Nay đã xong xuôi thì mình xin phép đc viết một seri design một template blogspot cơ bản dành cho người mới chưa có kinh nghiệm, mong các bạn sẽ ủng hộ nhé!

BẮT ĐẦU NÀO:

Đối với bài viết này thì nếu ai đã có hiểu biết về lập trình thì việc này cực kì dễ dàng, nhưng những ai chưa biết hoặc rành lắm cũng có thể yên tâm vì nó hoàn toàn không gọi là quá cao siêu cả.

CÁCH THỨC HOẠT ĐỘNG 1 WIDGET:

Để đơn giản hóa vấn đề hoạt động của một widget, mình xin giới thiệu sơ về ngắn gọn cách thức của một ngôn chạy như sau. Đơn giản ở đây chỉ có 2 điều bạn cần biết, điều đầu tiên đối với bất kì một chương trình được viết bằng bất cứ ngôn ngữ lập trình nào, khi bắt đầu chạy, nó sẽ tìm đến một hàm được ngôn ngữ đó quy định trước, thông thường nhất thì hàm đó có tên là "main", điều thứ hai bất kì ngôn ngữ lập trình nào cũng chạy theo thứ tự từ trên xuống dưới, từ trái qua phải. Cũng tương tự như vậy, nếu như một thẻ includable nó tương tự với hàm thì đây widget nó tương tự như một chương trình nhỏ vậy. Khi bắt đầu chạy nó cũng bắt đầu từ id="main" và cũng chạy theo thứ tự từ trên xuống dưới và từ trái sang phải vậy.

CHÚNG TA SẼ TẠO 1 TEMPLATE TRẮNG NHƯ SAU:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html>
<head>
<title>
Tiêu đề trang web
</title>
<!-- Bắt đầu viết Css cho web -->
<b:skin>
<![CDATA[ /* Chèn Css vào đây */ ]]>
</b:skin>
</head>
<!-- Bắt đầu phần hiển thị trên web -->
<body>
Thêm nội dung trang web của bạn vào đây
<b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='yes'>
</b:section>
</body>
<!-- Kết thúc phần hiển thị trên web -->
</html>

Tiếp theo chúng ta sẽ viết code của các thành phần bên trong template, phần code bên dưới được chèn trong cặp thẻ <body>...</body>

<div class='wrapper'>
<div class='header'>
Đây là nội dung hiển thị trong phần Header
</div>
<div class='main-wrapper'>
Đây là nội dung hiển thị trong phần Main Content
</div>
<div class='sidebar-wrapper'>
Đây là nội dung hiển thị trong phần Sidebar
</div>
</div>
<b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='yes'/>

Khi chúng ta sử dụng template, khá nhiều template trong phần bố cục có phần chỉnh sửa và thêm logo ngay dưới phần Favicon, vậy làm thế nào để có nó, chúng ta chỉ cần thêm đoạn code sau vào phần header của template:

<b:section class='Header' id='Header' showaddelement='yes'>
     <b:widget id='Header1' locked='false' title='(Tiêu đề)' type='Header'/>
</b:section>

Bây giờ thì có thể coi những thứ chúng ta vừa làm là 1 template rồi, nhưng chúng vẫn chưa thực sự tạo thành bố cục hoàn chỉnh và vẫn đang chỉ là một mớ hỗn độn. Để tạo đc bố cục hoàn chỉnh, chúng ta cần phải viết CSS căn chỉnh cho template:

<![CDATA[
.wrapper {
width: 800px;
margin: 0 auto;
}
.header {
width: 100%;
min-height: 90px;
background: #4d90fe;
}
.main-wrapper {
width: 70%;
float:left;
min-height: 300px;
background: #f0c36d;
}
.sidebar-wrapper {
width: 30%;
float:right;
min-height: 300px;
background: #f9edbe;
}
]]>

Phần CSS bên trên các bạn chèn vào trong cặp thẻ <b:skin>...</b:skin> . Như vậy là chúng ta đã tạo được bố cục cho template rồi. Hiện tại bài 1 trong seri đã giúp chúng ta tạo được bố cục cho template, ở bài 2 mình sẽ hướng dẫn các bạn thêm phần bài viết cho template. Các bạn hãy comment ủng hộ để mình tiếp tục ra bài 2 của seri hướng dẫn thiết kế template cho blogspot nhé.
Chúc các bạn thành công!

Codepen Blogger

Bài 1 - Seri học thiết kế giao diện cho blogspot

Bình luận Facebook

17 nhận xét

Codepen Blogger

Bài 1 - Seri học thiết kế giao diện cho blogspot

Bài viết liên quan

Bình luận Facebook

17 nhận xét