Cài đặt tiện ích giao diện Median UI

Tiện ích (Widget Blog)

Kích hoạt Fullpage, Sponsor, Product Post

Toàn trang (Fullpage) là chế độ xem toàn trang bằng cách loại bỏ Thanh bên (Sidebar) để cung cấp thêm không gian để người đọc có thể tập trung hơn vào nội dung.

Trang Tài trợ (Sponsor) là các bài đăng dành riêng cho các bài đăng của Khách (Guest) hoặc các bài đăng quảng cáo được đánh dấu bằng nhãn 'Được tài trợ'.

Trang Sản phẩm (Product Post) rất hữu ích để hiển thị các sản phẩm bạn muốn bán thông qua trang web của mình.

Để kích hoạt tính năng này, bạn chỉ cần thêm một trong các nhãn Fullpage,Sponsored hoặc Productvào bài đăng của mình, Bạn không nên kết hợp tất cả các nhãn này trong một bài đăng.

Có thể thay đổi nhãn ở trên không?

Chắc chắn rồi, nhưng có lẽ sẽ hơi khó đối với những bạn không hiểu về mã HTML.

Fullpage

Vui lòng tìm và thay đổi phần được đánh dấu trong mã bên dưới bằng tên nhãn mà bạn chọn:

&quot;Fullpage&quot; , &quot;Label_2&quot;

Bạn có thể sử dụng hai nhãn để kích hoạt tính năng trên, chỉ cần thay thế Label_2 bằng một tên nhãn khác.

&quot;Sponsored&quot; , &quot;Advertorial&quot;

Product

&quot;Product&quot; , &quot;Label_1&quot;

Có nhiều hơn một mã trên, thay đổi tất cả các mã tương tự mà bạn tìm thấy.

Thay đổi giới hạn tối đa của dòng tiêu đề bài đăng

Tiêu đề của bài viết về chủ đề này được thiết lập chỉ hiển thị tối đa là 3 dòng, vì vậy các tiêu đề bài viết dài sẽ tự động bị cắt bỏ.

Nếu bạn không thích tính năng này, bạn có thể tắt nó hoặc thay đổi số dòng tối đa. Tìm mã bên dưới:

.postTitle a, .itemTitle a{-webkit-line-clamp:3}

Thay đổi giá trị đã đánh dấu thành 4 để giới hạn nó ở mức tối đa 4 hàng, thay đổi thành 'inherit' để vô hiệu hóa nó.

Thay đổi định dạng đoạn mã bài đăng

Chúng tôi sử dụng định dạng data:post.body cho đoạn bài viết, bạn có thể tìm thấy một số mã như thế này. Ưu điểm của định dạng này là 'Chú thích trên hình ảnh bài đăng' sẽ không được đưa vào đoạn trích và hạn chế là một số thẻ nhất định cũng được đọc trong đoạn mã, bao gồm:

...
...
...
...
<strike>...</strike>
...
<s>...</s>
<del>...</del>
Complete reference...

Có thể bạn sẽ thấy một số vấn đề như xuất hiện các bài viết không được căn chỉnh hoặc văn bản trở nên nghiêng hoặc in đậm.

Để giải quyết vấn đề này, trước tiên hãy tìm mã tương tự như mã bên dưới, một số mẫu có thể có mã hơi khác:

<b:eval expr='snippet(data:post.body

Rất có thể bạn sẽ tìm thấy một số mã tương tự như trên, vui lòng thay thế tất cả bằng mã bên dưới:

<b:eval expr='snippet(data:post.snippets.long

Định dạng dấu thời gian của bài đăng

Định dạng viết ngày đã được đặt theo mặc định thành MMM d, YYYY và không thể thay đổi được nữa. Tôi không nghĩ đó là một vấn đề.

Nếu bạn đã quen với HTML, bạn có thể thay đổi định dạng đó bằng cách thay đổi một phần của mã được đánh dấu bên dưới:

expr:data-text='format(data:post.lastUpdated, &quot;MMMM d, YYYY&quot;)'
expr:data-text='format(data:post.date, &quot;MMMM d, YYYY&quot;)'

Bạn có thể đọc thông tin đầy đủ về định dạng ngày tiêu chuẩn Date Field Symbol Table ở đây.

Định dạng ngày trên chủ đề này có 2 điều kiện thay đổi tự động. Đầu tiên hiển thị ngày xuất bản của bài viết, nếu bài viết được cập nhật tự động ngày bài viết sẽ thay đổi dựa trên ngày bài báo được cập nhật.

Điều này rất hữu ích để thông báo cho người dùng rằng các bài báo họ đang đọc không lỗi thời và liên tục được cập nhật. Bạn có thể tắt tính năng này nếu bạn không nghĩ rằng nó là cần thiết, thật dễ dàng, bạn chỉ cần tìm ra mã bên dưới:

<b:includable id='postTimestamps'>
  <b:if cond='data:post.lastUpdated != data:post.date'>
    <time class='postTimestamp updated' expr:data-text='format(data:post.lastUpdated, &quot;MMMM d, YYYY&quot;)' expr:datetime='data:post.lastUpdated.iso8601' expr:title='&quot;Last updated: &quot; + data:post.lastUpdated format &quot;MMMM d, YYYY&quot;'/>
    <b:else/>
    <time class='postTimestamp published' expr:data-text='format(data:post.date, &quot;MMMM d, YYYY&quot;)' expr:datetime='data:post.date.iso8601' expr:title='&quot;Published: &quot; + data:post.date format &quot;MMMM d, YYYY&quot;'/>
  </b:if>
</b:includable>

Tắt tính năng thời gian đọc

Thời gian đọc (Reading Time) là một tính năng rất hữu ích để tính toán thời gian ước tính dành cho việc đọc toàn bộ bài báo. Đôi khi người dùng không muốn dành quá nhiều thời gian để đọc một bài viết, với tính năng này, người dùng có thể tìm ra thời gian bao lâu để đọc toàn bộ nội dung.

Tuy nhiên, không phải Blogger nào cũng cần tính năng này nên bạn có thể tắt hoặc tạm thời ẩn tính năng này. Thực hiện theo các phương pháp dưới đây:

Đầu tiên hãy tìm mã CSS này:

.postTimes .postReadtime span{opacity:.8}

.postTimes .postReadtime{display:none} Sau đó thêm display: none;, ứng dụng chính xác là như sau:

.postTimes .postReadtime span{opacity:.8}
.postTimes .postReadtime{display:none}

Nhãn tiện ích (Widget Label)

Chỉ định số lượng nhãn xuất hiện

Tiện ích Nhãn mặc định trong chủ đề này sẽ chỉ hiển thị 4 nhãn và ẩn phần còn lại với chức năng hiển thị/ẩn, quy tắc này áp dụng cho cả kiểu Nhãn Đám mây và Danh sách nhãn.

Bạn có thể thay đổi cài đặt này, ví dụ bạn muốn hiển thị 6 hoặc 8 nhãn, thậm chí bạn có thể vô hiệu hóa chức năng này. Để làm điều này, hãy làm theo các hướng dẫn dưới đây:

Trên trang tổng quan Blogger, nhấp vào 'Chủ đề'.
Nhấp vào biểu tượng mũi tên xuống bên cạnh nút 'Tùy chỉnh'.
Nhấp vào Chỉnh sửa HTML, bạn sẽ được chuyển đến trang chỉnh sửa.
Nhấp vào biểu tượng , cuộn và tìm 'Label00' như trong hình dưới đây:

Bạn sẽ tìm thấy mã như thế này:

<b:includable id='cloud'>
  <b:loop index='tags' values='data:labels' var='label'>
  
    <!--[ Only show 6 label ]-->
    <b:if cond='data:tags &lt;= 5'>
      <div class='labelSize'>...</div>
    </b:if>
    
    <!--[ Hide another label from 7th list ]-->
    <b:if cond='data:tags == 6'>
      <div class='labelShow'>
        <input class='labelInput hidden' id='offall-label' type='checkbox'/>
        <div class='labelAll'>
          <b:loop index='alltags' values='data:labels' var='label'>
          
            <!--[ Show label from 7th list ]-->
            <b:if cond='data:alltags &gt;= 6'>
              <div class='labelSize'>...</div>
            </b:if>
          </b:loop>
        </div>
        
        <label aria-label='Show label' class='label-more' expr:data-hide='data:messages.showLess' expr:data-show='data:messages.showMore' expr:data-text='&quot;+&quot; + (data:labels.length - 6)' for='offall-label'/>
      </div>
    </b:if>
  </b:loop>
</b:includable>

Mã cho danh sách nhãn:

<b:includable id='list'>
  <ul>
    <b:loop index='tags' values='data:labels' var='label'>
    
      <!--[ Only show 6 label ]-->
      <b:if cond='data:tags &lt;= 5'>
        <li>...</li>
      </b:if>
      
      <!--[ Hide another label from 7th list ]-->
      <b:if cond='data:tags == 6'>
        <li class='labelShow'>
          <input class='labelInput hidden' id='offall-label' type='checkbox'/>
          <div class='labelAll'>
            <ul>
              <b:loop index='alltags' values='data:labels' var='label'>
              
                <!--[ Show label from 7th list ]-->
                <b:if cond='data:alltags &gt;= 6'>
                  <li>...</li>
                </b:if>
              </b:loop>
            </ul>
          </div>
          
          <label aria-label='Show label' class='label-more' expr:data-hide='data:messages.showLess' expr:data-show='data:messages.showMore' expr:data-text='&quot;+&quot; + (data:labels.length - 6)' for='offall-label' role='button'/>
        </li>
      </b:if>
    </b:loop>
  </ul>
</b:includable>

Để xác định số nhãn xuất hiện, hãy thay đổi số được đánh dấu trong đoạn code trên.

Giải thích:

Lệnh lặp trên Blogger bắt đầu từ số 0.
cond='data:tags <= 5': Mã chính để giới hạn chỉ hiển thị 6 Nhãn đầu tiên.
cond='data:tags == 6': Hiển thị nội dung hoặc hiển thị / ẩn chức năng trong vòng lặp trình tự nhãn thứ 7.
cond='data:alltags >= 6': Hiển thị các nhãn còn lại từ đơn hàng thứ 7 trở đi.
(data:labels.length - 6): Đếm số của tất cả các nhãn trừ 6.

Thay đổi câu 'Hiển thị thêm' và 'Hiển thị ít hơn'

Các câu 'Hiển thị ít hơn' và 'Hiển thị thêm' sử dụng mã data:messages tiêu chuẩn từ Blogger, vì vậy nó sẽ tự động thay đổi nếu bạn thay đổi ngôn ngữ chính của blog. Tuy nhiên, không phải ai cũng thích câu này, vì vậy bạn có thể thay đổi nó bằng cách thay đổi mã CSS bên dưới:

.Label .labelShow label:before{content:attr(data-show)}
    
// Code 'Show less'
    
.Label .labelInput:checked ~ label:before{content:attr(data-hide)}

.Label .labelShow label:before{content:'Label lainnya'}
    
// Code 'Show less'
    
.Label .labelInput:checked ~ label:before{content:'Sembunyikan'}

Thanh trượt tiện ích (Widget Slider)

Trong phiên bản mới nhất, có một tiện ích con trượt mà bạn có thể kích hoạt hoặc hủy kích hoạt. Theo mặc định widget này bị ẩn, bạn phải kích hoạt nó, bạn phải kích hoạt nó trước để có thể sử dụng widget này.

Kích thước hình ảnh được đề xuất

Để có chất lượng hình ảnh thanh trượt tối đa, chúng tôi khuyên bạn nên sử dụng 1920 x 780.

Chỉnh sửa Slider Large hoặc Slider Mini trên bố cục Blogger, có hai tùy chọn thẻ hình ảnh mà bạn có thể sử dụng, cụ thể là có hoặc không có liên kết, đây là một ví dụ:

<!--[ add the content right below ]-->
<div class='sliderImg lazy' data-bg='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjy2dbPdm2JaOrNr51NiuW-JoZbyYac9bBeoFcfEhqyElkPkVmayHJlGty3Ey6QFJ97AFIQToq9qboBjNQMZhrORajzM0bSOJ-7EOXzh92sv1Eki2jFhCHpL3CMS7AaeiqL_4cCllxgTRTT/s0/slider-1-min.png'></div>

<!--[ add the content right below ]-->
<a class='sliderImg lazy' href='#' data-bg='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjy2dbPdm2JaOrNr51NiuW-JoZbyYac9bBeoFcfEhqyElkPkVmayHJlGty3Ey6QFJ97AFIQToq9qboBjNQMZhrORajzM0bSOJ-7EOXzh92sv1Eki2jFhCHpL3CMS7AaeiqL_4cCllxgTRTT/s0/slider-1-min.png' aria-label='Slider'></a>

Giải thích:

Dòng đầu tiên là thanh trượt chỉ hiển thị hình ảnh mà không click được và dòng thứ hai là hình ảnh kèm theo liên kết, bạn có thể chọn một trong số chúng.
Thêm url của bạn vào thuộc tính href='#'.
Thực hiện thay đổi thuộc tính data-bg='...' với url hình ảnh của bạn.

Tham khảo: jagodesain.com

NewTricks - Kiến Thức Thú Vị Về Internet

Cài đặt tiện ích giao diện Median UI

Tiện ích (Widget Blog)

Kích hoạt Fullpage, Sponsor, Product Post

Fullpage

Product

Thay đổi giới hạn tối đa của dòng tiêu đề bài đăng

Thay đổi định dạng đoạn mã bài đăng

Định dạng dấu thời gian của bài đăng

Tắt tính năng thời gian đọc

Nhãn tiện ích (Widget Label)

Chỉ định số lượng nhãn xuất hiện

Thay đổi câu 'Hiển thị thêm' và 'Hiển thị ít hơn'

Thanh trượt tiện ích (Widget Slider)

Kích thước hình ảnh được đề xuất

About Author

Đăng nhận xét

Ads by Google

11 thủ thuật phím tắt siêu tiện lợi cho Máy tính

50 lệnh Run thường sử dụng trên Máy tính

Cloudflare là gì và làm thế nào để sử dụng nó ?

Đăng ký Telegram Premium được phát hành cho Người dùng

Chia sẻ Code custom Menu chuột phải trên Website/Blog

Oops! No Internet!