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}

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}

Tiện ích điều hướng Breadcrumbs cho Blogger sẽ giúp trang web của bạn thân thiện hơn với người dùng và khả năng tương thích tìm kiếm.
Thêm Dữ liệu có cấu trúc Breadcrumb hoặc Đánh dấu lược đồ sẽ giúp Blog của bạn vào Công cụ tìm kiếm có hiệu quả để hiển thị tiêu đề bài viết thay vì URL đầy đủ.

ĐỂ THÊM THANH ĐIỀU HƯỚNG BREADCRUMB TRONG BLOGGER, HÃY ÁP DỤNG CÁC BƯỚC SAU:

1. Truy cập Blogger và chọn blog của bạn và chọn ' Mẫu → Chỉnh sửa HTML '

2. Nhấp vào một mã trên mã mẫu và ' CTRL+ F' và tìm kiếm
<b:includable id='main' var='top'> và thay thế bằng mã sau

Ngay bên dưới dán mã sau
<b:includable id='breadcrumb' var='posts'><b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == "static_page"'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<!-- breadcrumb for the post page -->
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs'>
<span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='title'>Home</span></a></span>
<b:loop values='data:post.labels' var='label'>
  » <span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:label.url' itemprop='url'><span itemprop='title'><data:label.name/></span></a></span>
</b:loop>
» <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span>Unlabelled</span> » <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<!-- breadcrumb for the label archive page and search pages.. -->
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>Archive For<data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == ""'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>All Posts</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>Posts under <data:blog.pageName/></span>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
<b:includable id='main' var='top'>
<b:include data='posts' name='breadcrumb'/>

Thêm CSS sau đây ngay trước đó ]]></b:skin>

.breadcrumbs {
    border: 1px solid black;
    background: #fff;
    margin-top: 2%;
}

.breadcrumbs a {
    color: #b93434;
    text-decoration: none;
}

.breadcrumbs a:hover{}

Bạn có thể tùy chỉnh CSS với mong muốn của bạn.

Đặt tự động đọc thêm hoặc tiếp tục nút đọc trong bài đăng Blogger sẽ giúp trang trí trang chủ của bạn với tóm tắt bài đăng Blogger cho mỗi bài đăng với hình thu nhỏ và khán giả của bạn sẽ cảm thấy tốt hơn khi ở lại với blog của bạn.

THÊM NÚT TỰ ĐỘNG ĐỌC THÊM:
Để thêm nút nhảy hoặc tự động đọc thêm nút trong bài viết Blogger, hãy làm theo các bước dưới đây.
Bước 1: Chuyển đến Bảng điều khiển Blogger → Chủ đề → Chỉnh sửa HTML
Bước 2: Nhấp vào mã HTML và nhấn Ctrl+ Ftừ bàn phím và tìm kiếm <data:post.body/>

Bạn có thể tìm thấy điều này nhiều hơn một lần. Điểm dừng đầu tiên trong lần thứ hai. Nếu nó không hoạt động trong lần thứ hai sau khi hoàn thành các bước sau, thì hãy thử vào lần thứ ba.

Bước 3: Bây giờ thay thế đoạn mã trên bằng đoạn mã sau.
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>","<data:post.url/>","<data:post.title/>");</script>
 <span class='readmore' style='float:right;'><a expr:href='data:post.url'>Read More »</a></span></b:if></b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == "static_page"'><data:post.body/></b:if>

Bước 4: Bây giờ tìm kiếm </head>thẻ
Và thêm mã JavaScript sau ngay trước nó.
<script type='text/javascript'>posts_no_thumb_sum=400,posts_thumb_sum=300,img_thumb_height=120,img_thumb_width=160;</script>
<script type='text/javascript'>
function removeHtmlTag(t,e){if(-1!=t.indexOf("<")){for(var n=t.split("<"),i=0;i<n.length;i++)-1!=n[i].indexOf(">")&&(n[i]=n[i].substring(n[i].indexOf(">")+1,n[i].length));t=n.join("")}for(e=e<t.length-1?e:t.length-2;" "!=t.charAt(e-1)&&-1!=t.indexOf(" ",e);)e++;return t=t.substring(0,e-1),t+"..."}
function createSummaryAndThumb(t,e,n){var i=document.getElementById(t),m="",r=i.getElementsByTagName("img"),s=posts_no_thumb_sum;r.length>=1&&(m='<span class="posts-thumb" style="float:left; margin-right: 10px;"><a href="'+e+'" title="'+n+'"><img src="'+r[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px" /></a></span>',s=posts_thumb_sum);var g=m+"<div>"+removeHtmlTag(i.innerHTML,s)+"</div>";i.innerHTML=g}
</script>
Bước 5: Lưu mẫu của bạn.

TÙY CHỈNH NÚT ĐỌC THÊM: 
Để tùy chỉnh đọc thêm nút dán, sau đây đọc thêm nút CSS mã trước đó </head>và chỉnh sửa CSS của bạn như bạn muốn.

  <b:if cond='data:blog.pageType == "index"'>
    <style type='text/css'>
      .post-footer {display: none;}
      .post {margin-bottom: 10px; border-bottom: 1px dotted #E6E6E6; padding-bottom: 20px;}
      .readmore a {text-decoration: none; }
      .readmore a:hover{}
    </style>
</b:if>