Trang chủ

Cách Sử Dụng Giao Diện Trang


CÁCH SỬ DỤNG CÁC "CODE" CỦA GIAO DIỆN TRANG GIÁC NGỘ TÙY DUYÊN DÀNH CHO CỘNG TÁC VIÊN VÀ QUẢN TRỊ VIÊN

  • Tiêu Đề Danh Mục

    Heading <H1>

    <h1> Heading 1 </h1>

    Heading <H2>

    <h2> Heading 2 </h2>

    Heading <H3>

    <h3> Heading 3 </h3>

    Heading <H4>

    <h4> Heading 4 </h4>
    Heading <H5>
    <h5> Heading 5 </h5>
    Heading <H6>
    <h6> Heading 6 </h6>
  • Code Thông Dụng
    • Chữ in đậm (Bold) 
      <b> in đậm </b>
    • Chữ in nghiêng (Italic) 
      <i> in nghiêng </i>
    • Chữ gạch dưới (Underscore) 
      <u> gạch dưới </u>
    • Chữ gạch ngang (Striketrough) 
      <s> gạch ngang </s>
    • Chữ Nhỏ Nhất (Smallest) 
      <smallest> Nhỏ Nhất </smallest>
    • Chữ Bé Nhất (Small) 
      <small> bé nhất </small>
  • Viết Số Mũ và Số Dưới
    • số mũ trên: E = MC2 
      E = MC<sup>2</sup>
    • số mũ dưới: H2O 
      H <sub>2</sub>O
  • Tô Sáng :<mark> (highlight) 
    <mark>(Tô Sáng)</mark>
  • khung nội dung :<code> 
    <code>Nội dung</code>
  • kbd: <kbd> 
    <kbd>nội dung</kbd>
    • Code Link Liên Kết : Giác Ngộ Tùy Duyên.Com  (link liên kết)
       <a href="địa chỉ link" title="tiêu đề"> Nội dung liên kết </a>
    • Liên Kết ngoài: liên kết ngoài
      CÁCH SỬ DỤNG : 
      <a class='extL' href='dia-chi-link' rel='noreferrer' target='_blank'>tên liên kết ngoài</a>
      Phong cách thay thế: liên kết ngoài
      CÁCH SỬ DỤNG : 
      <a class='extL alt' href='dia-chi-link' rel='noreferrer' target='_blank'>tên liên kết ngoài</a>
    • Liên Kết Tải Xuống:
      app_GNTD.apk 163kb
      CÁCH SỬ DỤNG : 
      <!--[ Download Box ]-->
<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>Tên file.zip</span>
    <span class='fS'>200kb</span>
  </div>
 <!--[ Download link (change href='...' atribute to add link download) ]-->
    <a class='button' aria-label='Download' href='Link-liên-kết-Download' rel='noreferrer' target='_blank'><i class='icon dl'></i></a>
</div>
  • Trích Dẫn
    • Mẫu 1:

      Website GiacNgoTuyDuyen.com được thành lập vì mục đích phi lợi nhuận. Với Ước Nguyện bảo lưu và truyền bá chánh pháp, giúp cho mọi người hữu duyên được thân tâm an lạc và đạt được những gì mình mong muốn để giúp chúng sanh, đền đáp tứ trọng ân.!!

      GiacNgoTuyDuyen.Com
      CÁCH SỬ DỤNG : 
      <!--[ Blockquote ]-->
<blockquote>
  <p>nội dung</p>
  <span>tác giả</span>
</blockquote>
    • Mẫu 2:

      Website GiacNgoTuyDuyen.com được thành lập vì mục đích phi lợi nhuận. Với Ước Nguyện bảo lưu và truyền bá chánh pháp, giúp cho mọi người hữu duyên được thân tâm an lạc và đạt được những gì mình mong muốn để giúp chúng sanh, đền đáp tứ trọng ân.!!

      GiacNgoTuyDuyen.Com
      CÁCH SỬ DỤNG : 
      <!--[ Blockquote (Style 1) ]-->
<blockquote class='s1'>
  <p>nội dung</p>
  <span>tác giả</span>
</blockquote>
    • Mẫu 3:

      Website GiacNgoTuyDuyen.com được thành lập vì mục đích phi lợi nhuận. Với Ước Nguyện bảo lưu và truyền bá chánh pháp, giúp cho mọi người hữu duyên được thân tâm an lạc và đạt được những gì mình mong muốn để giúp chúng sanh, đền đáp tứ trọng ân.!!

      GiacNgoTuyDuyen.Com
      CÁCH SỬ DỤNG : 
      <!--[ Blockquote (Style 2) ]-->
<blockquote class='s2'>
  <p>nội dung</p>
  <span>tác giả</span>
</blockquote>
  • GHI CHÚ
    Tính năng này dùng để thêm thông tin quan trọng, câu cảnh báo hoặc câu nổi bật, có hai kiểu như hiển thị bên dưới.
    • Mẫu 1:

      Thông Tin!
      trang GiacNgoTuyDuyen được phát triễn nhờ tất cả các thành viên và đọc giả.

      CÁCH SỬ DỤNG : 
      <p class='note'>
<b>Thông Tin!</b><br/>
nội-dung
</p>
    • Mẫu 2:

      Cảnh Báo!
      trang GiacNgoTuyDuyen được phát triễn nhờ tất cả các thành viên và đọc giả.

      CÁCH SỬ DỤNG : 
      <p class='note wr'>
<b>Thông Tin!</b><br/>
nội-dung
</p>
  • BÁO ĐỘNG
    Giống như Note Block, điểm khác biệt duy nhất là Alert có phong cách khác và có nhiều biến thể hơn:
    • Mẫu 1:
      Mặt Định Một cảnh báo mặc định đơn giản - khách hàng sẽ hài lòng.
      CÁCH SỬ DỤNG : 
      <div class='alert'>
<b>Mặt Định</b>
Nội-dung
</div>
    • Mẫu 2:
      Phác Thảo Một cảnh báo phác thảo đơn giản - khách hàng nên hết sức cẩn thận.
      CÁCH SỬ DỤNG : 
      <div class='alert outline'>
<b>Phác Thảo</b>
Nội-dung
</div>
    • Mẫu 3.1:
      Thông tin!! Một cảnh báo thông tin đơn giản - việc có khách hàng là rất quan trọng.
      CÁCH SỬ DỤNG : 
      <div class='alert info'>
<b>Thông Tin</b>
Nội-dung
</div>
    • Mẫu 3.2:
      Thông tin!! Một cảnh báo thông tin đơn giản - việc có khách hàng là rất quan trọng.
      CÁCH SỬ DỤNG : 
      <div class='alert info outline'>
<b>Lỗi!</b>
Nội-dung
</div>
    • Mẫu 4.1:
      Cảnh báo!!! Một cảnh báo đơn giản - khách hàng nên hết sức cẩn thận.
      CÁCH SỬ DỤNG : 
      <div class='alert warning'>
<b>Cảnh Báo</b>
Nội-dung
</div>
    • Mẫu 4.2:
      Cảnh báo!!! Một cảnh báo đơn giản - khách hàng nên hết sức cẩn thận.
      CÁCH SỬ DỤNG : 
      <div class='alert warning outline'>
<b>Cảnh Báo</b>
Nội-dung
</div>
    • Mẫu 5.1:
      Thành công! Một cảnh báo đơn giản - khách hàng nên hết sức cẩn thận.
      CÁCH SỬ DỤNG : 
      <div class='alert success'>
<b>Thành công!</b>
Nội-dung
</div>
    • Mẫu 5.2:
      Thành công! Một cảnh báo đơn giản - khách hàng nên hết sức cẩn thận.
      CÁCH SỬ DỤNG : 
      <div class='alert success outline'>
<b>Thành công!</b>
Nội-dung
</div>
    • Mẫu 6.1:
      Lỗi! Một cảnh báo lỗi đơn giản - đó thực sự là một điều khó chịu.
      CÁCH SỬ DỤNG : 
      <div class='alert error'>
<b>Lỗi!</b>
Nội-dung
</div>
    • Mẫu 6.2:
      Lỗi! Một cảnh báo lỗi đơn giản - đó thực sự là một điều khó chịu.
      CÁCH SỬ DỤNG : 
      <div class='alert error outline'>
<b>Lỗi!</b>
Nội-dung
</div>
  • THÔNG BÁO
    Thông Báo Nội Dung Văn Bản

    CÁCH SỬ DỤNG : 
    <fieldset class="important">
<legend>
<font color="red">
<b>Thông Báo</b>
</font>
</legend>
  <font color="blue">
  Nội Dung Văn Bản
  </font>
  </fieldset>
  • Ngắt đoạn <hr> (Dấu chấm)
    Ba dấu chấm có thể được sử dụng để phân tách các đoạn văn và cung cấp khoảng cách như sau:

    CÁCH SỬ DỤNG : 

     <hr/>
  • BẢNG (TABLE)
    TITLE 1 TITLE 2 TITLE 3
    Entry 1 Entry 2 Entry 3
    Entry 1 Entry 2 Entry 3
    Entry 1 Entry 2 Entry 3
    CÁCH SỬ DỤNG : 
    <table id='gntd-tab'>
  <thead>
    <tr>
      <th>TITLE 1</th>
      <th>TITLE 2</th>
      <th>TITLE 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Entry 1</td>
      <td>Entry 2</td> 
      <td>Entry 3</td>
    </tr>
      <tr>
      <td>Entry 1</td>
      <td>Entry 2</td> 
      <td>Entry 3</td>
    </tr>
      <tr>
      <td>Entry 1</td>
      <td>Entry 2</td> 
      <td>Entry 3</td>
    </tr>
  </tbody>
</table>
  • Nút Liên Kết (Button)
    • Mẫu :
      mẫu 1 mẫu 2 mẫu 3 mẫu 4 
      <a class='button' href='link-liên-kết'>Mẫu 1</a>
<a class='button ln' href='link-liên-kết'>Mẫu 2</a>
<a class='button' href='link-liên-kết'><i class='icon dl'></i>Mẫu 3</a>
<a class='button' href='link-liên-kết'><i class='icon demo'></i>Mẫu 4</a>
  • Công cụ đánh dấu cú pháp
    Được sử dụng để xác định các dòng mã máy tính (HTML, CSS, Javascript, v.v.) trong bài đăng. 
    nội dung
    <!-- đây là ví dụ về CSS -->                
  .post-body pre {
     background-color: #333;
     border-left: 5px solid #009688;
     padding: 0; 
     margin: .5em auto; 
   }
    <!-- đây là ví dụ về HTML -->              
  <!DOCTYPE html>
  <html>
  <head>
  ...
  </head>
  </html>
    <!-- đây là ví dụ về JS --> 
  if (true){
      let domain = "giacngotuyduyen.com";
  }

  // Lỗi vì biến domain không tồn tại
  console.log(domain);
  
    <!-- đây là ví dụ về PHP --> 
  #include 
  using namespace std;

  int main() {
      cout << "Hello world !";
      return 0;
  }
    CÁCH SỬ DỤNG : 
    <pre data-comment='.html' data-source='nội dung chú thích'><code>Nội dung </code></pre>

    Bạn có thể đổi tên ".html" theo loại mã bạn đang viết. "Class" có sẵn bao gồm: .html, .css, .js, .php.

    Ví Dụ :

    <pre data-comment='.html' data-source='nội dung chú thích'><code>Nội dung </code></pre>
<pre data-comment='.css' data-source='nội dung chú thích'><code>Nội dung </code></pre>
<pre data-comment='.js' data-source='nội dung chú thích'><code>Nội dung </code></pre>
<pre data-comment='.php' data-source='nội dung chú thích'><code>Nội dung </code></pre>
    Nó cũng có thể không có bất kỳ "class"  nào.
    Ví dụ :
    <pre><code>Nội dung code</code></pre>
  • Khung Chứa Nội Dung : Copy, Download 
    nội dung viết ở đây

    CÁCH SỬ DỤNG : 

      
    <div class='pre nb' data-text='typecode' data-file='filename' data-lang='fileformat' data-time='true' data-download='true' data-copy='true' data-view='true'>
    <pre>
       nội dung viết ở đây
    </pre>
  </div>
    Trong đó:
    • data-text là loại code, ví dụ: CSS, HTML hoặc JavaScript
    • data-file là tên tải xuống của File
    • data-lang là format của file, ví dụ: .css, .js, .html, .txt
    • data-time là đếm ngược tải xuống true or false
    • data-download là hiển thị nút tải xuống true or false
    • data-copy là hiển thị nút copy true or false
    • data-view là hiển thị nút preview true or false

  • Sử Dụng MultiTabs
    Được sử dụng để nhóm nhiều khối mã lại với nhau. 
    Nội Dung Tab1
    Nội Dung Tab2
    Nội Dung Tab3
    Nội Dung Tab4

    CÁCH SỬ DỤNG : 

    <div class='pre tabs'>
<!--[ Active function ]-->
  <input id='preT1-1' type='radio' name='preTab1' checked=''/>
  <input id='preT1-2' type='radio' name='preTab1'/>
  <input id='preT1-3' type='radio' name='preTab1'/>
  <input id='preT1-4' type='radio' name='preTab1'/>
<!--[ Header/title ]-->
  <div>
   <!--[ Change atribute data-text='...' to replace title ]-->
<label for='preT1-1' data-text='Tab 1'></label>
    <label for='preT1-2' data-text='Tab 2'></label>
    <label for='preT1-3' data-text='Tab 3'></label>
    <label for='preT1-4' data-text='Tab 4'></label>
  </div>
<!--[ Content ]-->
  <pre class='preC1-1' data-source='chú thích Tab1'><code>Nội Dung Tab1</code></pre>
  <pre class='preC1-2' data-source='chú thích Tab2'><code>Nội Dung Tab2</code></pre>
  <pre class='preC1-3' data-source='chú thích Tab3'><code>Nội Dung Tab3</code></pre>
  <pre class='preC1-4' data-source='chú thích Tab4'><code>Nội Dung Tab4</code></pre>
</div>
  • sử dụng Tabs (Nhiều Tab) trong bài đăng
    nội dung Tab1
    nội dung Tab2
    nội dung Tab3
    nội dung Tab4
    CÁCH SỬ DỤNG : 
    <div class='tabs stick'>
  <!--[ Active function ]-->
  <input id='tabT-1' type='radio' name='postTabs' checked=''>
  <input id='tabT-2' type='radio' name='postTabs'>
  <input id='tabT-3' type='radio' name='postTabs'>
  <input id='tabT-4' type='radio' name='postTabs'>

  <!--[ Tabs header/title ]-->
  <div>
    <!--[ Change atribute data-text='...' to replace tabs title ]-->
    <label for='tabT-1' data-text='Tiêu Đề Tab1'></label>
    <label for='tabT-2' data-text='Tiêu Đề Tab2'></label>
    <label for='tabT-3' data-text='Tiêu Đề Tab3'></label>
    <label for='tabT-4' data-text='Tiêu Đề Tab4'></label>
  </div>
  
  <!--[ Tabs content ]-->
  <div class='tabC-1'>
    nội dung Tab1
  </div>
  
  <!--[ Tabs content ]-->
  <div class='tabC-2'>
    nội dung Tab2
  </div>
  
  <!--[ Tabs content ]-->
  <div class='tabC-3'>
    nội dung Tab3
  </div>
  
  <!--[ Tabs content ]-->
  <div class='tabC-4'>
    nội dung Tab4
  </div>
</div>
  • Tabs (Nhiều Tab)

    Tạo nhiều tab với nội dung không giới hạn. Bạn có thể thêm bao nhiêu tab tùy thích

    Nội Dung Tab 1
    Nội Dung Tab 2
    Nội Dung Tab 3
    Nội Dung Tab 4
    CÁCH SỬ DỤNG : 
    <!-- Multi Tabs CSS-->
<fieldset class="gntdTab">
  <input id="tab1" name="mTab" type="radio" checked="checked"/>
  <label for="tab1">Tab 1</label> 
  <input id="tab2" name="mTab" type="radio"/>
  <label for="tab2">Tab 2</label>  
  <input id="tab3" name="mTab" type="radio"/>
  <label for="tab3">Tab 3</label>
  <input id="tab4" name="mTab" type="radio"/>
  <label for="tab4">Tab 4</label>  
  <div class="content">   
    <div class="tab1">Nội Dung Tab 1 </div>
    <div class="tab2">Nội Dung Tab 2</div>
    <div class="tab3">Nội Dung Tab 3</div>
     <div class="tab4">Nội Dung Tab 4</div>
  </div>
</fieldset>
  • Ẩn Hiện Nội Dung
    Được sử dụng để tạo các tiện ích tương tác mà người dùng có thể mở và đóng theo yêu cầu. Theo mặc định, tiện ích này được đóng, sẽ hiển thị nội dung trong đó khi người dùng nhấn nút lệnh. Bất kỳ nội dung nào cũng có thể được đưa vào tiện ích này.
    • Loại 1
      Tiêu Đề Nội Dung:

      Nội dung văn bản ở đây

      CÁCH SỬ DỤNG : 
      <details class='sp'>
  <summary data-show='Hiện' data-hide='Ẩn'>Tiêu Đề Nội Dung:</summary>
  <div>
    <p>Nội dung văn bản ở đây</p>
  </div>
</details>
    • Loại 2: Accordion 1
      Tiêu Đề Nội Dung

      Nội Dung viết ở đây

      CÁCH SỬ DỤNG : 
      <details class='ac'>
  <summary>Tiêu Đề Nội Dung</summary>
  <div>
    <p>Nội Dung viết ở đây</p>
  </div>
</details>
    • Loại 3: Accordion 2
      Tiêu Đề Nội Dung

      Nội dung viết ở đây

      CÁCH SỬ DỤNG : 
      <details class='ac alt'>
  <summary>Tiêu Đề Nội Dung</summary>
  <div>
    <p>Nội Dung viết ở đây</p>
  </div>
</details>
    • Loại 4: Kết hợp nhiều Accordion
      Tiêu Đề Nội Dung

      nội dung viết ở đây

      Tiêu Đề Nội Dung

      nội dung viết ở đây

      Tiêu Đề Nội Dung

      nội dung viết ở đây

      Tiêu Đề Nội Dung

      nội dung viết ở đây

      CÁCH SỬ DỤNG : 
      <div class='showH'>
  <details class='ac'>
    <summary>Tiêu Đề Nội Dung</summary>
    <div>
      <p>nội dung viết ở đây</p>
    </div>
  </details>
  <details class='ac'>
    <summary>Tiêu Đề Nội Dung</summary>
    <div>
      <p>nội dung viết ở đây</p>
    </div>
  </details>
  <details class='ac alt'>
    <summary>Tiêu Đề Nội Dung</summary>
    <div>
      <p>nội dung viết ở đây</p>
    </div>
  </details>
  <details class='ac alt'>
    <summary>Tiêu Đề Nội Dung</summary>
    <div>
      <p>nội dung viết ở đây</p>
    </div>
  </details>
</div>
  • Mục lục
    TOC (viết tắt của Table of Contents) giúp người dùng nhanh chóng điều hướng qua nội dung của trang web bằng cách cung cấp liên kết trực tiếp đến các phần khác nhau. Điều này đặc biệt hữu ích cho các bài viết dài hơn hoặc các trang có nhiều phần riêng biệt.

    Có hai cách để định nghĩa mục lục.

    Mục lục hướng dẫn sử dụng

    Sử dụng TOC thủ công rất phức tạp, bạn phải thêm idthuộc tính khác nhau vào mỗi thẻ tiêu đề và viết vào danh sách nội dung.

    Mục lục tự động

    Việc sử dụng Mục lục thủ công không hề dễ dàng, do đó chúng tôi cung cấp Mục lục tự động để tìm kiếm tất cả các tiêu đề trong bài đăng và điền vào danh sách nội dung theo cách có tổ chức.
    Mục Lục
    CÁCH SỬ DỤNG : 
    <details class='sp toc'>
  <summary data-show='Hiện Tất Cả' data-hide='Ẩn Tất Cả'>Mục Lục</summary>  
  <div class='aToc'></div>
</details>
    Để tự hiển thị tất cả :
    chỉ cần thay <details class='sp toc'> thành <details class='sp toc' oppen=''>

  • Bài Viết Liên Quan-Tự Động Ẩn Hiện

    Bài Viết liên Quan
    CÁCH SỬ DỤNG : 
    <details class='sp arp'>
  <summary data-show='Hiện' data-hide='Ẩn'>Bài Viết liên Quan</summary>  
  <div class='aRel'></div>
</details>

    Tốt để biết:

    • Tính năng này hiển thị danh sách các bài đăng có nhãn cụ thể.
    • Để chỉ định nhãn, hãy thêm thuộc tính vào phần tử data-label='My Label' to .aRel element.
    • Nếu thuộc tínhdata-labelkhông được chỉ định hoặc không có bài đăng nào có nhãn được chỉ định trong data-label, sau đó nó sẽ chuyển sang nhãn ngẫu nhiên từ bài đăng hiện tại nếu nó không được đặt trong bài đăng, nếu không thì sẽ chuyển sang nhãn ngẫu nhiên từ blog nếu được sử dụng trong trang.
    • Nó sẽ lọc ra bài đăng đang được xem.
    • Để thiết lập số lượng bài đăng tối đa, hãy thêm thuộc tính data-max-posts='6', trong đó 6 là số bài đăng tối đa.
  • Đoạn văn có chữ hoa đầu dòng

    Drop cap sẽ thay đổi kích thước chữ cái đầu tiên của đoạn văn sao cho nó hạ xuống một hoặc nhiều dòng. Nhiều loại phương tiện in ấn sử dụng drop cap như sách, tạp chí, báo, v.v. vì chúng có thể tăng thêm sức hấp dẫn về mặt thị giác.
    • Mẫu 1: Sử dụng class: dropCap hoặc strike.
      Thấy chúng sanh ghét ngỏ ganh hiền,
      Theo chế nhạo những người tu tỉnh.
      Tu không tu cũng không mời thỉnh,
      Mặc tình ai trọng-kỉnh hay chê.
      CÁCH SỬ DỤNG : 
       <span class="dropCap">C</span>hữ cái đầu
    • Mẫu 2 :
      Sử dụng class: chu-dau Thấy chúng sanh ghét ngỏ ganh hiền,
      Theo chế nhạo những người tu tỉnh.
      Tu không tu cũng không mời thỉnh,
      Mặc tình ai trọng-kỉnh hay chê. CÁCH SỬ DỤNG : 
       <span class="chu-dau">C</span>hữ cái đầu
  • Đoạn văn tham khảo sau
    Viết danh sách tài liệu tham khảo hoặc chú thích bên dưới bài đăng.

    Nguồn:
    www.giacngotuyduyen.com

    CÁCH SỬ DỤNG : 
     <p class='pRef'>Nguồn:<br/> www.giacngotuyduyen.com</p>
  • THƯ VIỆN ẢNH
    • Hình ảnh có bố cục dạng lưới
      tên-ảnh tên-ảnh tên-ảnh tên-ảnh
      CÁCH SỬ DỤNG : 
      <div class='psImg grImg'>
  <img alt='tên-ảnh' src='dia-chi-anh'/>
  <img alt='tên-ảnh' src='dia-chi-anh'/>
  <img alt='tên-ảnh' src='dia-chi-anh'/>
  <img alt='tên-ảnh' src='dia-chi-anh'/>
</div>
    • Hình ảnh có chức năng Hiển thị tất cả
      Được sử dụng để ẩn một số hình ảnh và sẽ hiển thị khi người dùng nhấp vào nút Hiển thị tất cả . Chức năng Hiển thị tất cả chỉ có thể được kích hoạt một lần, hình ảnh không thể ẩn lại khi bạn kích hoạt nó.
      tên-ảnh tên-ảnh tên-ảnh
      tên-ảnh
      tên-ảnh tên-ảnh tên-ảnh tên-ảnh tên-ảnh tên-ảnh
      CÁCH SỬ DỤNG : 
      <!--[ Images with Show All Function ]-->
<input hidden class='inImg' id='for-hideImage-1' type='checkbox'>
<div class='psImg hdImg'>
  <img alt='tên-ảnh' src='dia-chi-anh-1'/>
  <img alt='tên-ảnh' src='dia-chi-anh-2'/>
  <img alt='tên-ảnh' src='dia-chi-anh-3'/>
  <div class='btImg'>
    <!--[ Image acting as a button ]-->
    <img alt='tên-ảnh' src='dia-chi-anh-4'/>
    
    <!--[ Button to activate ]-->
    <label for='for-hideImage-1' aria-label='Show all images'>Hiển Thị Tất Cả</label>
  </div>
  <!--[ Hide the rest of images here ]-->
  <div class='psImg shImg'>
    <img alt='tên-ảnh' src='dia-chi-anh-5'/>
    <img alt='tên-ảnh' src='dia-chi-anh-6'/>
    <img alt='tên-ảnh' src='dia-chi-anh-7'/>
    <img alt='tên-ảnh' src='dia-chi-anh-8'/>
  </div>
</div>
    • Hình ảnh có bố cục cuộn
      Hình ảnh có bố cục cuộn thường đề cập đến một kỹ thuật thiết kế trong đó hình ảnh được hiển thị theo cách cuộn ngang hoặc dọc trong một vùng chứa. Cách tiếp cận này thường được sử dụng khi bạn có một bộ sưu tập hình ảnh có thể vượt quá không gian khả dụng trên màn hình và bạn muốn người dùng có thể cuộn qua chúng.
      tên-ảnh tên-ảnh tên-ảnh tên-ảnh
      CÁCH SỬ DỤNG : 
      <div class='glImg'>
  <img alt='tên-ảnh' src='dia-chi-anh'/>
  <img alt='tên-ảnh' src='dia-chi-anh'/>
  <img alt='tên-ảnh' src='dia-chi-anh'/>
  <img alt='tên-ảnh' src='dia-chi-anh'/>
</div>

      Đây là một kiểu bố cục cuộn khác nhưng nó chỉ hoạt động ở chế độ xem trên thiết bị di động. Vui lòng thử mở trang này trên thiết bị di động của bạn.
      tên-ảnh tên-ảnh tên-ảnh
      CÁCH SỬ DỤNG : 
      <div class='psImg scImg scrlH'>
  <img alt='tên-ảnh' src='dia-chi-anh'/>
  <img alt='tên-ảnh' src='dia-chi-anh'/>
  <img alt='tên-ảnh' src='dia-chi-anh'/>
  <img alt='tên-ảnh' src='dia-chi-anh'/>
</div>
  • YOUTUBE
    • Mẫu 1:

      Tải iframe sau khi nhấp vào nút phát, nếu không sẽ hiển thị hình ảnh thu nhỏ dưới dạng chỗ giữ chỗ được tải chậm bằng @aFarkas/lazysizes.

      CÁCH SỬ DỤNG : 
      <div class='lazyYt' data-embed='ID nhúng video YouTube'></div>

        Cách lấy  ID nhúng video youtube. Để lấy nó hãy truy cặp video YouTube, Nhấn vào  Share ( chia sẽ ), và lấy ID-nhúng (Như hình bên dưới).

    • Mẫu 2:
      Trì hoãn tải iframe bằng cách sử dụng@aFarkas/lazysizes.
      CÁCH SỬ DỤNG : 
      <div class='videoYt'>
<iframe class='lazyload' data-src='địa-chỉ-youtube-html://www...' title='YouTube video player' frameborder='0' allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share' referrerpolicy='strict-origin-when-cross-origin' allowfullscreen=''></iframe>
</div>
  • DANH SÁCH
    • Có số thứ Tự.
      1. One
      2. Two
      3. Three
      4. Four
      5. Five
      CÁCH SỬ DỤNG : 
      <ol>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
</ol>
    • không số thứ Tự.
      • One
      • Two
      • Three
      • Four
      • Five
      CÁCH SỬ DỤNG : 
      <ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
</ul>
  • TRÌNH PHÁT NHẠC
    Đang Phát

    0:00 0:00
    Lặp Lại
    Danh Sách Nhạc
    CÁCH SỬ DỤNG : 
    <script>
//<![CDATA[
// Để thêm nhạc bạn sao chép và chỉnh sửa bên trong đoạn array như sau
//   {
//     name: 'Tên-bài-hát',
//     artist: 'Tên-Ca-Sĩ,
//     img: 'Tên đường dẫn hình ảnh',
//     src: 'Tên đường dẫn theo bài nhạc',
//   }
let allMusic = [
    {
        name: 'Tên-bài-hát',
        artist: 'Tên-Ca-Sĩ',
        img: 'Thttps://cdn.jsdelivr.net/gh/ngylduy/storage/image/music-1.jpg',
        src: 'địa-chỉ-nhạc-1',
        id: 'm1'
    },
    {
        name: 'Tên-bài-hát',
        artist: 'Tên-Ca-Sĩ',
        img: 'Thttps://cdn.jsdelivr.net/gh/ngylduy/storage/image/music-2.jpg',
        src: 'địa-chỉ-nhạc-2',
        id: 'm2'
    },
    {
        name: 'Tên-bài-hát',
        artist: 'Tên-Ca-Sĩ',
        img: 'Thttps://cdn.jsdelivr.net/gh/ngylduy/storage/image/music-3.jpg',
        src: 'địa-chỉ-nhạc-3',
        id: 'm3'
    },
    {
        name: 'Tên-bài-hát',
        artist: 'Tên-Ca-Sĩ',
        img: 'Thttps://cdn.jsdelivr.net/gh/ngylduy/storage/image/music-4.jpg',
        src: 'địa-chỉ-nhạc-4',
        id: 'm4'
    },
    {
        name: 'Tên-bài-hátn',
        artist: 'Tên-Ca-Sĩ',
        img: 'Thttps://cdn.jsdelivr.net/gh/ngylduy/storage/image/music-5.jpg',
        src: 'địa-chỉ-nhạc-5',
        id: 'm5'
    },
    {
        name: 'Tên-bài-hát',
        artist: 'Tên-Ca-Sĩ',
        img: 'Thttps://cdn.jsdelivr.net/gh/ngylduy/storage/image/music-6.jpg',
        src: 'địa-chỉ-nhạc-6',
        id: 'm6'
    }
]; //]]>
</script>
<div class='music-box'>
	<div class='top-bar'>
		<i class='has-svg-icon music-more'></i>
		<span>Đang Phát</span>
		<i class='has-svg-icon music-horiz'></i>
	</div>
	<div class='img-area'>
		<img alt='' loading='lazy' src='' title='' />
	</div>
	<div class='song-details'>
		<p class='name'></p>
		<p class='artist'></p>
	</div>
	<div class='progress-area'>
		<div class='progress-bar'>
			<audio id='main-audio' src=''></audio>
		</div>
		<div class='song-timer'>
			<span class='current-time'>0:00</span>
			<span class='max-duration'>0:00</span>
		</div>
	</div>
  	<div class='controls'>
		<i class='has-svg-icon music-repeat' id='repeat-plist' title='Playlist looped'><span>Lặp Lại</span></i>
		<i class='has-svg-icon music-skippre' id='prev'></i>
		<div class='play-pause'>
			<i class='has-svg-icon music-play play'></i>
		</div>
		<i class='has-svg-icon music-skipnext' id='next'></i>
		<i class='has-svg-icon music-queue' id='more-music'></i>
	</div>
	<div class='slider_volumn'>
		<i class='has-svg-icon icon-volume-down' id='min-volume'></i>
		<input class='volume_slider' max='100' min='1' onchange='setVolume()' type='range' value='100' />
		<i class='has-svg-icon icon-volume-up' id='max-volume'></i>
	</div>
	<div class='music-list'>
		<div class='header-music'>
			<div class='row-music'>
				<i class='has-svg-icon list music-queuemenu'></i>
				<span>Danh Sách Nhạc</span>
			</div>
			<i class='has-svg-icon music-close' id='close'></i>
		</div>
		<ul>
		</ul>
	</div>
</div>
  • Code beakings news

    CÁCH SỬ DỤNG : 
    lt;div style="background-color: #ccc999; border-color: rgba(0, 0, 0, 0.1); border-radius: 7px; box-sizing: border-box; color: blue; font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 14px; line-height: 1.5rem; margin-bottom: 1rem; margin-top: 0px; max-height: 250px; overflow: auto; padding: 0.5rem 1rem;"><div style="position:relative;overflow:hidden;height:20px;" onmouseover="copyspeed=pausespeed"
onmouseout="copyspeed=memoryspeed">
  <div id="memoryscroller" style="position: absolute; left: -80px; top: 0px;">
  <nobr><script type="text/javascript" async="async" src="https://apis.google.com/js/plusone.js" gapi_processed="true" ></script>  
  <script type="text/javascript">
var nMaxPosts =10;
         var nWidth = 100;
         var nScrollDelay = 0;
         var sDirection = "left";
         var sOpenLinkLocation = "N";
         var sBulletChar = "| ॐ "
</script>
<script type="text/javascript">
function RecentPostsScrollerv2(json) {
var sHeadLines;
var sPostURL;
var objPost;
var sMoqueeHTMLStart;
var sMoqueeHTMLEnd;
var sPoweredBy;
var sHeadlineTerminator;
var sPostLinkLocation;
   try {
    sMoqueeHTMLStart = "\<MARQUEE behavior=\"scroll\" onmouseover=\"this.stop();\" onmouseout=\"this.start();\" ";
    if (nWidth) {
    sMoqueeHTMLStart = sMoqueeHTMLStart + " width = \"" + nWidth + "%\"";
   } else {
    sMoqueeHTMLStart = sMoqueeHTMLStart + " width = \"100%\"";
   }
   if (nScrollDelay) {
    sMoqueeHTMLStart = sMoqueeHTMLStart + " scrolldelay = \"" + nScrollDelay + "\"";
   }
   if (sDirection) {
    sMoqueeHTMLStart = sMoqueeHTMLStart + " direction = \"" + sDirection + "\"\>";
     if (sDirection == "left" || sDirection == "right") {
     sHeadlineTerminator = "  ";
    } else {
     sHeadlineTerminator = "\<br/\>";
    }
   }
   if (sOpenLinkLocation == "N") {
    sPostLinkLocation = " target= \"_blank\" ";
   } else {
    sPostLinkLocation = " ";
   }
   sMoqueeHTMLEnd = "\</MARQUEE\>"
    sHeadLines = "";
    for (var nFeedCounter = 0; nFeedCounter < nMaxPosts; nFeedCounter++) {
    var objPost = json.feed.entry[nFeedCounter];
     if (nFeedCounter == json.feed.entry.length) break;
     for (var nCounter = 0; nCounter < objPost.link.length; nCounter++) {
     if (objPost.link[nCounter].rel == 'alternate') {
      sPostURL = objPost.link[nCounter].href;
      break;
     }
    }
    sHeadLines = sHeadLines + "\<b\>" + sBulletChar + "\</b\> \<a " + sPostLinkLocation + " href=\"" + sPostURL + "\">" + objPost.title.$t + "\</a\>" +
sHeadlineTerminator;
   }
    if (sDirection == "left") {
    sHeadLines = sHeadLines + "  " + sPoweredBy;
   } else if (sDirection == "right") {
    sHeadLines = sPoweredBy + "  " + sHeadLines;
   } else if (sDirection == "up") {
    sHeadLines = sHeadLines + "\<br/\>" + sHeadLines;
   }
   document.write(sMoqueeHTMLStart + sHeadLines + sMoqueeHTMLEnd)
} catch (exception) {
   alert(exception);
}
}</script>
<script src="/feeds/posts/default?alt=json-in-script&callback=RecentPostsScrollerv2&max-results=10"
type="text/javascript"></script></nobr></div>  </div>  
  </div>
  • Chia Trang Bài Đăng
    BÁO HIẾU ĐẠO NHÀ
    Quảy đơm cúng tế lệ xưa nay,
    Sát vật trâu heo đứa mị bày.
    Kẻ mất cho ăn suy khó hiểu,
    Người còn bạc đãi lạ lùng thay.
    Cháu con báo hiếu theo nhà Phật,
    Cha mẹ qua đời thủ lễ chay.
    Trong sạch nghĩa nhân vầy mới đáng,
    Hồn linh siêu thoát nhẹ cao bay.
    CÁCH SỬ DỤNG : 
    <div id='postSplit'>
page_1_contents
<!--nextpage-->
page_2_contents
<!--nextpage-->
page_3_contents
<!--nextpage-->
page_4_contents
</div>

<!--[ Split Post javascript ]-->
<script>
/*! Plus UI Javascript (split-post.js) | Authors: Deo Kumar, Armaan Kumar (https://fineshopdesign.com) | License: Unlicensed | Copyright (c) 2024 Fineshop Design */
"use strict";((e,t,a,i)=>{let{df:l,gId:s,mc:n,vw:o,eHTML:r}=e;o.iBt||l.then((()=>{let e=s(i.id);if(e){let a=e.innerHTML.split("\x3c!--nextpage--\x3e"),i=a.length,l=t.location.search.match(/[?&]page=(\d+)/),s=l&&l[1]?Number(l[1]):1;s>i&&(s=1);let o=a[s-1],d="<svg class='line' viewBox='0 0 24 24'><path d='M9.57 5.92993L3.5 11.9999L9.57 18.0699' stroke-miterlimit='10'></path><path d='M20.5 12H3.67004' stroke-miterlimit='10'></path></svg>",p="<svg class='line' viewBox='0 0 24 24'><path d='M14.4301 5.92993L20.5001 11.9999L14.4301 18.0699' stroke-miterlimit='10'></path><path d='M3.5 12H20.33' stroke-miterlimit='10'></path></svg>";o+="<div class='blogN numP'>",o+=`<div class='nPst' data-text='Trang ${s} của ${i}:'></div>`,s-1==0&&(o+=`<div class='nwLnk nPst'>${d}</div>`);for(let e=1;e<=i;e++)e===s?o+=`<div class='nPst' data-text='${e}'></div>`:e===s-1?o+=`<a class='nwLnk' href='?page=${e}' rel='nofollow noreferrer noopener' aria-label='${r(n.previous,!0,!1)}' data-text='${e}'>${d}</a>`:e===s+1?o+=`<a class='olLnk' href='?page=${e}' rel='nofollow noreferrer noopener' aria-label='${r(n.next,!0,!1)}' data-text='${e}'>${p}</a>`:e>=s-3&&e<=s+3||1===e||e===i?o+=`<a href='?page=${e}' rel='nofollow noreferrer noopener' aria-label='Page ${e}' data-text='${e}'></a>`:(e===s-4||e===s+4)&&(o+="<div class='nPst' data-text='...'></div>");s+1>i&&(o+=`<div class='olLnk nPst'>${p}</div>`),o+="</div>",e.innerHTML=o}else console.warn(`Split post element with id '${i.id}' does not exist in document while split-post.js is used!`)}))})(PU,window,document,{id:"postSplit"});
</script>
  • ngày giờ
    CÁCH SỬ DỤNG : 
    <div class="lich">
      <div id="days"></div>
      <div id="dates"></div>
      <div id="times"></div>
</div>

<style>
.lich{
padding:20px;
background:#f1f1f1;
border-radius:10px;
font-size:30px;
border:2px solid #999;
}
</style>

<script>
window.onload = setInterval(clock,1000);
function clock()
{
var d = new Date();
var date = d.getDate();
var month = d.getMonth();
var montharr =["Tháng 1","Tháng 2","tháng 3","Tháng 4","Tháng 5","Tháng 6","Tháng 7","Tháng 8","Tháng 9","Tháng 10","tháng 11","Tháng 12"];
month=montharr[month];
var year = d.getFullYear();
var day = d.getDay();
var dayarr =["Chủ Nhật","Thứ 2","Thứ 3","Thứ 4","Thứ 5","Thứ 6","Thứ 7"];
day=dayarr[day];
var hour =d.getHours();
var min = d.getMinutes();
var sec = d.getSeconds();
document.getElementById("days").innerHTML=day;
document.getElementById("dates").innerHTML=date+" "+month+" "+year;
document.getElementById("times").innerHTML=hour+":"+min+":"+sec;
}
</script>
  • hiệu ứng trái tim khi nhấp chuột cho Blogspot CÁCH SỬ DỤNG : 
    <script type='text/javascript'>
//<![CDATA[
!function(e,t,a){function n(){c(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"),o(),r()}function r(){for(var e=0;e<d.length;e++)d[e].alpha<=0?(t.body.removeChild(d[e].el),d.splice(e,1)):(d[e].y--,d[e].scale+=.004,d[e].alpha-=.013,d[e].el.style.cssText="left:"+d[e].x+"px;top:"+d[e].y+"px;opacity:"+d[e].alpha+";transform:scale("+d[e].scale+","+d[e].scale+") rotate(45deg);background:"+d[e].color+";z-index:99999");requestAnimationFrame(r)}function o(){var t="function"==typeof e.onclick&&e.onclick;e.onclick=function(e){t&&t(),i(e)}}function i(e){var a=t.createElement("div");a.className="heart",d.push({el:a,x:e.clientX-5,y:e.clientY-5,scale:1,alpha:1,color:s()}),t.body.appendChild(a)}function c(e){var a=t.createElement("style");a.type="text/css";try{a.appendChild(t.createTextNode(e))}catch(t){a.styleSheet.cssText=e}t.getElementsByTagName("head")[0].appendChild(a)}function s(){return"rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"}var d=[];e.requestAnimationFrame=function(){return e.requestAnimationFrame||e.webkitRequestAnimationFrame||e.mozRequestAnimationFrame||e.oRequestAnimationFrame||e.msRequestAnimationFrame||function(e){setTimeout(e,1e3/60)}}(),n()}(window,document);
//]]>
</script>
  • Hình ảnh đại diện cho bài viết, không hiển thị khi truy cập CÁCH SỬ DỤNG :
    Thêm đoạn code dưới vào phần html của bài viết 
      

<img src="https://địa chỉ hình ảnh" style="display: none;" />
    • Cách Sử Dụng Giao Diện Trang

    Đánh giá bài viết

    4.98/32 rates

    Đăng nhận xét

    Cảm ơn Đạo Hữu đã đóng góp. Chúc Đạo Hữu một ngày an lạc! A Di Đà Phật