Thủ thuật Blogger, làm SEO, MMO và tin học!
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ó.
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.
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.
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é.
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
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>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.
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
Bài đăng
22:48 Ngày 08 tháng 09 năm 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
09:40 Ngày 09 tháng 09 năm 2014
Hì, em đang có gắng lập dàn ý để viết đầy đủ và viết tốt nhất đây :D
21:26 Ngày 09 tháng 09 năm 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!
22:25 Ngày 10 tháng 09 năm 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ơ :)
22:58 Ngày 07 tháng 03 năm 2015
có anh nào rảnh không dạy e với !
22:59 Ngày 07 tháng 03 năm 2015
có anh nào rảnh không dạy e với !
15:51 Ngày 28 tháng 04 năm 2015
http://chuyennangmuislinehcm.blogspot.com mới vừa làm
15:23 Ngày 08 tháng 12 năm 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