Bài 1 - Seri học thiết kế giao diện cho blogspot - Thích Chia Sẻ Blog


- 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!
avatar

Bài viết rất oke đó. Mà temp ông sài kg thoải mái cho lắm. Sắp xếp time rồi ngồi edit lại temp khác sài đi ông. Hay nâng cấp giao diện temp này cũng được.

delete 17:27 18 tháng 5, 2018
avatar

Ồ thanks bạn nhé, ủng hộ nhiệt tình để mình tiếp tục ra bài 2 nhé

delete 20:58 18 tháng 5, 2018
avatar

Tui đang cố edit nó đây,dần dần mới ngon đc chứ

delete 21:00 18 tháng 5, 2018
avatar

tuyệt vời quá ng ae ơi, bài viết hay dành cho người mới bắt đầu như tui hihi <3

delete 12:25 19 tháng 5, 2018
avatar

Chuẩn rùi ông, ủng hộ nhiệt tình để tui ra bài 2 nhé

delete 12:54 19 tháng 5, 2018
avatar

Thẻ b:includable nhìn rối vl @@

delete 13:41 20 tháng 5, 2018
avatar

Vì một số lý do cũng như hơi bận nên mình sẽ ra phần hai hơi muộn nhé bạn

delete 00:00 1 tháng 6, 2018

- Không spam link bừa bãi.

- Không nói tục, chửi bậy.

- Không bình luận mang tính chính trị.

- Hãy là một độc giả có ý thức!

Nội quy chung Phú Cường Blogger

1. Bài viết đều tự tay tác giả viết nên nếu có ý định copy xin hãy ghi nguồn bài viết đó.
2. Template được lên ý tưởng và thiết kế bởi Phú Cường Blogger vì vậy tuyệt đối không tự ý RIP Template hoặc lấy và dùng từ những nguồn ăn cắp khác khi tác giả chưa share công khai. Nếu tôn trọng mình thì bạn có thể trao đổi mua template tại fb Nguyễn Phú Cường.
3. Không được spam dưới mọi hình thức và đưa ra những bình luận xúc phạm đến danh dự và nhân phẩm của người khác (những bình luận vi phạm sẽ bị xóa).

Đang cập nhật thêm nội quy...

- Blog: Phú Cường Blogger - Life Is Share
- Thành lập: 22/09/2017
- Nội dung: Blog chủ yếu viết về những tâm tư, tình cảm và những điều xung quanh cuộc sống của tác giả. Ngoài ra, blog thi thoảng còn chia sẻ một vài thủ thuật về Blogspot, share ảnh đẹp, tin tức về Team Solomid...
- Tác giả blog: Nguyễn Phú Cường hiện đang là sinh viên năm cuối ngành Điện tử - Viễn thông trường Đại học Bách Khoa Hà Nội.
- Template: Twitter Template Version 1.0 By Phú Cường Blogger.

Lời cuối chúc các bạn có những phút giây thật vui vẻ và ý nghĩa tại blog nhé!