Thêm dòng chữ nhỏ ngay sau tiêu đề blog template Median UI

Với template Median UI không dùng hình ảnh thay cho tiêu đề blog việc tạo một tiêu đề blog có thêm vài ký tự kích thước nhỏ ngay sau tiêu đề cũng làm cho tiêu đề thêm độc đáo. Ví dụ có thể xem Tại đây

Thực chất vài ký tự nhỏ đó là phần mô tả blog nhưng thường bị nhầm là tiêu đề và bạn có thể tận dụng điều này để tạo một tiêu đề blog độc đáo lạ mắt.

Để làm được điều này bạn cần sửa một chút code trong mẫu và ở đây chỉ nói về template Median UI còn các mẫu loại khác bạn có thể tùy biến.

Với mẫu v1.5 và v1.6 việc thêm CSS là giống nhau.

.Header .headH.hasSub{display:flex;align-items:baseline}
.Header .headSub{margin:0 5px;font:400 11px var(--fontB); white-space:nowrap;text-overflow:ellipsis;overflow:hidden;max-width:60px;opacity:.6} 
.Header .headSub::before{content:attr(data-text)}

Tiếp theo sửa phần "Header widget" có khác nhau giữa 2 mẫu v1.5 và v1.6.
Mẫu v1.5
Thay toàn bộ

<b:includable id='title'>
...............................
</b:includable>

Thành

<b:includable id='title'>
                    <!--[ Header title ]-->
                    <div class='headerInner'>
                      <b:class cond='data:this.imagePlacement == &quot;REPLACE&quot;' name='replaced'/>
                      <b:tag class='hasSub' expr:name='!data:view.isSingleItem ? &quot;h1&quot; : &quot;h2&quot;'>
                        <b:tag class='headerTitle' 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>                       
                        <!--[ Header SubTitle ]-->
                        <b:tag class='headSub' expr:data-text='data:this.description' name='span'/>                        
                      </b:tag>
                    </div>
                  </b:includable>

Mẫu v1.6

<b:includable id='title'>
                    <!-- Header Title -->
                    <div class='headInnr'>
                      <b:class cond='data:this.imagePlacement == &quot;REPLACE&quot;' name='hidden'/>
                      <b:tag class='headH hasSub' expr:name='!data:view.isSingleItem ? &quot;h1&quot; : &quot;h2&quot;'>
                        <bdi>
                          <b:tag class='headTtl' 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>
                          
                        </bdi>
                        <!--[ Header SubTitle ]-->
                        <b:tag class='headSub' expr:data-text='data:this.description' name='span'/>
                      </b:tag>
                      
                    </div>
                  </b:includable>

Để thêm chữ nhỏ bạn vào chỉnh sửa header trong bố cục hoặc vào cài đặt thêm vào phần mô tả blog chữ mình muốn.
Nếu muốn vẫn có phần mô tả blog và vẫn có phần chữ nhỏ thì bạn thêm trực tiếp trong mẫu với việc thay đổi dòng code sau.
Thay:

<b:tag class='headSub' expr:data-text='data:this.description' name='span'/>

Thành

<b:tag class='headSub' data-text='Thêm chữ nhỏ tại đây' name='span'/>