Tùy biến Plus UI V3.2.0 - Responsive Blogger Template - Thiết kế Blogspot

Hướng dẫn Tùy biến Plus UI V3.2.0 - Responsive Blogger Template theo ý muốn. Ở bài này Thiết Kế Blogspot sẽ hướng dẫn bạn tùy biến những tác vụ cần thiết hoặc lược bỏ 1 vài tính năng hay tùy chỉnh tính năng template blogger plus ui

Tùy biến tiêu đề chính của blog

Mặc định khi truy cập trang chủ thì khi bấm vào tiêu đề sẽ không có link liên kết, vậy nếu gắn link liên kết cần chỉnh sửa đoạn code sau

Tìm trong chỉnh sửa template

                      <b:tag class='headT' expr:name='!data:view.isHomepage ? &quot;a&quot; : &quot;span&quot;'>
                        <b:attr cond='!data:view.isHomepage' expr:value='data:blog.homepageUrl.canonical' name='href'/>
                        <data:title/>
                      </b:tag>

Thay bằng

                      <b:tag class='headT' expr:name='!data:view.isHomepage ? &quot;a&quot; : &quot;span&quot;'>                        
                        <b:attr cond='!data:view.isHomepage' expr:value='data:blog.homepageUrl.canonical' name='href'/>  
                          <a expr:aria-label='data:title' expr:href='data:blog.homepageUrl.canonical'>
                            <data:title/>
                          </a>                                                  
                      </b:tag>

Bỏ "good morning" trong chi tiết bài viết.

Tìm <!--[ Post header ]--> và xóa hoặc ẩn 

<b:if cond='data:view.isPost and !data:view.isPreview'>
..
</b:if>

Show menu trên desktop

Tìm

<b:tag cond='!data:story.active and data:blog.view not in [&quot;x-content-blog&quot;]' expr:class='&quot;mainW&quot; + (data:vars.menu_state == &quot;1px&quot; ? &quot; co&quot; : &quot; ex&quot;)' id='root' name='div'>

Thay bằng

<b:tag cond='!data:story.active and data:blog.view not in [&quot;x-content-blog&quot;]' expr:class='&quot;mainW&quot; + (data:vars.menu_state == &quot;1px&quot; ? &quot; ex&quot; : &quot; co&quot;)' id='root' name='div'>

Font & Icon SVG cho Plus UI

• Ngoài những icon mặc định của Plus UI thì bạn có thể truy cập: https://www.svgviewer.dev/ để lấy những mẫu icon svg phù hợp
• Font Plus UI mặc định là Google Sans Text hiển thị Tiếng Việt cũng khá đẹp nên để nguyên như vậy sẽ phù hợp hơn với template này.

Favicon cho Plus UI

Để có thể sử dụng Favicon tải lên trong cài đặt hoạt động hãy loại bỏ đoạn sau:

<Variable name="meta.icon" description="Favicon URL" type="string" default="" value="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisldTSPR5qQSsrqZDyfYV81HFSq4Pko5u8xpbzKJ7V05CZAaCkfxG550uqbp2xlCxukxcVL4i2so2XxNri-wqqUO0yuVLLznfFes1rdmg7Ywq8pWE8FXwWQfcyrNiAPlyI3_ngX12x7-KGzAVPfjiTWPMP3HdwelG4pn729xMfH05-hdWVbQyaIsgMkQg/s0/favicon.png"/>
[!] Favicon URL
[!] @type {String}
[!] Recommended image ratio: 1:1
[!] If Blank: It will use Favicon URL from Blogger Blog Settings
[!] Warning: Dont't add invalid URL

 Nếu giữ nguyên thì thay link icon "bôi đỏ " ở trên nhé!

Thời gian đọc bài viết

Việt hóa thời gian đọc ước tính của bài viết

<Variable name="m.estimatedReadTime" description="Message for: Estimated read time" type="string" default="" value="Thời gian đọc ước tính"/>

Việt hóa phút đọc của bài viết

Tìm

.pInf .pRd >*::after{content:attr(data-minutes) ' min';display:inline-block}

Sửa thành

.pInf .pRd >*::after{content:attr(data-minutes) ' phút';display:inline-block}

Loại bỏ hoặc thay đổi tiền tố nhãn

Bỏ tiền tố "in" trước nhãn, tìm blog1 và sửa

<b:widget-setting name='postLabelsLabel'>in</b:widget-setting>

<b:widget-setting name='postLabelsLabel'/>

Định dạnh ngày, tháng, năm

Vấn đề ngày tháng năm, mặc định là MMM dd, YYYY thì sẽ chỉnh lại thành dd MMM, YYYY

      <time class='aTtmp iTtmp pbl' expr:data-text='data:vars.m_published' expr:data-time='format(data:post.date, &quot;dd MMM, YYYY&quot;)' expr:datetime='data:post.date.iso8601' expr:title='&quot;Published on: &quot; + format(data:post.date, &quot;dd MMM, YYYY&quot;)'/>

  
  
    <b:includable id='postTimestampPublish'>
  
  
      <time class='aTtmp pTtmp pbl' expr:data-text='data:vars.m_published' expr:data-time='format(data:post.date, &quot;dd MMM, YYYY&quot;)' expr:datetime='data:post.date.iso8601' expr:title='&quot;Published on: &quot; + format(data:post.date, &quot;dd MMM, YYYY&quot;)'/>
    </b:includable>
  

 
  
    <b:includable id='postTimestampUpdate'>
      <time class='aTtmp pTtmp upd' expr:data-text='data:vars.m_updated' expr:data-time='format(data:post.lastUpdated, &quot;dd MMM, YYYY&quot;)' expr:datetime='data:post.lastUpdated.iso8601' expr:title='&quot;Updated on: &quot; + format(data:post.lastUpdated, &quot;dd MMM, YYYY&quot;)'/>
    </b:includable>

Lời kết

Ngoài những chỉnh sửa tùy biến trên còn rất nhiều vấn đề liên quan đến template plus ui này, như vấn đề về việt hóa, seo,....

Demo: https://quaigiayxoan.com/

Chúc thành công!