CÁCH TẠO BLOGGER ĐÁP ỨNG TRÊN THIẾT BỊ DI ĐỘNG

Bạn có thể tạo menu điều hướng đáp ứng thanh trên cùng cho chủ đề Blogger như bạn đã thực hiện trên mẫu HTML thô. Sử dụng menu Điều hướng tĩnh trong Blogger là cách tốt nhất để tránh nhiều vấn đề. Mặc dù bạn có thể sử dụng tiện ích 'Trang', 'Danh sách liên kết' để chèn liên kết động vào menu của mình, nhưng sẽ rất khó để trình đơn thả xuống.

Vì vậy, bạn không cần phải tạo dữ liệu động như bạn đã làm và sẽ làm cho bố cục của người khác trên Blogger. Nếu bạn sử dụng Bootstrap Framework, thì bạn có thể sử dụng navebar từ đây Hoặc bạn có thể kiểm tra bài viết hành động về menu phản hồi từ w3schools .

Đặt mã vào chủ đề XML của bạn, nơi bạn muốn hiển thị thanh menu điều hướng. Sau khi tạo menu đáp ứng di động, chỉ cần dán URL nhắm mục tiêu vào thẻ neo. Thí dụ:

<ul>
          <li><a href="">Home</a></li>
          <li><a href="">About</a></li>
          <li><a href="">Contact</a></li>
          </ul>

Nhưng bạn có thể động URL trang chủ thành <li></li>thẻ như<li><a expr:href='data:blog.homepageUrl >Homepage</a></li>
TẠO BLOGGER ĐỘNG
Vì cấu trúc cơ bản của Chủ đề Blogger là:
1. Tiêu đề
2. Blog
3. Thanh bên
4. Chân trang,

chúng ta nên tạo động này để chúng ta không cần mã lại.

1. Tạo tiêu đề động:

Đặt mã sau vào div tiêu đề.

<b:section class='header' id='header' maxwidgets='1' showaddelement='yes'>
          <b:widget id='Header1' locked='true' title='' type='Header'/>
          </b:section>

2. Tạo bài đăng trên blog động:

Đặt đoạn mã sau vào bài div.

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

3. Tạo Sidebar động:

Đặt mã sau vào div sidebar.
<b:section class='sidebar' id='sidebar' preferred='yes' showaddelement='yes'>
          </b:section>

4. Tạo một Footer động:

Đặt mã sau vào div footer.
<b:section class='sidebar' id='sidebar' preferred='yes' showaddelement='yes'>
          </b:section>

SỬ DỤNG DỮ LIỆU MẶC ĐỊNH ĐỘNG TRONG BLOGGER
Blogger cung cấp một số thẻ dữ liệu mặc định mà chúng tôi có thể gọi dữ liệu cụ thể để hiển thị. Ví dụ: Nếu chúng tôi muốn tên tác giả của bài đăng được xuất bản trong mỗi bài đăng, thì chúng tôi có thể sử dụng <data:post.author/>.
Sử dụng này sau các thẻ sau.
<div class='post-footer-line post-footer-line-1'>
Tương tự, có nhiều thẻ dữ liệu Blogger để hiển thị dữ liệu cụ thể trong Blog được xuất bản. Thẻ dữ liệu Blogger này sẽ chỉ hoạt động trong tiện ích Blog.
[sly fa-apple] THẺ DỮ LIỆU BLOGGER

Bảng thẻ Blogger

Tên thẻ	Mô tả
<data:post.dateHeader/>	Ngày của bài viết là tiêu đề.
<data:title/>	Tiêu đề của blog.
<data:description/>	Mô tả của blog.
<data:olderPageTitle/>	Tiêu đề của trang cũ của bài viết.
<data:newerPageTitle/>	Tiêu đề của trang mới hơn của bài viết.
<data:commentLabel/>	Số lượng bình luận.
<data:authorLabel/>	Nó sẽ hiển thị "được đăng bởi".
<data:post.title />	Tiêu đề của bài viết.
<data:post.body/>	Nội dung của bài viết.
<data:post.author/>	Tên tác giả của bài viết.
<data:post.url/>	Liên kết url của bài đăng.
<data:post.timestamp/>	Ngày và thời gian của bài viết.
<data:label.name/>	Nhãn của bài viết.

Bạn có thể nhận thêm Thẻ dữ liệu Blogger từ Hỗ trợ Blogger .

THẺ NEO ĐỘNG TRONG BLOGGER LÀ GÌ?
Dynamic Anchor In Blogger được chuyển đổi thành văn bản neo chung với URL. Ví dụ: Nếu URL của trang chủ là http://www.compromath.comthì thẻ sau sẽ được chuyển đổi <a expr:href='data:blog.homepageUrl >Homepage</a>thành
<a href="http://www.compromath.com">Homepage</a>
Một số thẻ neo động cho Chủ đề Blogger

URL NEO ĐỘNG

Bảng dữ liệu

Biểu thức	Giải thích
<a expr:href='data:blog.homepageUrl >Homepage</a>	Một văn bản có URL của trang chủ
<a expr:href='data:post.url'>Read More</a>	Đọc thêm văn bản với URL của bài
<a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a>	Tên nhãn với URL của nhãn
<a expr:href='data:post.newerLinkUrl'><data:post.newerLinkText/></a>	Văn bản bài đăng mới hơn với URL bài đăng mới hơn
<a expr:href='data:post.olderLinkUrl'><data:post.newerLinkText/></a>	Bài viết cũ hơn với URL bài cũ hơn
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>	Tên tác giả có URL
<a expr:href='data:comment.url' title='comment permalink'><data:comment.timestamp/></a>	Bình luận Văn bản để bình luận với URL

HOẠT ĐỘNG NĂNG ĐỘNG HƠN
Hiển thị / Ẩn, Thiết kế tùy chỉnh, Trang đích tùy thuộc vào loại trang và URL
Nếu chúng tôi muốn ẩn thanh bên trong Trang chủ nhưng muốn hiển thị trong bài đăng, trang chúng tôi đã xuất bản hoặc nếu chúng tôi muốn hiển thị thiết kế cơ thể riêng biệt và mới khi URL của blog là http:www.compromath.com/p/contact.html, sau đó nó có quyền truy cập để làm điều đó với việc sử dụng các thẻ có điều kiện. Sử dụng các thẻ có điều kiện, chúng tôi có thể sử dụng HTML, CSS, JavaScript bổ sung theo ý muốn và điều này làm cho Blogger năng động hơn.

TẠO TRANG ĐÍCH TRONG BLOGGER
Bạn có thể đặt mã trước </head>thẻ hoặc sau <body>thẻ.
<b:if cond='data:blog.pageType == "index"'>
          <style>
          .sidebar{display:none;}
          .post-wrapper{width:100%}
          </style>
          </b:if>
          <b:if cond='data:blog.pageType == "item"'>
          <b:if cond='data:blog.pageType == "static"'>
          <style>
          .sidebar{display:block;}
          </style>
          </b:if>
          </b:if>
Tìm hiểu thêm các thẻ điều kiện năng động cho Blogger. Bằng các thẻ có điều kiện này, bạn có thể nhắm mục tiêu URL cụ thể, Trang, v.v ...

#Tạo Thẻ tiêu đề động
Bây giờ hãy đi để tạo thẻ tiêu đề Blog của bạn. Nó là tổ hợp của Thẻ dữ liệu Blogger và Thẻ có điều kiện.

Thay thế <title></title>thẻ của bạn với các mã sau đây.
<b:if cond='data:blog.pageType == "index"'>
          <title>Blogger, Code and Ubuntu Platform - <data:blog.pageTitle/></title>
          <b:else/>
          <b:if cond='data:blog.pageType != "error_page"'>
          <title><data:blog.pageName/> - <data:blog.title/></title>
          </b:if></b:if>
          <b:if cond='data:blog.pageType == "error_page"'>
          <title>Page Not Found - <data:blog.title/></title>
          </b:if>
Thay thế Blogger, Code và Ubuntu Platform bằng tên tiêu đề bạn muốn cho blog của bạn.

#Custom Design Blogger Blogger với CSS

Chúng tôi đã hoàn thành 80% Phát triển chủ đề Blogger. 20% còn lại là về thiết kế tùy chỉnh với CSS.
Trước khi chỉnh sửa thiết kế, bạn nên tìm hiểu cách chỉnh sửa mẫu Blogger .

Tìm tất cả các lớp & id của div, phần, điều hướng vv là rất khó khăn, nhàm chán, lãng phí thời gian bằng tay. Nhưng tôi sẽ cho bạn biết các thủ thuật để thu thập tất cả các lớp và id với CSS mặc định trong vòng vài giây.

1. Sao chép tất cả mã CSS miễn phí cho Blogger từ liên kết .

2. Dán vào để xác thực hoặc định dạng.

3. Sau khi định dạng, sao chép tất cả CSS và dán vào bất kỳ trình soạn thảo HTML / CSS nào.

4. Sửa đổi lớp CSS và id nếu có định dạng xấu.

5. Dán vào Chủ đề Blogger của bạn trong vòng <b:skin> [[ /******CSS ******/ ]]></b:skin>.
6. Lưu chủ đề của bạn.
7. Tiếp theo tùy chỉnh CSS của bạn với các công cụ kiểm tra từ trình duyệt.

[sly fa fa-lightbulb-o] Mẹo cho Bootstrap: Bạn có thể chèn lớp CSS vào thành phần HTML cụ thể. Giả sử nếu bạn muốn chèn nhãn Bootstrap vào <data:post.author/>, sau đó bọc các phần tử này bằng span và chèn lớp nhãn như bên dưới:
<span class='label label-success'><data:post.author/></span>
Mẹo cho Font-Awesome: Bạn có thể chèn biểu tượng Font Awesome như bên dưới.
<span class='label label-success'><i class='fa fa-user'/><data:post.author/></span>

TÙY CHỈNH CHỦ ĐỀ BLOGGER KHÁC

LÀM CÁCH NÀO ĐỂ SẮP XẾP TÁC GIẢ, NHÃN, NGÀY LÊN VÀ XUỐNG TỪ THÂN BÀI?
1. Trước tiên, hãy truy cập Bảng điều khiển Blogger → Bố cục → Bài đăng trên blog → Chỉnh sửa và bạn sẽ thấy một cửa sổ bật lên.
2. Từ ' Tùy chọn trang bài ' kiểm tra nút bạn muốn hiển thị và bỏ chọn tùy chọn bạn muốn ẩn.
3. Sau khi cuộn xuống, bạn sẽ nhận được ' Sắp xếp các mục '. Kéo mục đã chọn của bạn lên và xuống để đặt.
4. Lưu lại.

Nếu nó không hoạt động thì hãy chuyển mã liên quan từ Blogger Editor bằng tay.

CÁCH THÊM BƯỚC NHẢY TRONG BÀI VIẾT TRÊN BLOGGER
Xem bài viết này về cách thêm nút nhảy break / nút đọc thêm trên Blogger .

CÁCH TÙY CHỈNH TIÊU ĐỀ NGÀY BLOGGER
Thêm CSS sau vào Chủ đề Blogger theo tùy chỉnh của bạn.
.date-header{}

CÁCH HIỂN THỊ / ẨN NHÃN TRÊN BLOGGER
Thêm CSS sau vào Chủ đề Blogger
.post-labels{display:none;visibility:hidden}để ẩn và
.post-labels{display:block;}hiển thị.

CÁCH XÓA NGÀY VÀ GIỜ KHỎI BÀI VIẾT TRÊN BLOGGER
Đặt CSS vào chủ đề Blogger của bạn.
.post-timestamp{display:none;visibility:hidden}

CÁCH THÊM NGÀY GIỜ TRONG BLOGGER
Chuyển đến Bảng điều khiển Blogger → Bố cục → Bài đăng trên blog → Chỉnh sửa → Tùy chọn trang bài s
Kiểm tra tùy chọn ngày bạn muốn hiển thị.

Hoặc

Sử dụng mã sau đây trong chủ đề Blogger của bạn sau<div class='post-footer-line post-footer-line-1'>
<span class='post-timestamp'>
           <b:if cond='data:top.showTimestamp'>
             <data:top.timestampLabel/>
             <b:if cond='data:post.url'>
               <meta expr:content='data:post.url.canonical' itemprop='url'/>
               <a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601' itemprop='datePublished'><data:post.timestamp/></abbr></a>
             </b:if>
           </b:if>
          </span>

CÁCH THAY ĐỔI TÊN TÁC GIẢ TRONG BLOGGER
Tìm kiếm <data:post.author/>từ trình soạn thảo HTML Blogger của bạn và thay thế bằng tên bạn muốn bằng thẻ p. Thí dụ:<p>Elliyas</p>

CÁCH XÓA TÊN TÁC GIẢ KHỎI CÁC BÀI ĐĂNG TRÊN BLOGGER
Đặt CSS vào chủ đề Blogger của bạn.
.post-author vcard {display:none;visibility:hidden}

• Original Label pages: yourblogdomain/search/label/labelname
• Show Posts which are in Both Labels: yourblogdomain/search/label/labelname1+labelname2
• Show Posts which are in One of Labels: yourblogdomain/search/?q=label:labelname1|label:labelname2
• Search pages: yourblogdomain/search?q=searchquery
• Static pages: yourblogdomain/p/url-of-page.html
• Items / Posts: yourblogdomain/yyyy/mm/url-of-post.html
• Archive pages: 
• Archive by year: yourblogdomain/yyyy/
• Archive by month: yourblogdomain/yyyy/mm/

Bảng điều khiển Blogger tùy chỉnh giúp tổ chức và truy cập nhiều giao diện như thêm tiện ích mới, tiện ích chỉnh sửa, thiết lập bài đăng blogger, v.v ... Sau khi chuyển đổi HTML sang Blogger Theme, chúng ta cần tùy chỉnh thiết kế bố cục bảng điều khiển Blogger.
Vì vậy, nhà phát triển Blogger đam mê, hãy bắt đầu tùy chỉnh bảng điều khiển blogger của bạn bằng CSS. Tôi nghĩ bạn biết cách tạo một phần mới cho Mẫu Blogger . Như bạn đã biết, thật dễ dàng để tìm ra id của từng phần.


Bạn phải thêm mã CSS để tùy chỉnh bố cục bảng điều khiển Blogger nơi lưu giữ tất cả mã CSS. Sẽ tốt hơn nếu đặt mã CSS bảng điều khiển của bạn ngay sau khi <![CDATA[

bạn có thể đặt CSS như id nhưng bạn phải thêm body#layout (có khoảng trắng) trước tên id.

Ví dụ: Nếu chúng ta muốn tùy chỉnh phần chính (id name = main), thì chúng ta phải làm như dưới đây.

body#layout #main{/*CSS Code*/}

Đối với mỗi lớp học bạn phải làm điều đó. Bạn cũng có thể định nghĩa nhiều id với cùng thuộc tính CSS. Sau đó, bạn phải làm như thế nào:

body#layout #main, body#layout #sidebar, body#layout #footer{}

Bất cứ điều gì, bạn phải đặt mã sau đây để tránh danh sách được sắp xếp & danh sách không theo thứ tự. Tôi hy vọng, bạn sẽ thành công để tùy chỉnh Bố cục Bảng điều khiển Blogger của mình. Bạn có thể kiểm tra hướng dẫn sau đây để làm phong phú blog của bạn. 1. Bộ sưu tập Tùy biến Blogger .

body#layout ul{list-style-type:none;list-style:none}
body#layout ul li{list-style-type:none;list-style:none}

Có những khoảnh khắc trong đời không ai ngờ trước được
và ta buông tay
là vĩnh viễn...

Chẳng phải chính cuộc đời đã kéo ta đến sát bờ vực
chẳng phải những hơi thở cũng bị lấy mất khi ta đang thoi thóp
chẳng phải thế gian đã quá chừng ác độc...
từ chối những tháng ngày ta cố sống tốt hơn?

Ta cần một bờ vai để biết nói lời cảm ơn
cần một người ngồi bên cạnh để nghe ta khóc
cần một người mua dùm viên kẹo ngậm cho vơi bớt những cay đắng
cần một người nắm tay và chỉ dùm ta một con đường khác
giữa bóng đêm...

Ta không hề muốn mất đi cảm giác ngửa mặt mình đón những giọt mưa đến hỏi thăm
mỗi sáng vùi mình trong chăn và thèm một tách choco nóng
những lần nhìn thấy những hạt mầm tách mình ra khó nhọc
nhớ những hoàng hôn ngoài kia
và ghét những ngày ẩm thấp
biết bao nhiêu...

Sẽ là hạnh phúc nếu ta có cơ hội để chọn lựa gạt bỏ hết khổ đau
ta sẽ chọn mặc quần jean và áo sơ-mi đi ra phố
ta sẽ chọn mỉm cười với tất cả những người đã yêu thương ta lẫn từ bỏ
ta sẽ chọn một quán cóc để ngồi với những người xa lạ
ta sẽ chọn đi bộ sau một ngày mệt lả
để thấy mình bớt lạc lõng với mọi người

Ta không chọn nơi sinh ra nên đã chọn cách kết thúc một cuộc đời
vào giây phút thấy thương mình như đứa trẻ
chỉ muốn được ai đó ôm vào lòng cho mình khỏi quị ngã
nhưng có những yêu thương cũng bắt ta phải trả giá
đến tận cùng...

Có những khoảnh khắc trong cuộc đời này ta phải chấp nhận mình là kẻ vô ơn!

Bao gồm tùy chọn Bài đăng nổi bật trong Blogger giúp việc viết blog trở nên chuyên nghiệp và thiết thực hơn. Do đó, chúng tôi có thể giữ bài đăng dính hoặc được ghim để quảng cáo bài đăng cụ thể với tiêu đề, hình thu nhỏ, URL bài đăng như Wordpress hoặc nền tảng khác.
Theo mặc định, bố cục và thiết kế không quá phổ biến đối với tất cả mọi người. Chúng tôi cần tùy chỉnh bài đăng nổi bật và hướng dẫn này sẽ giúp bạn làm trong vài phút.

Để tùy chỉnh bài đăng nổi bật của bạn, hãy làm theo các bước dưới đây.
BƯỚC 1: TẠO MỘT PHẦN MỚI

Sẽ tốt hơn nếu tạo phần mới để thêm tiện ích Bài đăng nổi bật. Sau đó cố gắng tùy chỉnh sẽ có kết quả tốt hơn. Vì vậy, trước tiên hãy tạo một phần mới (Đề xuất: Trước phần chính). Dưới đây là hướng dẫn cách tạo phần mới trong mẫu Blogger.

BƯỚC 2: THÊM TIỆN ÍCH BÀI ĐĂNG NỔI BẬT
Nếu bạn đã thêm Bài đăng nổi bật, sau đó xóa bài này.

Bây giờ thêm mã sau trong phần mới được tạo.

<b:widget id='FeaturedPost1' locked='true' title='Featured Post' type='FeaturedPost' version='1'>
  <b:includable id='main'>
    <!-- Only display title if it's non-empty -->
    <b:if cond='data:title != ""'>
      <h2 class='title'><data:title/></h2>
    </b:if>
    <b:include name='content'/>
    <b:include name='quickedit'/>
  </b:includable>

  <b:includable id='content'>
  <div class='feature-post-summary'>
    <b:if cond='data:showPostTitle and data:postTitle != ""'>
      <h3><a expr:href='data:postUrl'><data:postTitle/></a></h3>
    </b:if>
 
    <b:if cond='data:showFirstImage and data:postFirstImage != ""'>
      <a expr:href='data:postUrl'><img class='feature_image' expr:src='data:postFirstImage'/></a>
    </b:if>
    <b:if cond='data:showSnippet and data:postSummary != ""'>
      <p>
        <data:postSummary/><br/>
        <span class='feature_readmore' style='text-align:center;'><a expr:href='data:postUrl'>Continue Reading</a>
        </span>
      </p>
    </b:if>
  </div>
  </b:includable>
</b:widget>

BƯỚC 3: TÙY CHỈNH VỚI CSS

Đặt mã CSS sau ngay trước đó ]]></b:skin>
 /************Featured Post CSS************/
    .feature_image {}
    .feature-post-summary{}
    .feature-post-summary h3{}
    .feature_readmore{}
    .feature_readmore a{}
    .feature_readmore a:hover{}
    .FeaturedPost1 p{}
Và tùy chỉnh với sự lựa chọn của riêng bạn.

BƯỚC 4: THÊM BÀI ĐĂNG CỤ THỂ VÀO TÍNH NĂNG

Chuyển đến Bảng điều khiển Blogger → Bố cục → Chỉnh sửa FeaturePost1. Chọn bài đăng cụ thể và lưu.

<div id="sly-post-tab">
<ul>
<li><a href="#tab-1">Tab One Name</a></li>
<li><a href="#tab-2">Tab Two Name</a></li>
<li><a href="#tab-3">Tab Three Name</a></li>
</ul>
<div id="tab-1">
    Tab One info here
</div>
<div id="tab-2">
    Tab Two info here
</div>
<div id="tab-3">
    Tab 3 info here
</div>
</div>

<div id="column1">
    Column1 of 3 info here
</div>
<div id="column2">
    Column2 of 3 info here
</div>
<div id="column3">
    Column3 of 3 info here
</div>

</div>

2 Columns Code Below

<div id="column1_of2">
    Column1 of 2 info here
</div>

<div id="column2_of2">
    Column2 of 2 info here
</div>

Message
Copy and paste code on post editor Compose tab when you write post (Compose mood). 

now replace your texts.
<div id="note">Your Text Here</div>