Chia Sẻ Shortcode Được Dùng Cho Template Plus UI

Shortcode Template Plus UI

Có thể các bạn đã sử dụng qua template Plus UI nhưng vẫn chưa biết các shortcode của nó. Trong bài viết này mình sẽ chia sẻ cho các bạn các shortcode Plus UI đã được định dạng sẵn để các bạn thêm vào bài viết của mình.

Mẹo: Sử dụng <p>Your_paragraph_here</p> thẻ để thêm đoạn văn cho bài viết.

Thêm hình ảnh có chú thích

Thêm chú thích hình ảnh cũng là một trong các yếu tố SEO và giúp người đọc hiểu được nội dung của bức ảnh

  <table class='tr-caption-container'>
  <tbody>
    <tr>
      <td>
        <img alt='image_title_here' class='full' src='https://4.bp.blogspot.com/.../name.png'/>
      </td>
    </tr>
    <tr>
      <td class='tr-caption'>Your_caption_is_here</td>
    </tr>
  </tbody>
</table>

Hình ảnh với bố cục lưới

Các hình ảnh sẽ cùng hiển thị, giúp tiết kiệm diện tích và trông đẹp mắt hơn

  <!--[ Grid Image ]-->
<div class='psImg grImg'>
  <img alt='image_title_here' src='https://4.bp.blogspot.com/.../name.png'/>
  <img alt='image_title_here' src='https://4.bp.blogspot.com/.../name.png'/>
  <img alt='image_title_here' src='https://4.bp.blogspot.com/.../name.png'/>
  <img alt='image_title_here' src='https://4.bp.blogspot.com/.../name.png'/>
</div>

Hình ảnh với chức năng hiển thị tất cả

Bạn có nhiều hình ảnh nhưng chỉ muốn hiển thị một vài ảnh nhất định, thì tính năng này là dành cho bạn.

Hiển thị tất cả

  <!--[ Show All Image ]-->
<input class='inImg hidden' id='for-hideImage' type='checkbox'>
<div class='psImg hdImg'>
  <img alt='image_title_here' src='https://4.bp.blogspot.com/.../name.png'/>
  <img alt='image_title_here' src='https://4.bp.blogspot.com/.../name.png'/>
  <img alt='image_title_here' src='https://4.bp.blogspot.com/.../name.png'/>
  
  <div class='btImg'>
    <img alt='image_title_here' src='https://4.bp.blogspot.com/.../name.png'/>
    
    <!--[ Button image to activate ]-->
    <label for='for-hideImage' aria-label='Show all image'>Show All</label>
  </div>

  <!--[ Hide the rest image here ]-->
  <div class='psImg shImg'>
    <img alt='image_title_here' src='https://4.bp.blogspot.com/.../name.png'/>
    <img alt='image_title_here' src='https://4.bp.blogspot.com/.../name.png'/>
    <img alt='image_title_here' src='https://4.bp.blogspot.com/.../name.png'/>
    <img alt='image_title_here' src='https://4.bp.blogspot.com/.../name.png'/>
  </div>
</div>

Hình ảnh với bố cục cuộn

Tương tự như cách bố trí hình ảnh ở trên, chỉ là trên màn hình di động, các hình ảnh sẽ được sắp xếp song song với chức năng cuộn bên bổ sung trên màn hình di động.

  <!--[ Scroll Image ]-->
<div class='psImg scImg scrlH'>
  <img alt='image_title_here' src='https://4.bp.blogspot.com/.../name.jpg'/>
  <img alt='image_title_here' src='https://4.bp.blogspot.com/.../name.jpg'/>
  <img alt='image_title_here' src='https://4.bp.blogspot.com/.../name.jpg'/>
  <img alt='image_title_here' src='https://4.bp.blogspot.com/.../name.jpg'/>
</div>

Lazyload Image

Dùng cho việc trì hoãn tải hình ảnh để điểm PageSpeed của blog cao hơn, hình ảnh sẽ chỉ tải khi người dùng cuộn đến khu vực hình ảnh. Tất cả hình ảnh trong bài viết này đều sử dụng Lazyload.

  <div>
  <img class='lazy' alt='image_title_here' data-src='https://4.bp.blogspot.com/.../name.png' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
  <noscript><img alt='image_title_here' src='https://4.bp.blogspot.com/.../name.png'/></noscript>
</div>

Manual Related Post

Điều quan trọng cần lưu ý là tính năng này được viết thủ công, nó không tự động xuất hiện trên mọi trang.

  <div class='pRelate'>
  <!--[ Related title ]-->
  <b>You may want to read this post :</b>

  <ul>
    <li><a href='#'>Your_post_title_here</a></li>
    <li><a href='#'>Your_post_title_here</a></li>
    <li><a href='#'>Your_post_title_here</a></li>
  </ul>
</div>

Auto Related Post

  <details class='sp toc' open=''>
  <summary data-show='Show all' data-hide='Hide all'>Related Posts</summary>  
  <div class='toC' id='aRel'></div>
</details>

Dấu ngắt đoạn

Bạn chỉ cần thêm <hr> vào bất cứ chỗ nào muốn ngắt đoạn với dấu 3 chấm như bên dưới.

Thụt đầu dòng đoạn văn bản

Đây là một ví dụ về thụt đầu dòng đoạn văn bản cách tự động trong template Plus UI. Hãy sử dụng đoạn code chia sẻ dưới đây để thực hiện.

  <p class='pIndent'>Your_paragraph_is_here.</p>

Drop Cap

Đây là một ví dụ về thụt đầu dòng đoạn văn bản hay còn gọi là Drop Cap một cách tự động trong template Plus UI. Hãy sử dụng đoạn code chia sẻ dưới đây để thực hiện.

  <p><span class='dropCap'>Y</span>our_paragraph_is_here.</p>

Blockquote

Blockquote hay còn gọi là đoạn trích dẫn. Hãy sử dụng đoạn code chia sẻ dưới đây để tạo đoạn trích dẫn một cách tự động trong template Plus UI.

  <blockquote>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et. Mauris vel diam pellentesque lorem lacinia luctus.</blockquote>

Bạn có thể dùng mẫu khác:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et. Mauris vel diam pellentesque lorem lacinia luctus. Nulla quam magna, pharetra in ultrices at, condimentum id tellus.

Sed suscipit sapien sed turpis ultrices viverra. Ut quis dui sed odio sollicitudin fermentum.

Aliquam vitae metus laoreet, dapibus enim sit amet, feugiat lorem. Sed in dui purus.

  <blockquote class='s-1'>
  <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et. Mauris vel diam pellentesque lorem lacinia luctus. Nulla quam magna, pharetra in ultrices at, condimentum id tellus.
    <ul>
      <li>Sed suscipit sapien sed turpis ultrices viverra. Ut quis dui sed odio sollicitudin fermentum.</li>
      <li>Aliquam vitae metus laoreet, dapibus enim sit amet, feugiat lorem. Sed in dui purus.</li>
    </ul>
  </div>
</blockquote>

Kèm trích dẫn xã hội:

Lorem ipsum dolor sit amet, consectetur adipiscing elit.Proin vestibulum dignissim diam, et efficitur felis commodo et. Mauris vel diam pellentesque lorem lacinia luctus. Nulla quam magna, pharetra in ultrices at, condimentum id tellus.

  <blockquote class="pu_blq" data-author="Anonymous">Lorem ipsum dolor sit amet, consectetur adipiscing elit.Proin vestibulum dignissim diam, et efficitur felis commodo et. Mauris vel diam pellentesque lorem lacinia luctus. Nulla quam magna, pharetra in ultrices at, condimentum id tellus.</blockquote>

Tạo bảng

Khi taọ bảng thường trên mobile sẽ hiển thị không được đẹp như trên máy tính. Ở Plus UI bạn không cần phải lo ngại vấn đề này. Bảng sẽ được kéo ngang trên cả mobile và desktop khi hàng quá dài hoặc nhiều cột.

No	Column 1	Column 2	Column 3	Column 4	Column 5
1	Data table 1	0.000.000	0.000.000	0.000.000	0.000.000
2	Data table 2	0.000.000	0.000.000	0.000.000	0.000.000
3	Data table 3	0.000.000	0.000.000	0.000.000	0.000.000
4	Data table 4	0.000.000	0.000.000	0.000.000	0.000.000

  <div class="table">
 <table style='white-space:nowrap; min-width:100%;'>
    <thead>
      <tr>
        <th>No</th>
        <th>Column 1</th>
        <th>Column 2</th>
        <th>Column 3</th>
        <th>Column 4</th>
        <th>Column 5</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Data table 1</td>
        <td>0.000.000</td>
        <td>0.000.000</td>
        <td>0.000.000</td>
        <td>0.000.000</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Data table 2</td>
        <td>0.000.000</td>
        <td>0.000.000</td>
        <td>0.000.000</td>
        <td>0.000.000</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Data table 3</td>
        <td>0.000.000</td>
        <td>0.000.000</td>
        <td>0.000.000</td>
        <td>0.000.000</td>
      </tr>
      <tr>
        <td>4</td>
        <td>Data table 4</td>
        <td>0.000.000</td>
        <td>0.000.000</td>
        <td>0.000.000</td>
        <td>0.000.000</td>
      </tr>
    </tbody>
  </table>
</div>

Ghi chú

Dùng để đánh dấu các thông tin quan trọng, ở đây có 2 kiểu với 2 màu sắc khác nhau.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et.

<p class='note'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et.</p>

Mauris vel diam pellentesque lorem lacinia luctus. Nulla quam magna, pharetra in ultrices at, condimentum id tellus. Sed suscipit sapien sed turpis ultrices viverra.

<p class='note wr'>Mauris vel diam pellentesque lorem lacinia luctus. Nulla quam magna, pharetra in ultrices at, condimentum id tellus. Sed suscipit sapien sed turpis ultrices viverra.</p>

Mục lục thủ công

Contents

Thêm hình ảnh có chú thích

Hình ảnh với chức năng hiển thị tất cả

Hình ảnh với bố cục cuộn

Your_Heading

<details class='sp toc' open=''>
  <summary data-show='Show all' data-hide='Hide all'>Contents</summary>  
  <div class='toC'>
    <ol>
      <li><a href='#heading'>Your_Heading</a></li>
      ...
      ...
      ...
    </ol>

    <!--[ Sample ToC with subheading ]-->
    <ol>
      <li><a href='#heading'>Your_Heading</a>
        <ol>
          <li><a href='#subHeading'>Sub_Heading_1</a></li>
          ...
          ...
          ...
        </ol>
      </li>
    </ol>
  </div>
</details>

Xóa open=''thuộc tính để tự động đóng Mục lục khi trang được tải lần đầu.
Bạn có thể thay đổi tiêu đề hoặc cụm từ 'Show all/Hide all' trong phần được đánh dấu.

Mục lục bán tự động

Tùy chọn dễ nhất để hiển thị Mục lục. Tính năng này sẽ hiển thị tất cả các thẻ tiêu đề trong bài đăng của bạn (ba cấp độ h2- h4), vì vậy hãy đảm bảo bạn viết các thẻ tiêu đề theo thứ tự

Table of Contents

  <details class='sp toc'>
  <summary data-show='Show all' data-hide='Hide all'>Table of Contents</summary>  
  <div class='toC' id='autoToc'></div>
</details>

MultiTabs

Your_code_is_here

Your_code_is_here

Your_code_is_here

  <div class='pre tb'>
  <!--[ Active function ]-->
  <input class='prei hidden' id='preT-1' type='radio' name='preTab' checked>
  <input class='prei hidden' id='preT-2' type='radio' name='preTab'>
  <input class='prei hidden' id='preT-3' type='radio' name='preTab'>
  <!--[ Header/title ]-->
  <div class='preH tbHd scrlH'>
    <!--[ Change atribute data-text='...' to replace title ]-->
    <label for='preT-1' data-text='HTML'></label>
    <label for='preT-2' data-text='CSS'></label>
    <label for='preT-3' data-text='JS'></label>
  </div>

  <!--[ Content ]-->
  <div class='preC-1'>
    <pre>Your_code_is_here</pre>
  </div>
  <div class='preC-2'>
    <pre>Your_code_is_here</pre>
  </div>
  <div class='preC-3'>
    <pre>Your_code_is_here</pre>
  </div>
</div>

Ẩn/hiện nội dung

Spoiler:

Your_text_is_here.

  <details class='sp'>
  <summary data-show='Show all' data-hide='Hide all'>Spoiler:</summary>
  <p>Your_text_is_here.</p>
</details>

Accordion/Toggle Content

Accordion line 1

Epcot là công viên giải trí tại Walt Disney World Resort có các điểm tham quan thú vị, gian hàng quốc tế và pháo hoa. Từng đoạt giải thưởng và các sự kiện đặc biệt theo mùa.

Accordion line 2

Accordion line 3

Accordion line 4

  <!--[ Accordion start ]-->
<div class='showH'>
  <!--[ Accordion line 1 ]-->
  <details class='ac'>
    <summary>Title_is_here</summary>
    <div class='aC'>
      <p>Your_text_is_here.</p>
    </div>
  </details>
  
  <!--[ Accordion line 2 ]-->
  <details class='ac alt'>
    <summary>Title_is_here</summary>
    <div class='aC'>
      <p>Your_text_is_here.</p>
    </div>
  </details>

  ...
  
  ...
</div>

FAQ schema

Giới thiệu Chia Sẻ Vip

Chia Sẻ Vip là trang chuyên chia sẻ kiến thức về lập trình, học thuật, thuật toán, quảng trị mạng, tips, trick, font chữ, code c, code c++, code c#, code java, code javascript, code html, code css, code python, code react, blogger, template blogger, theme blogspot, tool hay, thủ thuật máy tính, windows, ghost win, chia sẻ phần mềm, kỹ năng tin học, tut facebook, tricker facebook, thủ thuật blog, thủ thuật facebook, psd ảnh đẹp và hình nền đẹp

Thông tin liên hệ

Mọi thông tin liên hệ vui lòng truy cập đến trang liên hệ để được hỗ trợ.

...

...

  <!--[ Accordion start ]-->
<div class='showH' itemscope='' itemtype='https://schema.org/FAQPage'>
  <!--[ Accordion line 1 ]-->
  <details class='ac' itemscope='' itemprop='mainEntity' itemtype='https://schema.org/Question'>
    <summary itemprop='name'>Title_is_here</summary>
    <div class='aC' itemscope='' itemprop='acceptedAnswer' itemtype='https://schema.org/Answer'>
      <p itemprop='text'>Your_text_is_here.</p>
    </div>
  </details>
  
  <!--[ Accordion line 2 ]-->
  <details class='ac alt' itemscope='' itemprop='mainEntity' itemtype='https://schema.org/Question'>
    <summary itemprop='name'>Title_is_here</summary>
    <div class='aC' itemscope='' itemprop='acceptedAnswer' itemtype='https://schema.org/Answer'>
      <p itemprop='text'>Your_text_is_here.</p>
    </div>
  </details>

  ...
  
  ...
</div>

External Link

Thông báo cho người dùng nếu liên kết sẽ dẫn đến một trang web khác.

Sample_external_link
Sample_link_alt

  <a class='extL' href='#' rel='noreferrer' target='_blank'>Sample_external_link</a>
<a class='extL alt' href='#' rel='noreferrer' target='_blank'>Sample_link_alt</a>

Button

Title_link

 <a class='button' href='url_is_here'>Title_link</a>

Title_link

<a class='button ln' href='url_is_here'>Title_link</a>

Title_link
Title_link

<a class='button' href='url_is_here'><i class='icon dl'></i>Title_link</a>
<a class='button' href='url_is_here'><i class='icon demo'></i>Title_link</a>

với <svg>các biểu tượng:

WhatsApp me!

Buy now!

<a class='button' href='url_is_here'>
  <svg viewBox='0 0 64 64' style='fill:#fff; margin-right:12px;'><path d='M6.9,48.4c-0.4,1.5-0.8,3.3-1.3,5.2c-0.7,2.9,1.9,5.6,4.8,4.8l5.1-1.3c1.7-0.4,3.5-0.2,5.1,0.5 c4.7,2.1,10,3,15.6,2.1c12.3-1.9,22-11.9,23.5-24.2C62,17.3,46.7,2,28.5,4.2C16.2,5.7,6.2,15.5,4.3,27.8c-0.8,5.6,0,10.9,2.1,15.6 C7.1,44.9,7.3,46.7,6.9,48.4z M21.3,19.8c0.6-0.5,1.4-0.9,1.8-0.9s2.3-0.2,2.9,1.2c0.6,1.4,2,4.7,2.1,5.1c0.2,0.3,0.3,0.7,0.1,1.2 c-0.2,0.5-0.3,0.7-0.7,1.1c-0.3,0.4-0.7,0.9-1,1.2c-0.3,0.3-0.7,0.7-0.3,1.4c0.4,0.7,1.8,2.9,3.8,4.7c2.6,2.3,4.9,3,5.5,3.4 c0.7,0.3,1.1,0.3,1.5-0.2c0.4-0.5,1.7-2,2.2-2.7c0.5-0.7,0.9-0.6,1.6-0.3c0.6,0.2,4,1.9,4.7,2.2c0.7,0.3,1.1,0.5,1.3,0.8 c0.2,0.3,0.2,1.7-0.4,3.2c-0.6,1.6-2.1,3.1-3.2,3.5c-1.3,0.5-2.8,0.7-9.3-1.9c-7-2.8-11.8-9.8-12.1-10.3c-0.3-0.5-2.8-3.7-2.8-7.1 C18.9,22.1,20.7,20.4,21.3,19.8z'/></svg>
  <span>WhatsApp me!</span>
</a>
<a class='button' href='url_is_here'>
  <svg class='line' viewBox='0 0 24 24' style='stroke:#fff; margin-right:12px;'><g transform='translate(2.000000, 2.500000)'><path d='M0.7501,0.7499 L2.8301,1.1099 L3.7931,12.5829 C3.8701,13.5199 4.6531,14.2389 5.5931,14.2359094 L16.5021,14.2359094 C17.3991,14.2379 18.1601,13.5779 18.2871,12.6899 L19.2361,6.1319 C19.3421,5.3989 18.8331,4.7189 18.1011,4.6129 C18.0371,4.6039 3.1641,4.5989 3.1641,4.5989'></path><line x1='12.1251' y1='8.2948' x2='14.8981' y2='8.2948'></line><path d='M5.1544,17.7025 C5.4554,17.7025 5.6984,17.9465 5.6984,18.2465 C5.6984,18.5475 5.4554,18.7915 5.1544,18.7915 C4.8534,18.7915 4.6104,18.5475 4.6104,18.2465 C4.6104,17.9465 4.8534,17.7025 5.1544,17.7025 Z'></path><path d='M16.4347,17.7025 C16.7357,17.7025 16.9797,17.9465 16.9797,18.2465 C16.9797,18.5475 16.7357,18.7915 16.4347,18.7915 C16.1337,18.7915 15.8907,18.5475 15.8907,18.2465 C15.8907,17.9465 16.1337,17.7025 16.4347,17.7025 Z'></path></g></svg>
  <span>Buy now!</span>
</a>

Thêm style='fill:#fff; margin-right:12px;' hoặc style='stroke:#fff; margin-right:12px;' thuộc tính để cung cấp cho biểu tượng SVG màu trắng.

Hai button cùng dòng:

Demo
Download

<div class='btnF'>
  <a class='button ln' href='url_is_here'>Demo</a>
  <a class='button' href='url_is_here'><i class='icon dl'></i>Download</a>
</div>

Liên kết tải xuống

file_name.zip
200kb

<div class='dlBox'>
  <!--[ Change data-text='...' atribute to add new file type ]-->
  <span class='fT' data-text='zip'></span>
  <div class='fN'>
    <!--[ File name ]-->
    <span>file_name.zip</span>
    <span class='fS'>200kb</span>
  </div>
  
  <!--[ Download link (change href='...' atribute to add link download) ]-->
  <a class='button' aria-label='Download' href='url_is_here' rel='noreferrer' target='_blank'><i class='icon dl'></i></a>
</div>

Với hình nền thay vì văn bản:

about_me.png
10kb

<div class='dlBox'>
  <!--[ Change data-text='...' atribute to add new file type ]-->
  <span class='fT lazy' data-text='zip' data-style='background-image: url(//3.bp.blogspot.com/.../title.png)'></span>
  <div class='fN'>
    <!--[ File name ]-->
    <span>about_me.png</span>
    <span class='fS'>10kb</span>
  </div>
  
  <!--[ Download link (change href='...' atribute to add link download) ]-->
  <a class='button' aria-label='Download' href='url_is_here' rel='noreferrer' target='_blank'><i class='icon dl'></i></a>
</div>

Hộp tải xuống có thời gian đếm ngược

about_me.png Ngày 22 tháng 03 năm 2023 165KB 1080×1080 .png

Trình phát nhạc

<div id='musicPlayer'></div>
<script>
  /*<![CDATA[*/
  /* Music Player Tracks */
  var playerTracks = [{
      name: "Track_title_here",
      artist: "Artist_names_here",
      cover: "https://raw.githubusercontent.com/.../name.jpg",
      source: "https://raw.githubusercontent.com/.../name.mp3"
    },
    {
      name: "Track_title_here",
      artist: "Artist_names_here",
      cover: "https://raw.githubusercontent.com/.../name.jpg",
      source: "https://raw.githubusercontent.com/.../name.mp3"
    },
    {
      name: "Track_title_here",
      artist: "Artist_names_here",
      cover: "https://raw.githubusercontent.com/.../name.jpg",
      source: "https://raw.githubusercontent.com/.../name.mp3"
    },
    {
      name: "Track_title_here",
      artist: "Artist_names_here",
      cover: "https://raw.githubusercontent.com/.../name.jpg",
      source: "https://raw.githubusercontent.com/.../name.mp3"
    }
  ];
  /*]]>*/
</script>

Lazy Youtube

  <!--[ Lazy youtube ]-->
<div class='ytShdw'>
  <div class='lazyYt' data-embed='Youtube_video_ID'>
    <div class='play'>
      <svg viewbox='0 0 213.7 213.7'><polygon class='t' points='73.5,62.5 148.5,105.8 73.5,149.1'></polygon><circle class='c' cx='106.8' cy='106.8' r='103.3'></circle></svg>
    </div>
  </div>
</div>

Trích dẫn nguồn

Nguồn:
www.chiasevip.com

<p class='pRef'>Nguồn:<br> www.chiasevip.com</p>

Trên đây các shortcode dùng cho template Plus UI. Nếu bạn có bất kỳ câu hỏi hoặc khiếu nại về bản quyền, hãy để lại ý kiến của bạn bên dưới để mình biết. Chúc bạn có một ngày học tập và làm việc hiệu quả.

Design by @New Code VN