Các Shortcode để viết bài từ Template Median UI phần 2

Mục lục thủ công

Table of Content (TOC) sẽ được thêm tự động theo thẻ H1 - H6 như bạn có thể thấy phía bên phải của bài viết này. Tuy nhiên bạn cũng có thể thêm tay nếu không muốn nó tự động hiển thị tất cả.

Với cách thủ công này bạn cần thêm id=... trên mỗi thẻ tiêu đề, chẳng hạn như <h2 id="Blockquote">

<details class="sp toc" open="">
  <summary data-show="Hiện" data-hide="Ẩn">Contents</summary>  
  <div class="toC">
    <ol>
      <li><a href="#Image_with_Caption_and_Auto_Lightbox">Image with Caption</a></li>
      <li><a href="#Manual_Related_Post">Manual Related Post</a></li>
      <li><a href="#Post_Break">Post Break</a></li>
      <li><a href="#Blockquote">Blockquote</a></li>
    </ol>

    <!--[ Sample with subheading ]-->
    <p>With sub heading</p>
    <ol>
      <li><a href="javascript:;">Heading title</a>
        <ol>
          <li><a href="javascript:;">Subheading 1</a></li>
          <li><a href="javascript:;">Subheading 2</a></li>
          <li><a href="javascript:;">Subheading 3</a></li>
        </ol>
      </li>
    </ol>
  </div>
</details>
<style>
  .fixH {display: none !important;}
</style>

Demo

Contents

Image with Caption
Manual Related Post
Post Break
Blockquote

With sub heading

Heading_title

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

Mục lục này nó cũng sẽ lấy tự động từ các thẻ H1 - H6, tuy nhiên bán tự động vì phải thêm code vào vị trí muốn hiển thị.

<details class='sp toc'>
  <summary data-show='Hiện' data-hide='Ẩn'>Table of Contents</summary>  
  <div class='toC' id='toContent'></div>
</details>
<!--[ Script to activate ToC ]-->
<script>document.addEventListener('DOMContentLoaded', () =>
  new TableOfContents({
      from: document.querySelector('#postBody'),
      to: document.querySelector('#toContent')
  }).generateToc()
);</script>

Demo

Table of Contents

Thêm hình ảnh có chú thích
Hình ảnh với bố cục lưới
Nhiều hình ảnh được thu gọn
Hình ảnh với bố cục cuộn
Tab post
Tạo bài viết liên quan
Dấu ngắt đoạn
Thụt vào đầu dòng
Chữ to đầu dòng
Đoạn trích dẫn
Bảng
Mục lục thủ công
Mục lục bán tự động
Viết code
Ẩn hiện nội dung
Accordion / Toggle Menu
Ghi chú (note)
External Link
Button
Download Link
Lazy Youtube
Trích dẫn nguồn

Viết code

Muốn hiển thị được code ra bài viết bạn có thể làm bằng 3 cách. Cách thứ nhất là chèn code như thế này bằng thẻ <code>code</code>. Cách thứ 2 chúng ta sẽ làm như sau, tương ứng từng đoạn code cũng chính là cách nó hiển thị:

Tuy nhiên cần lưu ý phải chuyển < thành < và > thành > trước khi thêm vào.

<div class="pre preH"><pre>Code here</pre></div>

<div class="pre html"><pre>HTML here</pre></div>

<div class="pre js"><pre>JS here</pre></div>

<div class="pre css"><pre>CSS here</pre></div>

Ngoài ra còn một cách thứ 3 nữa là thêm Multi Tabs Code như sau:

<div class="pre tb">
  <!--[ Active function ]-->
  <input class="prei hidden" id="preT-1" type="radio" name="preTab" checked="" wfd-invisible="true">
  <input class="prei hidden" id="preT-2" type="radio" name="preTab" wfd-invisible="true">
  <input class="prei hidden" id="preT-3" type="radio" name="preTab" wfd-invisible="true">
  <!--[ 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" wfd-invisible="true">
    <pre>HTML here</pre>
  </div>
  <div class="preC-2">
    <pre>CSS here</pre>
  </div>
  <div class="preC-3" wfd-invisible="true">
    <pre>JS here</pre>
  </div>
</div>

CSS here

JS here

Ẩn hiện nội dung

<details class="sp notranslate">
  <summary data-show="Hiện" data-hide="Ẩn">Nội dung:</summary>
  <p>Đây là nội dung demo cho phần ẩn hiện nội dung. Tính năng này có sẵn ở Median UI 1.6.</p><div class="widget HTML" data-version="2" id="HTML02">
<div class="widget-content">
<script wfd-invisible="true">/*<![CDATA[*/ function insertAfter(tbh,tgt) {var prt = tgt.parentNode; if (prt.lastChild == tgt) {prt.appendChild(tbh);} else {prt.insertBefore(tbh,tgt.nextSibling);}} var tgt = document.getElementById('postBody'); var midAd02 = document.getElementById('HTML02'); var showAd02 = tgt.getElementsByTagName('p'); if (showAd02.length > 0) {insertAfter(midAd02,showAd02[20]);}; /*]]>*/</script>
</div>
</div>
</details>

Demo

Nội dung:

Đây là nội dung demo cho phần ẩn hiện nội dung. Tính năng này có sẵn ở Median UI 1.6.

Accordion / Toggle Menu

<div class="showH">
  <!--[ Accordion line 1 ]-->
  <details class="ac">
    <summary>Accordion line 1</summary>
    <div class="aC">
      <p>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.</p>
    </div>
  </details>
  
  <!--[ Accordion line 2 ]-->
  <details class="ac">
    <summary>Accordion line 2</summary>
    <div class="aC">
      <p>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.</p>
    </div>
  </details>
  
  <!--[ Accordion line 3 ]-->
  <details class="ac">
    <summary>Accordion line 3</summary>
    <div class="aC">
      <p>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.</p>
    </div>
  </details>
  
  <!--[ Accordion line 4 ]-->
  <details class="ac alt">
    <summary>Accordion line 4</summary>
    <div class="aC">
      <p>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.</p>
    </div>
  </details>
</div>

Demo

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

Ghi chú (note)

<p class="note notranslate">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.</p>

Warning!
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.

<p class="note wr notranslate"><b>Warning!</b><br>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.</p>

External Link

Một dấu hiệu để cho người dùng biết đó là 1 link out.

<a class="extL" href="javascript:;">Sample external link</a>

Demo

Sample external link

Button

<a class="button" href="javascript:;">Button</a>

Download

<a class="button ln" href="javascript:;"><i class="icon dl"></i>Download</a>

Download

<a class="button" href="javascript:;"><i class="icon dl"></i>Download</a>

Demo

<a class="button" href="javascript:;"><i class="icon demo"></i>Demo</a>

Demo Download

<div class="btnF">
  <a class="button ln" href="javascript:;">Demo</a>
  <a class="button" href="javascript:;"><i class="icon dl"></i>Download</a>
</div>

Download Link

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="javascript:;"><i class="icon dl"></i></a>
</div>

Lazy Youtube

Nhúng Youtube 1 cách dễ dàng và Lazy load khi kéo đến.

<div class="lazyYt" data-embed="us-ciisgjw0">
  <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>
<img class="lazy loaded" data-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuUSoqGLEl4ZXJ2sEcItNVQDm80WkIXrb4rT-29kUEnxQVJqrBASjlNh4u3MvK7emvCkreUNApf6QlrECAkI9-anY2uogSewnbF4Ur8jj3vz9A3Qd7y1ocqFCfdhNZ3HXvfl0X4HihYhnU/s1600/goomsite.PNG" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuUSoqGLEl4ZXJ2sEcItNVQDm80WkIXrb4rT-29kUEnxQVJqrBASjlNh4u3MvK7emvCkreUNApf6QlrECAkI9-anY2uogSewnbF4Ur8jj3vz9A3Qd7y1ocqFCfdhNZ3HXvfl0X4HihYhnU/s1600/goomsite.PNG" alt="Youtube video" lazied=""></div>

Trích dẫn nguồn

Dùng để trích dẫn nguồn ở cuối trang.

Nguồn:
www.ktexcel.blogspot.com

<p class="pRef">Nguồn:<br>www.ktexcel.blogspot.com</p>

Hoặc chèn link trực tiếp:

<p class='pRef' style='text-align: right'>Copyright © <a href='url_is_here' rel='noreferrer' target='_blank'>KTExcel.blogspot.com</a></p>

Máy nghe nhạc

Máy nghe nhạc có thể được sử dụng để phát các bài hát bằng các tệp âm thanh, tức là MP3.

Định dạng viết:

<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>

Hộp tải xuống đếm ngược

Tính năng này sẽ hiển thị đếm ngược trước khi người dùng tải xuống bất kỳ tệp nào.

Tính năng này yêu cầu liên kết tải xuống trực tiếp của các tệp đám mây. Bạn có thể sử dụng Google Drive để nhận liên kết tải xuống trực tiếp của tệp.

Với hình ảnh:

Add-in KTExcel.PNG 09, thg 09, 2023 0.5MB 1920×1080 .PNG

Không có hình ảnh:

about_me.webp 09, thg 09, 2023 3.05MB 1920×1080 .webp

Định dạng viết:

<div class='dldCo' id='download1'>
  <div class='dldBx'>
    <div class='dldTp'>
      <div class='dldIm' data-text='.png' style='background-image:url(image_url_here)'>
        <svg class='dldSv' viewBox='0 0 34 34'>
          <circle class='b' cx='17' cy='17' r='15.92' />
          <circle class='c dldPg' cx='17' cy='17' r='15.92' />
        </svg>
      </div>
      <div class='dldIn'>
        <span data-text='Name'>Music_Wallpaper.png</span>
        <span data-text='Category'>Music</span>
        <span data-text='Size'>3.05MB</span>
        <span data-text='Resolution'>1920×1080</span>
        <span data-text='Extension'>.png</span>
      </div>
    </div>
    <button onclick='download('#', '10', 'false', '#download1')' class='dldBt dldDl'><svg class='line' viewBox='0 0 24 24'><polyline points='8 17 12 21 16 17'/><line x1='12' x2='12' y1='12' y2='21'/><path d='M20.88 18.09A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.29'/></svg></button>
    <button class='dldBt dldRt'><svg class='line' viewBox='0 0 24 24'><polyline points='23 4 23 10 17 10'/><path d='M20.49 15a9 9 0 1 1-2.12-9.36L23 10'/></svg></button>
  </div>
  <div class='dldSl'>
    <div class='dldMe'></div>
  </div>
</div>

Bình luận

Các Shortcode để viết bài từ Template Median UI phần 2

Mục lục thủ công

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

Viết code

Ẩn hiện nội dung

Accordion / Toggle Menu

Ghi chú (note)

External Link

Button

Download Link

Lazy Youtube

Trích dẫn nguồn

Máy nghe nhạc

Hộp tải xuống đếm ngược

Đăng nhận xét

Chia sẻ một loa cho nhiều máy tính trong mạng LAN

Top các phần mềm điều khiển máy tính từ xa

Hướng dẫn tạo máy ảo Hyper-V đơn giản nhất

Biến điện thoại thành smart tivi

Điều khiển máy tính từ xa bằng Radmin

Thông báo