hướng dẫn cách tạo template cho blogger (blogspot)

Có rất, rất nhiều template miễn phí đẹp dành cho blogspot, tuy nhiên mỗi người mỗi suy nghĩ và mỗi cách nhìn khác nhau nên có thể đôi khi bạn muốn có một template hoàn toàn theo ý của mình.

Bạn có thể tự thiết kế cho mình một template mà không cần phải lục tung google để tìm ra cái template ưng ý nhất. Dĩ nhiên để làm được điều đó bạn cần phải có một chút ít kiến thức cơ bản về HTML, CSS và Javascript.

Lợi ích của việc làm cho mình một template là bạn có cái template của mình và theo ý mình, bên cạnh đó bạn sẽ tự nâng trình của mình về html, css và javascript mỗi ngày.


Để viết template cho blogspot thì bạn phải sử dụng một cái khung cơ bản để mọi thứ có thể hoạt động. 
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html lang='en-US' 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' xmlns:og='http://ogp.me/ns#'>
<head>

</head>
<body>

</body>
</html>
Dòng đầu tiên của template được khai báo như một xml để có thể giúp trình duyệt hiểu và xử lý code một cách chính xác.

Ở dòng<!DOCTYPE html> cho biết là sẽ sử dụng HTML5 trong xml và giúp trình duyệt xử lý template hiệu quả hơn.

Tiếp theo là phần  khung  để viết code cho template bắt đầu từ <html> và kết thức là </html>. Trong html người ta phân nó ra làm 2 phần chính: head, body.

Để xử lý các vấn đề về SEO, CSS, khai báo web,.... thì chúng ta cần sử dụng đến thẻ <head></head>
<head>
    <b:include data='blog' name='all-head-content' />
    <title><data:blog.pageTitle/></title>
    <meta content='width=device-width, initial-scale=1' name='viewport' />
    <b:skin>
      <![CDATA[ 
      /* Viết css cho template tại đây... */
      ]]>
    </b:skin>
</head>
Bạn có thể tìm hiểu về kỹ thuật SEO để áp dụng code cho phần này.

Trong phần này thẻ <meta content='width=device-width, initial-scale=1' name='viewport' /> là giúp cho trình duyệt hiểu về việc phóng to thu nhỏ cửa sổ web của bạn. Nếu bạn có ý định sử dụng giao diện responsive cho web của mình thì nhất định phải sử dụng dòng này.

Phần body là phần chứa tất cả những gì để tao nên một hình dáng cho website.  trong phần này bạn chia nó ra 3 phần cơ bản: đầu, thân và chân.

Ở phần đầu <header> thường dùng để thể hiện logo, tiêu đề trang web hay diễn giải trang web, nếu thích bạn cũng có thê bỏ menu vào phần này.
<header>
  <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
    <b:widget id='Header1' locked='true' title='' type='Header'></b:widget>
  </b:section>
</header>
Để widget có thể hoạt động thì bạn phải cho nó vào trong <b:section></b:section>. 

maxwidgets='1' là chỉ cho phép tối đa một widget trong section mà thôi.

showaddelement='no' là hiển thị hay không hiển thị chức năng thêm một widget mới. "no" là không cho phép, "yes" là có cho phép.

locked='true' là có cho bật chức năng xóa widget trong layout hay không. "true' là đồng ý, "false" là không đồng ý.

Để hiển thị bài viết đã đăng thì bạn cần đến phần rất quan trọng là blog posts section. Đây có thể được xem là phần body của web để tạo được phần này thì sử dụng đoạn code bên dưới.
<b:section class='main' id='main' showaddelement='yes'>
  <b:widget id='Blog1' locked='true' title='Blog Posts Section' type='Blog' />
</b:section>
Sau khi bạn thêm đoạn cod này vào và bấm lưu thì hệ thống sẽ tự động thêm rất nhiều thông tin bổ sung để có đầy đủ những gì cần thiết cho việc hiển thị bài đăng.

Nếu bạn muốn tạo một sidebar cho web của bạn thì bạn thêm đoạn code bên dưới vào.
<aside>
  <b:section class='sidebar' id='sidebar' maxwidgets='' showaddelement='yes'>
  </b:section>
</aside>
Đã có phần đầu và phần thân thì dĩ nhiên cần phải có phần thân để cho ra một trang web trọn vẹn. Phần chân này thường làm nơi để bạn báo cho thế giới biết về template này là do bạn tạo và thuộc sở hữu của ai.
<footer>
  <div>
    Copyright © 2019 <strong><data:blog.title/></strong>
  </div>
</footer>
Như vậy là đã có một khung cơ bản nhất cho một template mà bạn muốn tự thiết kế.
<?xml version="1.0" encoding="UTF-8" ?>
    <!DOCTYPE html>
    <html lang='en-US' 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' xmlns:og='http://ogp.me/ns#'>
    <head>
        <b:include data='blog' name='all-head-content' />
        <title>
            <data:blog.pageTitle/>
        </title>
        <meta content='width=device-width, initial-scale=1' name='viewport' />
        <b:skin>
            <![CDATA[  
            /* Custom CSS code goes here... */
            ]]>
        </b:skin>
    </head>
    <body>
        <div id="blog-wrapper">
            <header>
                <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
                    <b:widget id='Header1' locked='true' title='' type='Header'></b:widget>
                </b:section>
            </header>
            <div id="content-wrapper">
                <div class="content-table">
                    <div class="content-row">
                        <b:section class='main column' id='main' showaddelement='yes'>
                            <b:widget id='Blog1' locked='true' title='Blog Posts Section' type='Blog' />
                        </b:section>
                        <aside class="column">
                            <b:section class='sidebar' id='sidebar' maxwidgets='' showaddelement='yes'>
                            </b:section>
                        </aside>
                    <div>
                </div>
            </div>
            <footer>
                <div>
                    Copyright © 2019 <strong><data:blog.title/></strong>
                </div>
            </footer>
         </div>
    </body>
    </html>

Để trang web mình đẹp thì phần quan trọng nhất (theo tui) là phần css vì vậy hãy xây dụng css cho riêng bạn để có một template có một không hai.
<b:skin>
  <![CDATA[ 
  /* 
    1. CSS Reset
    2. Core Layout Structure
    3. Template Design
    4. Utility Classes
    5. Media Queries
  */

/* Template's Core Layout */
 #blog-wrapper {
     width: 1024px;
     margin: 0 auto;
}
 #content-wrapper {
     width: 100%;
     height: 100%;
     overflow: hidden;
}
 .content-table {
     display: table;
     border-collapse: separate;
}
 .content-row {
     display: table-row;
}
 #main {
     padding: 25px 25px 25px 20px;
     width: auto;
     height: 100%;
     display: table-cell;
}
 aside {
     width: 32%;
     height: 100%;
     border-left: 1px solid #ddd;
     padding: 25px;
     display: table-cell;
}
 footer {
     width: 100%;
     clear: both;
     border-top: 1px solid #ddd;
     padding: 20px;
}
  ]]>
</b:skin>

Đăng nhận xét

0 Nhận xét