Thiết kế Blogger Template từ A tới Z (Phần 1) - Cấu trúc cơ bản

Bài viết hướng dẫn về Blogger Template thì đi đâu cũng thấy, rất rất nhiều blog đều có hướng dẫn về cách thức tạo, nhưng đa phần là khó hiểu. Bản thân blog mình cũng có một bài viết "Hướng dẫn thiết kế Blogger Template đơn giản" nhưng mà ngẫm lại kĩ thì cũng không đúng với tiêu đề cho lắm. Bài đó hướng dẫn các bạn cách mà các bạn có một Blogger Template và chỉnh sửa nó.

Thiết kế Blogger Template từ A tới Z (Phần 1)

Dạo này cũng nhiều bạn (nhiều là khoảng 3 4 bạn :D) có nhắn tin qua mail cho mình nhờ mình viết bài viết hướng dẫn chi tiết và cụ thế hơn cách thiết kế Blogger Template hoàn chỉnh. Do đó thì bài viết này mình xin cố gắng hơn cái bài kia hướng dẫn các bạn tạo dựng "thiết kế" một Blogger Template hoàn thiện nhất có thể.

Vẫn lưu ý như  bài trước nhé, bạn không nắm HTML và CSS thì hoàn toàn sẽ không thế nắm bắt được. Vì mình không giải thích 2 đưa này mà mình hướng dẫn làm thế nào để tạo ra được một Blogger Template.

Tìm hiểu về Blogger Template

Blogger Template bây giờ sử dụng một ngôn ngữ lập trình đơn giản có tên là XML.Tính cho tới thời điểm hiện tại thì Blogger XML đang được chia ra làm 2 phiên bản, phiên bản "v1" là phiên bản thường được sử dụng nhất hiện nay, nếu trong template của bạn tại thẻ mở "html" ở đầu có thuộc tính sau b:version='2' và class='v2' thì có nghĩ là bạn đang ở phiên bản 2 còn lại nếu không có có nghĩa bạn đăng ở phiên bản 1.

Sự khác nhau giữa 2 phiên bản này thế nào?

Đây là câu hỏi mà chắc chưa ai từng giải thích cho các bạn, theo như nghiên cứu cá nhân của mình trong vòng một năm qua mình rút ra được như sau.

Đối với Blogger XML v1

Bạn được cung cấp những nhu cầu cơ bản cho việc thiết kế Blogger Template như phần css mặc định căn chỉnh những tiện ích (widget) có trên blog và bạn có thể thêm vào tùy chỉnh cho Template như "màu sắc" & "font chữ" của một đối tượng trong phần thiết lập năng cao của blog. Phần thiết lập năng cao bạn có thể tìm thấy tại "Mẫu » Tủy chỉnh".

Đối với Blogger XML v2

Tương tự như phiên bản một, nhưng có nhiều tính năng nâng cao hơn và phần css căn chỉnh cho các widget khác so với v1 (theo cảm nhận thì mình thích xài css của v1 hơn). Nhưng tính năng nâng cao hơn bạn có thể làm là, căn chỉnh "chiều rộng" cho đối tượng có trong phần thiết lập nâng cao. Ngoài ra thì bạn còn có thể tùy biến layout của cả template cho người dùng lựa chọn tại phần thiết lập nữa (nhưng cái này rất rất khó, và cần rất nhiều thời gian để thực hiện).

Cấu trúc cơ bản của Blogger Template

Sau đây là cấu trúc cơ bản của một Blogger template và lời giải thích sơ của mình tại bài viết hướng dẫn đầu của mình trong việc thiết kế Blogger Template
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>  <!-- xóa 2 thuộc tính quyết định v2 để trờ về v1 -->

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <b:include data='blog' name='all-head-content'/>
    <title><data:blog.pageTitle/></title>
    <b:skin><![CDATA[   ]]></b:skin>
    <b:template-skin><![CDATA[   ]]></b:template-skin>  <!-- Chỉ có ở v2 -->
</head>

<body>
    <b:section class='main' id='main' showaddelement='no'><b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/></b:section>
</body>

</html>
ở đây mình sẽ giải thích những thành phần cơ bản như sau, đầu tiên "<b:include data='blog' name='all-head-content'/>" theo mình thì bạn nên tham khảo qua bài viết trước đây của mình "Tạo và sử dụng thẻ includable trong Blogger" để hiểu includable và include là gì trước. Đây là lời gọi "hàm" giúp lấy ra toàn bộ thông tin mặc định mà Blogger cung cấp cho chúng, những mặc định Blogger đã giấu hàm imcludable đi nên bạn không có quyền thay tác động vào nó. Nhưng bạn vẫn có thể tự viết lại nó.

Tiếp theo 2 loại thẻ "b:skin" và "b:template-skin" là phần căn chỉnh css cho Blogger XML, nó sẽ tự động được chuyển qua thẻ "style" khi xuất hiện với người dùng. Thế tại sao không dùng thẻ "style" luôn, 2 thẻ này thêm vào chi vậy? Đây chính là cái đặc biệt bên trong 2 thẻ này, bạn có thể tạo ra một giải giá trị để áp dụng cho thẻ css, nhưng giá trị này có thể được người dùng sử dụng trong phần thiết lập nâng cáo mà mình đã nói ở gần đầu bài.

Thiết lập nâng cao

Tới "section" và "widget" mình đã có dịp giải thích về 2 đối tượng này ở bài "Hướng dẫn thiết kế template Blogger đơn giản" bạn hãy tham khảo qua để nắm cơ bản, mình sẽ giải thích chi tiết hơn từng widget ở các phần tiếp theo, nó nằm ở khoảng giữa bài viết nhé.

Kết lại

Tạm dừng tại đây nhé, đây là phần đầu tiên trong serial bài viết hướng dẫn thiết kế Blogger Template của mình, mình đã giới thiệu cơ bản cho các bạn biết về ngôn ngữ lập trình của Blogger là Blogger XML và cấu trúc cơ bản của nó. Trong phần sau ta sẽ tiếp tục tìm hiểu chi tiết hơn về những cái mà mình đã giải thích một cách tóm gọn ở trên, mời các bạn đón xem.

P/S: Các bạn có thể tham khảo trước các bài về Blogger XML của mình, đặc biệt là bài về data nhé, nếu các bạn hiểu thì mình tin chã cần tới những bài viết tiếp theo của mình nữa đâu :D

Xem tiếp phần 2: Tìm hiểu thẻ b:skin

11 bình luận

  1. avatar says

    lúc 22:48 8 tháng 9, 2014

    Cuối cùng bạn cũng đã làm thỏa lòng mong ước của bọn tớ. Đặt gạch ngồi ngóng các phần tiếp theo! lol

  2. avatar says

    lúc 09:40 9 tháng 9, 2014

    Hì, em đang có gắng lập dàn ý để viết đầy đủ và viết tốt nhất đây :D

  3. avatar says

    lúc 21:26 9 tháng 9, 2014

    Vậy à. Mình thích cách làm tut giống kiểu của bác Demon Warlock bên izwebz.com, từ khâu chuẩn bị cho đến kết thúc. Kiều như đưa ra cái sản phẩm cuối cùng, rồi từng bài làm từng phần, tới đâu giải thích tới đó. Cách đó theo mình rất kích thích người theo dõi vì hình dung ra được sản phẩm cuối cùng mà mình đạt được. Nhưng mặt khác, cách này thì bản thân tác giả phải vất vả nhiều, và đầu tư chất xám và thời gian không phải là ít. Tuy nhiên theo cá nhân mình nghĩ, đó mới là điều làm nên sự khác biệt của một blogger! Have a nice day!

  4. avatar says

    lúc 22:25 10 tháng 9, 2014

    Bác ấy thì pro quá rồi ^^. Em thì em tính giới thiệu cơ bản, sau đó bài cuối cùng hướng dẩn làm sản phẩm sau cơ :)

  5. avatar says

    lúc 22:58 7 tháng 3, 2015

    có anh nào rảnh không dạy e với !

  6. avatar says

    lúc 22:59 7 tháng 3, 2015

    có anh nào rảnh không dạy e với !

  7. avatar says

    lúc 15:51 28 tháng 4, 2015

    http://chuyennangmuislinehcm.blogspot.com mới vừa làm

  8. avatar says

    lúc 15:23 8 tháng 12, 2015

    Mình mới tập tành viết blogger, mình loanh quanh mãi với cái Template.
    Bạn có thể chỉnh sửa giúp mình được ko?
    bạn xem và trợ giúp mình với
    tienichvietnam.blogspot.com

  9. avatar says

    lúc 18:09 27 tháng 1, 2016

    Mới biết blogger thì việc chỉnh sửa code trong đó đúng là cực hình, mình phải mất vài tuần mới vừa mò vừa chỉnh blog của mình được.

  10. avatar Nam Thành says

    lúc 09:26 3 tháng 6, 2017

    Cho mình hỏi về 2 loại thẻ "b:skin" và "b:template-skin" này , nó giống và khác nhau chỗ nào ! Cách sử dụng và 1 số ví dụ đi ạ ! , trên bài chỉ nói là phần chỉnh css của blog thôi .

  11. avatar says

    lúc 10:33 7 tháng 10, 2017

    b:skin là chỉnh giao diện của blog, còn b:template-skin là chỉnh giao diện trong phần bố cục (layout) ở phần quản trị blog đó bạn

Mọi nhận xét trên blog KslZone.NET sẽ được kiểm duyệt trước khi được xuất bản trên blog. Lưu ý: Nếu bạn để lại backlink về website của bạn, miễn là kèm theo nhận xét hợp lý thì nhận xét đó vẫn sẽ được chấp nhận. Nếu bạn muốn hiện mã HTML thì bạn cần chuyển đổi trước bằng công cụ phía dưới.