Hướng dẫn cài đặt theme Flatsome trong Blogger - Bài 1: Làm quen với bố cục giao diện

Hướng dẫn cài đặt theme Flatsome trong Blogger - Một số cài đặt cơ bản khi tạo mới Blog và thay lại bố cục giao diện trong chỉnh sửa HTML của theme.

Bắt đầu bằng chuỗi bài viết cài đặt theme Flatsome trong Blogger, mình đi vào hướng dẫn cụ thể theo từng bài luôn chứ không giới thiệu nhiều về theme. Trong bài 1 mình sẽ hướng dẫn các bạn bước đầu làm quen với bố cục giao diện của theme cũng như cài đặt cơ bản trong Blogger. Cho nên bạn nào nếu bạn nào muốn tự học thiết kế blogspot chịu khó chú ý từ bài này nhé.

Hướng dẫn cài đặt theme Flatsome trong Blogger - Bài 1: Làm quen với bố cục giao diện

Lưu ý: Nếu đang sử dụng Blogger, các bạn hãy quay trở về giao diện cổ điển nhé, sau đó tạo Blog mới vào up theme blogspot Flatsome lên. Để hiệu quả hơn tốt nhất bạn nên tạo Blog mới sau đó vào chỉnh sửa HTML của Chủ đề copy paste source xml template đã tải về để làm mất hết các widget của theme mặc định khi bạn tạo mới nhé.

Đề xuất cho bạn: Yêu cầu tối thiểu của mẫu chủ đề xml trong blogspot

Sau khi đã up theme mới, các bạn quay ra phần Cài đặt để cấu hình một số mục quan trọng

Cài đặt

  Bài đăng, nhận xét và chia sẻ: chọn hiển thị 12 bài đăng trên trang chính, trong tùy chọn Hiển thị hình ảnh với hiệu ứng Hộp đèn chọn Không

  Ngôn ngữ và định dạng: chọn Ngôn ngữ Tiếng Việt, định dạng múi giờ (GMT+7:00) Jakarta, với tùy chọn Định dạng dấu thời gian các bạn chọn hiển thị giớ và phút thôi cho đơn giản.

  Tùy chọn tìm kiếm: Bật mô tả tìm kiếm thêm vài dòng mô tả ngắn về Blog của bạn sau đó chọn Lưu thay đổi. Tiếp theo trong mục Bật nội dung robots.txt tùy chỉnh? chọn Có và thêm các dòng sau:

User-agent: *
Disallow:
Sitemap: https://domain-blog.blogspot.com/sitemap.xml

Chọn Lưu thay đổi. Các bạn cũng làm tương tự với tùy chọn Bật thẻ tiêu đề robot tùy chỉnh? chỉ chọn Có thôi xong bấm Lưu thay đổi để bạn có tùy chọn trong Cài đặt bài đăng nhé.

  Khác: Trong tùy chọn Bật liên kết tiêu đề và liên kết đính kèm? chọn Có để thêm tùy chọn thêm liên kết tiêu đề và liên kết đính kèm trong bài đăng. Ngoài ra trong tùy chọn Cho phép nguồn cấp dữ liệu blog? các bạn chọn Đầy đủ hoặc cho đến dấu ngắt đều được nhưng không được tắt bằng cách chọn Không nhé.

Bài cần nằm: Danh sách tổng hợp các loại thẻ data mặc định trong blogspot

Khi cài đặt xong, các bạn vào chỉnh sửa HTML của theme, các bạn sửa lại mã XML của theme như sau: từ đoạn <body> trở xuống

<body class='lightbox nav-dropdown-has-arrow parallax-mobile'>
  <a class='skip-link screen-reader-text' href='#main'>Skip to content</a>
  <div id='wrapper'>
    <header class='header has-sticky sticky-jump' id='header'>
      <b:section class='header-wrapper' id='header-wrapper' showaddelement='true'/>
    </header>
    <b:if cond='!data:view.isError'>
      <main id='main'>
        <b:section class='content-area' id='content' showaddelement='true'>
          <b:widget id='Blog1' locked='true' title='Bài đăng trên Blog' type='Blog' version='2' visible='true'>...</b:widget>
        </b:section>
        <b:section class='col large-3 hide-for-medium' cond='!data:view.isHomepage and !data:view.isPage' id='product-sidebar' showaddelement='true'/>
      </main>
    </b:if>
    <b:include cond='data:view.isError' name='isError'/>
    <b:section class='footer' id='footer' showaddelement='true' tag='footer'/>
  </div>
  <b:section class='mobile-sidebar no-scrollbar mfp-hide' id='main-menu' showaddelement='true'/>
  <b:include name='isRequest'/><b:include name='script-config'/><b:include name='template-script'/><b:include cond='!data:view.isError' name='analytics'/>&lt;/body&gt;&lt;!--<head/><body/>--&gt;</html>

Lưu ý: Các bạn giữ lại nguyên widget Blog1 là do widget nó dài nhiều thẻ đóng nên mình viết gọn thành như vậy

Khi sửa lại xong bố cục, các bạn thêm css sau trong thẻ <b:includable id='page-skin'> nằm trong thẻ <b:defaultmarkups> bên trên

<b:includable id='page-skin'>
  <b:tag name='style'>/* <![CDATA[ */
html{background-color:#fff}
.section{-ms-flex-flow:column;flex-flow:column;align-items:inherit}
#header-wrapper.section,#content.section,#main-menu.section{padding:0}
/* ]]> */</b:tag>
</b:includable>

Tham khảo thêm: Cách sử dụng thẻ b:tag trong blogspot

Bài tiếp theo mình hướng dẫn các bạn tạo menu trên header, menu của mobile và footer


Thêm đánh giá

Trở thành người đầu tiên bình luận cho bài viết này!