Hướng dẫn thiết kế template Blogger đơn giản

Hiện tại có rất nhiều bạn muốn tự tay mình thiết kế ra một giao diện Blogger mới vì nhiều lý do khác nhau, nhưng đa phần tìm hiểu thì tại liệu lại quá ít. Chính vì thế hôm nay mình xin cố gắng hướng dẫn một cách đơn giản nhất hết mức có thể để giúp bạn tự tay thiết kế được giao diện Blogger riêng của bạn. Do muốn nó thực sử đơn giản nên mình sẽ lược bỏ khá nhiều trong cấu trúc thực sự của nó.

Hướng dẫn thiết kế template Blogger cơ bản
Cấu trúc template HTML


Tham khảo qua serial bài viết mới hơn tại đây "Hướng dẫn thiết kế Blogger Template từ A-Z"

Hướng dẫn thiết kế template Blogger cơ bản nhất

Chuẩn bị
Để tự thiết kế một giao diện Blogger mới bạn cần phải nắm được những kiến thức cơ bản sau
  • HTML (Bắt buộc)
  • CSS (Bắt buộc)
  • Thẻ lập trình của Blogger (Muốn tùy biến thì phải nắm được những cái này)
  • Javascript, jQuery,... (Muốn đẹp và nhiều chức năng hơn thì phải học cái này)
Bắt đầu
Blogger là một trong những nền tảng dễ tùy chỉnh và thiết kế nhất trong các nền tảng về blog, đơn giản nó chỉ sử dụng html và css do đó, cấu trúc giao diện của nó hoàn toàn giống với việc bạn tạo ra một website bằng HTML, đây là template viết sẵn với cấu trúc đơn giản nhất như hình ở đầu bài mình sẽ giải thích từng phần ở dưới.
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html 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'>
<head>
<b:include data='blog' name='all-head-content'/>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<title><data:blog.title/></title>
</b:if>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<title><data:blog.pageTitle/></title>
<meta content='Mô tả về blog của bạn' name='description'/>
<meta content='Các từ khóa trên blog của bạn' name='keywords'/>
<b:else/>
<title><data:blog.pageName/> - <data:blog.title/></title>
<meta expr:content='data:blog.pageName + &quot; - Mô tả về blog của bạn&quot;' name='description'/>
<meta expr:content='data:blog.pageName + &quot;, Các từ khóa trên blog của bạn&quot;' name='keywords'/>
</b:if>
<b:skin><![CDATA[
body{
background: #cccccc;
font: 16px georgia;
}
#box{
Background:#3399bb;
Width: 990px;
Margin:0 auto;
}
#header{
Background:#4499bb;
thuộc tính 1;
thuộc tính 2;
...; 
} 
#main-outer{
Background:#113366;
} 
#footer{
Background:#6600ee; 
}
#sidebar1{
Background:#884400;
width:200px;
float:left;
} 
#main{
Background:#646853;
width:590px;
float:left;
} 
#sidebar2{
Background:#518643;
width:200px;
float:right;
}
#navbar-iframe {height:0px;visibility:hidden;display:none}
h2 {padding:0; margin:0}
]]></b:skin>
</head>
<body>
<b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='no'>
<b:widget id='Navbar1' locked='true' title='Thanh điều hướng' type='Navbar'/>
</b:section>
<div id='box'>
 Nội Dung Blog
 <div id='header'>
  Nội Dung header
  <b:section class='head' id='head' maxwidgets='1' showaddelement='no'>
   <b:widget id='Header1' locked='true' title='(Tiêu đề)' type='Header'/>
  </b:section>
 </div>
 <div id='main-outer'>
  <div id='sidebar1'>
         Nội Dung sidebar1
   <b:section class='sbar1' id='sbar1' showaddelement='yes'/>
  </div>
  <div id='main'>
   Nội Dung Bài Viết
   <b:section class='mainpost' id='mainpost' showaddelement='no'>
    <b:widget id='Blog1' locked='true' title='Bài đăng trên Blog' type='Blog'/>
   </b:section>
  </div>
  <div id='sidebar2'>
   Nội Dung sidebar2
   <b:section class='sbar2' id='sbar2' showaddelement='yes'/>
  </div>
 <div style='clear:both'/>
 </div>
 <div id='footer'>
  Nội Dung Footer
 </div>
</div>
</body>
</html>
Các bạn có thể tạo một file .xml với nội dung trên, và tải lên blog của mình bạn sẽ thấy nó hoạt động được rồi.

Đầu tiên phần trong các thẻ xml và thẻ html là bắt buộc như thế nên bạn không cần phải quan tâm.

Phần thẻ <head> gồm có
<b:include data='blog' name='all-head-content'/>
Sử dụng hàm include được tạo sẵn trong Blogger nó ẩn và không thể chỉnh sửa được, có thẻ bạn cần đọc qua các thẻ include của mình.
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<title><data:blog.title/></title>
</b:if>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<title><data:blog.pageTitle/></title>
<meta content='Mô tả về blog của bạn' name='description'/>
<meta content='Các từ khóa trên blog của bạn' name='keywords'/>
<b:else/>
<title><data:blog.pageName/> - <data:blog.title/></title>
<meta expr:content='data:blog.pageName + &quot; - Mô tả về blog của bạn&quot;' name='description'/>
<meta expr:content='data:blog.pageName + &quot;, Các từ khóa trên blog của bạn&quot;' name='keywords'/>
</b:if>
Bạn hãy tham khảo qua các bài viết về thẻ lập trình của mình về thẻ điều kiện và thẻ data thì bạn sẽ hiểu, nếu không bạn cứ để như vậy la được rồi
<b:skin><![CDATA[
body{
background: #cccccc;
font: 16px georgia;
}
#box{
Background:#3399bb;
Width: 990px;
Margin:0 auto;
}
#header{
Background:#4499bb;
thuộc tính 1;
thuộc tính 2;
...;
}
#main-outer{
Background:#113366;
}
#footer{
Background:#6600ee;
}
#sidebar1{
Background:#884400;
width:200px;
float:left;
}
#main{
Background:#646853;
width:590px;
float:left;
}
#sidebar2{
Background:#518643;
width:200px;
float:right;
}
#navbar-iframe {height:0px;visibility:hidden;display:none}
h2 {padding:0; margin:0}
]]></b:skin>
Thẻ b:skin là thẻ chứa css tùy chỉnh cho trang của bạn, nó sẽ tự chuyển sang thẻ style khi người dùng xem trên website. (Bạn vẫn có thể sử dụng thẻ style trong code bình thường không sao cả)

Cái cuối cùng bạn cần biết để hiểu về Blogger là đây sectionwidget, các ví dụ dưới đây sẽ khác với code trên template ở đầu
<b:section id='header' class='header' maxwidgets="1" showaddelement="no"> 
</b:section>
Thẻ section là nơi để chứa các widget của blog chúng ta, khi bạn vào phần bố cục, tất cả những vị trí của mọi thành phần đều nằm trong section này.

Hướng dẫn thiết kế template Blogger cơ bản

Trong thẻ section gồm có những thuộc tính sau:
  • id - (Bắt buộc) Tên này không được trùng với tên khác, chỉ gồm chữ và số.
  • class - (Tùy chọn) Người ta thường đặt là 'navbar,' 'header,' 'main,' 'sidebar,' hoặc 'footer.' Nhưng bạn có thể đặt bất kì cái gì mà bạn muốn.
  • maxwidgets - (Tùy chọn) Số lượng tối ra widget section này có thể chứa.
  • showaddelement - (Tùy chọn) Có 2 lựa chọn là 'yes' và 'no,' nếu không đặt 'yes' sẽ là mặc định. Cái nay quyết định section đó có cho phép "Thêm Tiện ích" vào hay không.
  • growth - (Tùy chọn) Có 2 tùy chọn 'horizontal' và 'vertical,' nếu không đặt 'vertical' sẽ là mặc định. Cái này quyết định cho section đó ở sắp xếp widget như thế nào.
Thẻ widget là những tiện ích bạn thêm vào bố cục của trang web
<b:widget id="header" type='HeaderView' locked="yes"/>
<b:widget id="myList" type='ListView' locked="no" title="My Favorite Things"/>
<b:widget id=”BlogArchive1” locked=”false” mobile=”yes” title=”Blog Archive” type=”BlogArchive”/>
Thẻ này gồm có các thuộc tính sau:
  • id - (Bắt buộc) Cũng giống như của section, nó phải là tên duy nhất, chỉ bao gồm chữ và số.
  • type - (Bắt buộc) Thuộc tính này chỉ ra loại của widget đó, và nó chỉ có thể sử dụng các loại trong danh sách mình liệt kê phía dưới.
  • locked - (Tùy chọn) Có thể đặt là 'yes' hoặc 'no,' với 'no' là mặc định nếu bạn không đặt. Nếu widget bạn đặt locked='yes' thì widget đó không thể di chuyển trong section cũng như giữa các section với nhau.
  • title - (Tùy chọn) Tiêu đề cho widget. Nếu như bạn không đặt, mặc định nó sẽ là 'List1' (nên đặt).
  • pageType - (Tùy chọn) Có thể là 'all,' 'archive,' 'main,' hoặc 'item,' với 'all' là mặc định nếu bạn không đặt. Thuộc tính này giúp widget chỉ hiện thị trên các trang được chỉ định, bạn nên xem bài viết về thẻ điều kiện trên website của mình để biết các kiểu trang ở trên.
  • mobile - (Tùy chọn) Có thể chọn 'yes', 'no,' hoặc ‘only’ với 'default' được chọn là mặc định. Cái này quyết định widget này có hiện trên điện thoại hay không. Chỉ có các widget Header, Blog, Profile, PageList, AdSense, Attribution sẽ hiện trên điện khoại khi nhận được giá trị 'default.'
Danh sách các loại widget có thể sử dụng:
  • BlogArchive
  • Blog
  • Feed
  • Header
  • HTML
  • SingleImage
  • LinkList
  • List
  • Logo
  • BlogProfile
  • Navbar
  • VideoBar
  • NewsBar
Những thẻ section và widget sẽ được chuyển đổi thành thẻ <div> khi người dùng xem blog các bạn có thể tùy chỉnh bằng css bằng class hoặc id mà bạn đã đặt như sử dụng html bình thường.

Section trong code về template ở đầu trang mình nghĩ chắc không cần phải nói nữa, đây là cái quan trọng cần phải có
<b:widget id='Blog1' locked='true' title='Bài đăng trên Blog' type='Blog'/>
widget này thuộc tính thì chắc mình khỏi phải nói, còn công dụng của nó là lấy toàn bộ nội dung trong blog của bạn ra trang chủ.

Tiếp tục nếu bạn lưu lại giao diện với đoạn code trên trang web của bạn đã sử dụng được, bạn hãy refresh lại trang và vào lại Bố cục>>Chỉnh sửa HTML bạn sẽ thấy những thẻ widget sẽ bung ra rất nhiều đoạn mã riêng của nó, nếu các bạn muốn tùy chỉnh nó các bạn phải đọc về "Thẻ lập trình Blogger".

Lưu ý là một template tối thiểu phải có một thẻ section bên trong nó. Mình nghĩ nhiêu đây là đủ để các thiết kế lại một giao diện riêng cho bạn để thiết kế một template đơn giản, kèm thêm những thủ thuật Blogger mình đã chia sẻ trên blog bạn toàn có thể có một website tương đối theo sở thích của mình. Bài viết có hơi lủng củng, khó hiểu, do đó nếu không hiểu về bất kì thứ gì trong bài viết này, cứ thoải mái để lại nhận xét bên dưới cho mình nhé.

34 bình luận

  1. avatar says

    00:40 Ngày 14 tháng 03 năm 2015

    Mình hỏi một chút: nếu như không muốn có hai thanh sidebar thì làm như thế nào? mình xóa hai đoạn code html đi thì chẳng thấy phần main đâu nữa?

  2. avatar says

    08:13 Ngày 14 tháng 03 năm 2015

    Bạn xóa phần thẻ div sidebar1 đi chỉnh lại css là được mà sao nó lại không hiện nhỉ @_@

  3. avatar says

    22:27 Ngày 14 tháng 03 năm 2015

    Mình đã xóa cả 2 đoạn sidebar1 và 2 html và cả hai đoạn css. nhưng lúc xem kq thì lại không thấy phần main post đâu nữa tức là không hiện bài đăng nào nữa. Bạn giúp m với

  4. avatar says

    22:46 Ngày 14 tháng 03 năm 2015

    à. thì ra bạn chỉ để yes showaddelement ở sidebar nên không xóa được cả hai cái. thích làm blog nên để m tìm hiểu thêm rồi hỏi tiếp. @.@

  5. avatar says

    23:10 Ngày 14 tháng 03 năm 2015

    À sr đọc không kĩ, cứ tưởng bác muốn 1 sidebar với 1 bài viết. Tối thiểu Blogger Template phải có một section cho phép thêm widget thì widget Blog nó mới chạy được. :D Cái này mình có nói ở cái serial mới. Mà bác tự mần ra được rồi thì thôi :D

  6. avatar says

    17:45 Ngày 15 tháng 03 năm 2015

    đang tìm hiểu chuỗi bài của bác đây. viết được nhỉ? thỏa mãn phết :)

  7. avatar says

    18:07 Ngày 15 tháng 03 năm 2015

    như mình thấy chỉ cần một section không để "no showaddelemen" là được chứ không cần phải có ít nhất một cái để yes. không biết phải không? nhưng mình xóa cái "no showaddelemen" trong section của main post đi thì thấy nó hiển thị lại.

  8. avatar says

    18:12 Ngày 15 tháng 03 năm 2015

    Mặc định không có giá trị là nó tự hiểu yes mà :D

  9. avatar says

    18:13 Ngày 15 tháng 03 năm 2015

    Cám ơn bác thấy không mấy ai quan tâm cái này :D

  10. avatar says

    11:41 Ngày 17 tháng 03 năm 2015

    lại gặp một vấn đề nữa Lâm Kiều, http://hocphanmem.blogspot.com/ mình định chia trang chủ ra thành các phần hiển thị theo nhãn khác nhau. mình đã tách ra làm hai khối rồi chèn đoạn code của 'main' vào mỗi khối. bh làm sao để khi xem một bài đăng nó không hiện lên ở cả hai phần như thế này http://hocphanmem.blogspot.com/2014/11/huong-dan-tu-hoc-tu-autocad-2014.html?
    @@ phiền gì không?

  11. avatar says

    13:11 Ngày 17 tháng 03 năm 2015

    Tại cái includable post của từng cái widget trong cái section main1 của bác chèn vào bất cứ đâu
    <b:if cond='data:blog.pageType == "item"'>
    <style type='text/css'>
    #main1{display:none}
    </style>
    </b:if>
    và ngược lại với main2 và nhớ đổi tên css.

    Cách này sử dụng mẹo nhỏ trong CSS ẩn nhau đi thôi, còn nếu muốn xóa hẳn thì có thể sử dụng Javascript với cách thức tương tự.

  12. avatar says

    12:02 Ngày 18 tháng 03 năm 2015

    yep. hỏi tiếp: nếu bh mình muốn hiển thị bài đăng ở trang chủ theo dạng Grid thì sẽ phải chỉnh sửa css phần post includable phải không? chỉ giúp m

  13. avatar says

    13:16 Ngày 18 tháng 03 năm 2015

    Chính xác rồi gần như là trong đó cả, còn HTML và CSS thì cơ bản phải nắm không bàn tới rồi.

  14. avatar says

    22:24 Ngày 18 tháng 03 năm 2015

    Lại có vụ mới: bh mình muốn hiển thị bài đăng tương tự như google images, bài đăng hiển thị xuống bên dưới hình ảnh khi click thì phải tác động đến những phần tử nào, nằm ở vị trí nào? cần những kiến thức gì? hiện tại mình chỉ mới vọc vạch html và css thôi, nếu không khả thi thì mình tính nước khác...@@

  15. avatar says

    22:29 Ngày 18 tháng 03 năm 2015

    Để làm cái đó thì tương đối phức tạp đấy :D Mình chưa thấy Blogger nào làm thế cả, cái đó có thể làm được gần như trọn bộ HTML, CSS, jQuery và nhiều khi để nhẹ bớt cần cả AJAX nữa. Nó khá là phức tạp nên mình chắc là không có thời gian để hướng dẫn, mà nhiều khi mình cũng chã làm được nữa ^_^

  16. avatar says

    22:38 Ngày 18 tháng 03 năm 2015

    Nghe là ngán quá. cứ tạm thời sửa mấy cái dễ đã. đợi học thêm rồi tính @@. M sẽ hỏi nhờ b mấy cái cơ bản thôi còn chi tiết m sẽ đi mày mò. @.@ cứ khó thì để sau tính

  17. avatar says

    05:15 Ngày 23 tháng 03 năm 2015

    @Lâm Kiều, không biết tại sao hai cặp thẻ div(pad-top và pad-bottom) cùng đặt chung trong một khối div với thẻ section mainpost một thẻ div pad-top ở trên(màu xanh) thì hiện ra trong khối div main trong khi thẻ div pad-bottom đặt bên dưới(màu đỏ) thẻ section mainpost thì lại không được chứa trong div main? http://hocphanmem.blogspot.com/
    Khó hiểu..

  18. avatar says

    09:33 Ngày 23 tháng 03 năm 2015

    Thực sự là đọc với lại xem demo chã hiểu bác nói về gì luôn :D Trừu tượng quá @_@

  19. avatar says

    19:40 Ngày 23 tháng 03 năm 2015

    Là thế này
    Code:
    (
    (màu xanh)

    ( màu đỏ)
    )
    Nhưng pad-bottom không hiện trong main-outer? Để dáu chấm vào di.v

  20. avatar says

    19:41 Ngày 23 tháng 03 năm 2015

    Sao ko hiển thị code trong cmt dc nhỉ

  21. avatar says

    13:07 Ngày 24 tháng 03 năm 2015

    Bác vào đây http://www.kslzone.net/p/function-esctool-return-document.html copy code vào và lấy đoạn code được mã hóa dán vào comment mới hiện được =.=

  22. avatar says

    14:55 Ngày 24 tháng 03 năm 2015

    Thế thì bạn tạo một thẻ div con chứa section và pad-bottom nằm trong thẻ div main là được, pad-bottom sẽ hiển thị bên ngoài thẻ div con nhưng nằm trong div main

  23. avatar says

    14:58 Ngày 24 tháng 03 năm 2015

    cho mình hỏi là cài đặt cho ảnh trong bài đăng thì cần xử lí phần nào, ví dụ như muốn nếu là ảnh sẽ được resize với kích thước width 100% div post ấy?

  24. avatar says

    20:12 Ngày 24 tháng 03 năm 2015

    Nếu bạn muốn bằng 100% thẻ div của bài post thì dùng CSS đơn giản thế này thôi
    .post-body img { width:100% }
    thông thường thì cái class của thẻ div phần post là nó post-body không biết đúng ý bạn không hay mình hiểu nhầm câu hỏi :D

  25. avatar says

    21:37 Ngày 21 tháng 05 năm 2015

    Bạn ơi cho minh hỏi khi cuộn trang bằng thẻ a href=#div làm sao để điều chỉnh được thời gian dịch chuyển đến div đích. Ví dụ trang http://hoathuydiem.blogspot.com của mình khi click vào phần mở rộng widget ấy mình muốn chuyển đến đầu của widget ấy

  26. avatar says

    21:14 Ngày 22 tháng 05 năm 2015

    Bạn đơn giản dùng script ở bài viết này là xong nha http://www.kslzone.net/2014/02/hieu-ung-truot-en-noi-uoc-chi-inh-cho.html

  27. avatar says

    01:02 Ngày 07 tháng 08 năm 2015

    bạn ơi, có cách nào chỉnh sửa blogspot giống ntnày không bạn? Link mẫu: http://lmmanga.tk/index.html

  28. avatar says

    17:44 Ngày 08 tháng 08 năm 2015

    Giống là giống về giao diện hay công năng bạn :D. Giao diện thì giống cái nào cũng được, còn công năng thì còn tùy thuộc. Như cái link trên là cũng tương đối không được nhiều thứ.

  29. avatar says

    20:46 Ngày 14 tháng 04 năm 2016

    +Lâm KIều ơi, mình tạo các widget hiển thị cho các nhãn riêng trên trang chủ. mình muốn đóng mở các widget này(nếu có thể khi click mở một widget thì widget khác đang mở sẽ tự động đóng ấy thì càng tốt) mình nên code bằng ngôn ngữ gì được? có cách nào để khi click mở ra nó mới bắt đầu tải widget về không? cho đỡ nặng trang chủ ấy? :)) bạn có tut nào không?

  30. avatar says

    20:47 Ngày 14 tháng 04 năm 2016

    nếu có tut tương tự thì sent m tự ngâm cứu cũng dc, khì khì

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.