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
1. Tiêu Đề Danh Mục
Heading <H1>
<h1> Heading 1 </h1>2. Code Thông Dụng
Heading <H2>
<h2> Heading 2 </h2>Heading <H3>
<h3> Heading 3 </h3>Minor heading <H4>
<h4> Heading 4 </h>Minor heading <H5>
<h5> Heading 5 </h5>Minor heading <H6>
<h6> Heading 6 </h6>3. Code Thông Dụng
<b> in đậm </b><i> in nghiêng </i><u> gạch dưới </u><s> gạch ngang </s><smallest> Nhỏ Nhất </smallest><small> bé nhất </small>4. Viết Số Mũ và Số Dưới
E = MC<sup>2</sup>
H <sub>2</sub>O5. Code Thông Dụng Khác
<a href="địa chỉ link" title="tiêu đề"> Nội dung liên kết </a><mark>(Tô Sáng)</mark>
<code>
<code>Nội dung code</code><kbd>kbd</kbd>
<var>var</var>
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/>6. Công cụ đánh dấu cú pháp
<!-- đâ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.net";
}
// Lỗi vì biến domain không tồn tại
console.log(domain);
<!-- đây là ví dụ về CODE -->
#include
using namespace std;
int main() {
cout << "Hello world !";
return 0;
}
<pre class="html"><code>Nội dung code</code></pre>Bạn có thể đổi tên "class" theo loại mã bạn đang viết. "Class" có sẵn bao gồm: html, css, js.
Ví Dụ :
<pre class="html"><code>Nội dung code</code></pre>
<pre class="css"><code>Nội dung code</code></pre>
<pre class="js"><code>Nội dung code</code></pre>
<pre class="code"><code>Nội dung code</code></pre>
Ví dụ :
<pre><code>Nội dung code</code></pre>7. 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>
- 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
8. Sử Dụng Table
- Tab 1
- Tab 2
- Tab 3
Nội dung Tab 1Nội dung Tab 2Nội dung Tab 3CÁCH SỬ DỤNG :
<div class='tabs syntax'>
<ul>
<li class='current'>Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>
<div class='content visible'>
<pre class="html"><code>nội dung Tab 1</code></pre>
</div>
<div class='content'>
<pre class="css"><code>nội dung Tab 2</code></pre>
</div>
<div class='content'>
<pre class="js"><code>nội dung Tab 3</code></pre>
</div>
</div>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 vì tiêu đề sẽ trượt (không phá hủy chế độ xem).
- Tab 1
- Tab 2
- Tab 3
- Tab 4
- Tab 5
- Tab 6
Nội dung tab (1st).
Nội dung tab (2nd).
Nội dung tab (3rd).
Nội dung tab (4rd).
Nội dung tab (5rd).
Nội dung tab (6rd).
CÁCH SỬ DỤNG :
<div class='tabs'>
<ul>
<li class='current'>Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
<li>Tab 4</li>
<li>Tab 5</li>
<li>Tab 6</li>
</ul>
<div class='content visible'>
Nội dung tab (1st).
</div>
<div class='content'>
Nội dung tab (2st).
</div>
<div class='content'>
Nội dung tab (3st).
</div>
<div class='content'>
Nội dung tab (4st).
</div>
<div class='content'>
Nội dung tab (5st).
</div>
<div class='content'>
Nội dung tab (6st).
</div>
</div> 9. Nút Button
Sử dụng class để thay đổi diện mạo và thuộc tính.
| Class | Cách Sử Dụng |
|---|---|
outline
|
Để tạo một nút với một dòng. |
round
|
Để tạo nút bo tròn góc |
download
|
Hiển thị biểu tượng tải xuống download |
demo
|
Hiển thị biểu tượng demo. |
CÁCH SỬ DỤNG:
A. Fill
Sử dụng màu nền với mã code là :
<button> Button 1</button><button class="download">Download 1</button><button class="demo">Demo 1 </button>Sử dụng màu nền với hiệu ứng bo tròn góc có code là :
<button class="round">Button round 1</button><button class="round download">Download round 1</button><button class="round demo">Demo round 1</button>B. Outline
Sử dụng không màu nền với mã code là :
<button class="outline">Button 2</button><button class="outline download">Download 2</button><button class="outline demo">Demo 2</button>Sử dụng không màu nền với hiệu ứng bo tròn góc có code là :
<button class="outline round">Button round 2</button><button class="outline round download">Download round 2</button><button class="outline round demo">Demo round 2</button>C. BUTTON KHÁC
<div id="giacngotuyduyen-button">
<a href="https://www.giacngotuyduyen.com/" class="green demo-button" target="_blank" rel="nofollow">Xem mẫu</a>
<a href="httpshttps://www.giacngotuyduyen.com/" class="orange download-button" target="_blank" rel="nofollow">Tải về</a>
<a href="httpshttps://www.giacngotuyduyen.com/" class="blue buy-button" target="_blank" rel="nofollow">Mua ngay</a>
</div>
10. Hộp Thông Báo
Viết văn bản ở đây. Hộp sẽ có màu mặc định.
Viết văn bản ở đây. Hộp sẽ có màu xanh lá cây.
Viết văn bản ở đây. Hộp sẽ có màu xanh lam.
Viết văn bản ở đây. Hộp sẽ có màu đỏ
Viết văn bản ở đây. Hộp sẽ có màu vàng.
CÁCH SỬ DỤNG :
Chọn một trong các mã sau theo màu sắc.
<div class="box">Văn bản ở đây. Hộp sẽ có màu mặc định.</div><div class="box green">Văn bản ở đây. Hộp sẽ có màu xanh lá cây.</div><div class="box blue">Văn bản ở đây. Hộp sẽ có màu xanh lam.</div><div class="box red">Văn bản ở đây. Hộp sẽ có màu đỏ.</div><div class="box yellow">Văn bản ở đây. Hộp sẽ có màu vàng.</div>11. Trích Dẫn Khối
Mẫu 1 : Không có tác giả
NỘI DUNG TRÍCH DẪNMẫu2 : Kèm tên tác giả
NỘI DUNG TRÍCH DẪN
CÁCH SỬ DỤNG : ( MẪU 1 )
<blockquote>NỘI DUNG TRÍCH DẪN MẪU 1</blockquote>CÁCH SỬ DỤNG : ( MẪU 2 )
<blockquote>NỘI DUNG TRÍCH DẪN MẪU 2
<footer>Tác Giả</footer>
</blockquote>12. Thư Viện Ảnh
Rất nhiều hình ảnh theo phong cách băng chuyền "carousel". Rất giống với phong cách thư viện ảnh Instagram. Để điều hướng, hãy cuộn (di trên thiết bị di động) hoặc nhấp vào mũi tên (di trên máy tính để bàn).Số lượng hình ảnh có thể được thêm vào là không giới hạn.
Chú Thích Ảnh
CÁCH SỬ DỤNG :
<div class='gallery carousel'>
<div class='carousel-inner'>
<img alt='Title 1' src='IMG URL HERE 1' title='Title 1'/>
<img alt='Title 2' src='IMG URL HERE 2' title='Title 2'/>
<img alt='Title 3' src='IMG URL HERE 3' title='Title 3'/>
<!-- .... v.v. đến vô tận ... -->
</div>
<div class='caption'>Chú Thích Ảnh</div>
</div>Nếu bạn không muốn sử dụng chú thích , hãy xóa phần này:
<div class='caption'>Chú Thích Ảnh</div>"swipe"Nhiều hình ảnh với phong cách vuốt như câu chuyện trên Instagram hoặc YouTube ngắn . Rất giống với phong cách thư viện Instagram. Nhẹ hơn băng chuyền.
Chú Thích Ảnh
CÁCH SỬ DỤNG :
<div class='gallery swipe'>
<div class='swipe-inner'>
<img alt='Title 1' src='IMG URL HERE 1' title='Title 1'/>
<img alt='Title 2' src='IMG URL HERE 2' title='Title 2'/>
<img alt='Title 3' src='IMG URL HERE 3' title='Title 3'/>
<!-- .... v.v. đến vô tận ... -->
</div>
<div class='caption'>Chú Thích Ảnh</div>
</div>Nếu sử dụng hình ảnh dọc/dọc, hãy thêm "class" portrait vào mã . Ví Dụ:
<div class='gallery swipe portrait'>
....
<!-- phần còn lại của mã là như nhau-->
....
</div>
Nếu bạn không muốn sử dụng chú thích , hãy xóa phần này:
<div class='caption'>chú thích ảnh</div>"Grid"Hình ảnh sẽ được hiển thị dưới dạng lưới. Nếu có nhiều hơn 4 ảnh, sẽ có chức năng Show All (Mở rộng) tự động thêm vào. Tương tự với phong cách thư viện Facebook.
Chú Thích Ảnh
CÁCH SỬ DỤNG : Không dùng thư viện LightgalleryJS
<div class='gallery grid'>
<div class='grid-inner'>
<img alt='Title 1' src='IMG URL HERE 1' title='Title 1'/>
<img alt='Title 2' src='IMG URL HERE 2' title='Title 2'/>
<img alt='Title 3' src='IMG URL HERE 3' title='Title 3'/>
<!-- .... v.v. đến vô tận ... -->
</div>
<div class='caption'>Chú Thích Ảnh</div>
</div>CÁCH SỬ DỤNG : dùng thư viện LightgalleryJS
<div class='gallery grid'>
<div class='grid-inner'>
<div class="separator" style="clear: both;">
<a href="địa chỉ ảnh 1" style="display: block; padding: 1em 0px; text-align: center;">
<img alt='Title 1' src='địa chỉ ảnh 1' title='Title 1'/>
</a></div>
<div class="separator" style="clear: both;">
<a href="địa chỉ ảnh 2" style="display: block; padding: 1em 0px; text-align: center;">
<img alt='Title 2' src='địa chỉ ảnh 2' title='Title 2'/>
</a></div>
<div class="separator" style="clear: both;">
<a href="địa chỉ ảnh 3" style="display: block; padding: 1em 0px; text-align: center;">
<img alt='Title 3' src='địa chỉ ảnh 3' title='Title 3'/>
</a></div>
<!-- .... v.v. đến vô tận ... -->
</div>
<div class='caption'>Chú Thích Ảnh</div>
</div>Nếu bạn không muốn sử dụng chú thích , hãy xóa phần này:
<div class='caption'>chú thích ảnh</div>13. Accordion
Ẩn hoặc hiển thị nội dung. Thường thấy trong phần FAQ ( Câu hỏi thường gặp.).
Tiêu Đề Nội Dung
Nội dung cần hiển thịCÁCH SỬ DỤNG :
<details class='accordion'>
<summary>Chú Thích</summary>
Nội dung cần hiển thị
</details>Nếu bạn muốn mở theo mặc định thì thêm đoạn mã sau :
Tiêu Đề Nội Dung
Nội dung cần hiển thị<details class='accordion' open='open'>
....
<!-- phần còn lại của mã là như nhau -->
....
</details>14. Hộp Ẩn Hiện "Spoiler"
Tiêu Đề Hộp Nội Dung
Nội dung hiển thịCÁCH SỬ DỤNG :
<details class='spoiler'>
<summary>Tiêu Đề Hộp Nội Dung</summary>
Nội dung hiển thị
</details>15. YouTube Lazy Load
Video sẽ tải sau hoạt động nhấp chuột.
CÁCH SỬ DỤNG :
<div class='youtubelazy' data-embed='ID nhúng videos 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).
16. Dropcaps Chữ Cái Đầu
Để làm cho chữ cái đầu tiên lớn hơ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="drop">T</span> hấy chúng sanh ghét ngỏ ganh hiền,<br/>
Theo chế nhạo những người tu tỉnh.
<br/>
Tu không tu cũng không mời thỉnh,
<br/>
Mặc tình ai trọng-kỉnh hay chê.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">T</span> hấy chúng sanh ghét ngỏ ganh hiền,<br/>
Theo chế nhạo những người tu tỉnh.
<br/>
Tu không tu cũng không mời thỉnh,
<br/>
Mặc tình ai trọng-kỉnh hay chê.
17. 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 |
| Entry 1 | Entry 2 | Entry 3 |
CÁCH SỬ DỤNG :
<table>
<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>Để tạo một bảng rộng đáp ứng và có thể điều khiển được, hãy bọc nó bằng thẻ sau.
<div class="table">
<table>
....
....
....
</table>
</div>18. Danh Sách Theo Số Thứ Tự
Có số thứ tụ.
- One
- Two
- Three
- Four
- Five
CÁCH SỬ DỤNG :
<ol>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
</ol>19. Danh Sách Không Có Số Thứ Tự
Không có 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>20. Trình Phát Nhạc
0:00
0:00
repeat
Music list
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 nhạc',
// artist: 'Nghệ sĩ',
// img: 'Tên đường dẫn hình ảnh',
// src: 'Tên đường dẫn theo bài nhạc',
// }
let allMusic = [
{
name: 'Harley Bird - Home',
artist: 'Jordan Schor',
img: 'https://cdn.jsdelivr.net/gh/ngylduy/storage/image/music-1.jpg',
src: 'https://ia801400.us.archive.org/27/items/music_20210917/music-1.mp3',
id: 'm1'
},
{
name: 'Ikson Anywhere – Ikson',
artist: 'Audio Library',
img: 'https://cdn.jsdelivr.net/gh/ngylduy/storage/image/music-2.jpg',
src: 'https://ia801400.us.archive.org/27/items/music_20210917/music-2.mp3',
id: 'm2'
},
{
name: 'Beauz & Jvna - Crazy',
artist: 'Beauz & Jvna',
img: 'https://cdn.jsdelivr.net/gh/ngylduy/storage/image/music-3.jpg',
src: 'https://ia801400.us.archive.org/27/items/music_20210917/music-3.mp3',
id: 'm3'
},
{
name: 'Hardwind - Want Me',
artist: 'Mike Archangelo',
img: 'https://cdn.jsdelivr.net/gh/ngylduy/storage/image/music-4.jpg',
src: 'https://ia801400.us.archive.org/27/items/music_20210917/music-4.mp3',
id: 'm4'
},
{
name: 'Jim - Sun Goes Down',
artist: 'Jim Yosef x Roy',
img: 'https://cdn.jsdelivr.net/gh/ngylduy/storage/image/music-5.jpg',
src: 'https://ia801400.us.archive.org/27/items/music_20210917/music-5.mp3',
id: 'm5'
},
{
name: 'Lost Sky - Vision NCS',
artist: 'NCS Release',
img: 'https://cdn.jsdelivr.net/gh/ngylduy/storage/image/music-6.jpg',
src: 'https://ia801400.us.archive.org/27/items/music_20210917/music-6.mp3',
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>
21. Nội Dung Ngẫu Nhiên (random) sau mỗi lần load lại trang
CÁCH SỬ DỤNG :
<script type="text/javascript">var index = 0; quotes = new Array(); quotes[1] = "Nội dung đoạn Text 1";
quotes[2] = "Nội dung đoạn Text 2";
quotes[3] = "Nội dung đoạn Text 3";
quotes[4] = "Nội dung đoạn Text 4";
quotes[5] = "Nội dung đoạn Text 5";
quotes[6] = "Nội dung đoạn Text 6";
index = Math.random()*(quotes.length); index = Math.floor(index); function rotator() { if (index == quotes.length) {index = 0;} document.getElementById("rotation").innerHTML = quotes[index]; index++; setTimeout("rotator();",5000); } </script>
<div id="rotation" style="width:500px;height:50px;background:#DDD;padding:5px 5px 5px 5px;margin:0px auto"></div><script type="text/javascript">rotator();</script>
22. Nội Dung Ngẫu Nhiên(random) + Link - sau mỗi lần load lại trang
CÁCH SỬ DỤNG :
<script type="text/javascript">var links=['<a href="http://địa chỉ liên kết 1">Tên Nội Dung Liên Kết 1
</a>','<a href="http://địa chỉ liên kết 2">Tên Nội Dung Liên Kết 2
</a>','<a href="http://địa chỉ liên kết 3">Tên Nội Dung Liên Kết 3
</a>']; var key=Math.floor(Math.random()*1000000)%links.length; document.write('<div>'+links[key]+'</div>'); </script>
23. Div class
a. DIV Dạng Nét Liền
CHÈN NỘI DUNG VÀO ĐÂY
CÁCH SỬ DỤNG :
<div class="gntd1">CHÈN NỘI DUNG VÀO ĐÂY</div>
b. Dạng dấu chấm (dotted)
CHÈN NỘI DUNG VÀO ĐÂY
CÁCH SỬ DỤNG :
<div class="gntd2">CHÈN NỘI DUNG VÀO ĐÂY</div>
c. DIV Dạng Nét Đứt Dashed
CHÈN NỘI DUNG VÀO ĐÂY
CÁCH SỬ DỤNG :
<div class="gntd3">CHÈN NỘI DUNG VÀO ĐÂY</div>
d. Dạng Nét Đôi Double
CHÈN NỘI DUNG VÀO ĐÂY
CÁCH SỬ DỤNG :
<div class="gntd4">CHÈN NỘI DUNG VÀO ĐÂY</div>
e. Dạng Đường Rảnh Groove
CHÈN NỘI DUNG VÀO ĐÂY
CÁCH SỬ DỤNG :
<div class="gntd5">CHÈN NỘI DUNG VÀO ĐÂY</div>
f. Bo Tròn 4 Góc
CHÈN NỘI DUNG VÀO ĐÂY
CÁCH SỬ DỤNG :
<div class="gntd6">CHÈN NỘI DUNG VÀO ĐÂY</div>
24. Code Thông Báo Khác
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 Dòng 1
Nội Dung Văn Bản Dòng 2
</font>
</fieldset>
25. Nút Huy hiệu / Badge Buttons tròn, hoa văn 7 sắc cầu vòng
CÁCH SỬ DỤNG :
<style>
.circle{background:#fff;border-radius:100%;cursor:pointer;position:relative;width:12em;height:12em;overflow:hidden;transform:translateZ(0);margin:0 auto}
.circle h1{color:rgba(189,185,199,0);font-family:Lato, sans-serif;font-weight:900;font-size:1.6em;line-height:8.2em;text-align:center;text-transform:uppercase;-webkit-font-smoothing:antialiased;user-select:none;transition:color .8s ease-in-out}
.circle h1 a{color:rgba(189,185,199,0);text-decoration:none}
.circle:before,.circle:after{border-radius:100%;content:"";position:absolute;top:0;left:0;width:inherit;height:inherit;box-shadow:inset 10.6em 0 0 rgba(30,140,209,0.2), inset 0 10.6em 0 rgba(30,140,209,0.2), inset -10.6em 0 0 rgba(30,140,209,0.2), inset 0 -10.6em 0 rgba(30,140,209,0.2);transition:box-shadow .75s}
.circle:after{transform:rotate(45deg)}
.circle:hover:before,.circle:hover:after{box-shadow:inset .86em 0 0 rgba(255,0,0,0.5), inset 0 .86em 0 rgba(252,150,0,0.5), inset -.86em 0 0 rgba(0,255,0,0.5), inset 0 -.86em 0 rgba(0,150,255,0.5)}
.circle:hover > h2 a,.circle:hover > h2{color:rgba(185,185,185,1)}
</style>
<div class="circle">
<h1><a href="http://www.giacngotuyduyen.com">GIÁC NGỘ TÙY DUYÊN</a></h1>
</div>
DÀNH CHO NỘI DUNG BÀI VIẾT TRANG GIACNGOTUYDUYEN
26. Code Tải MP3 và PDF
CÁCH SỬ DỤNG :
<div style="text-align: center;">
<b id="giacngotuyduyen-button">
<a class="green download-button" href="/p/thu-vien-mp3.html" rel="nofollow" target="_blank">MP3</a>
</b>
<b id="giacngotuyduyen-button">
<a class="orange download-button" href="/p/thu-vien-pdf.html" rel="nofollow" target="_blank">PDF <i aria-hidden="true" class="fa fa-file-pdf-o"></i></a>
</b>
</div>
27. 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;" />
28. Code beakings news
<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>
29. gạch ngang bài viết
dấu ngắt dòng
CÁCH SỬ DỤNG :
<center>
<h7 style="border-bottom: 1px solid var(--border-color-base,#a2a9b1); line-height: 1.375; padding-bottom: 0.17em; padding-top: 0.5em; width: 25%;">
</h7>
</center>
30. phân trang bài viết
DEMO:
đây là nộidung trang 1
đây là nộidung trang 2
đây là nộidung trang 3
đây là nộidung trang 4
<div class="ignielPagination">
đây là nộidung trang 1
</div>
<div class="ignielPagination">
đây là nộidung trang 2
</div>
<div class="ignielPagination">
đây là nộidung trang 3
</div>
<div class="ignielPagination">
đây là nộidung trang 4
</div>
31. chèn hình ảnh dùng thư viện
<div class="separator" style="clear: both;"><a href="địa chỉ ảnh http://.." style="display: block; padding: 1em 0px; text-align: center;">
<img src="địa chỉ ảnh http://.." /></a></div>
Đăng nhận xét