test

Template

Để bài viết hấp dẫn, ngoài nội dung hay thì cách trình bày cũng là một yếu tố vô cùng quan trọng giúp bài viết thêm sinh động hơn

1. Chèn khung vào chữ

<div class="dongkhungchu">######</div>

2. Phím

Ctrl

<div class="nut" style="width:45px">#####</div>

3. Demo 3

<div class="ghichu">Nội dung</div>

4. Demo 4

<div class="ghichuxanh"> Nội dung </div>

5. Demo 5

Đây là ví dụ có class là "ghichusilver"

6. Code view

Đây là ví dụ có class là "codeview"

7. Xem code

Đây là ví dụ có class là "xemcode"

8. code

Đây là ví dụ có class là "code"
Đây là ví dụ có class là "code"
Đây là ví dụ có class là "code"
Đây là ví dụ có class là "code"
Đây là ví dụ có class là "code"

9. Xem code

Đây là ví dụ có class là "note"

9. Chèn hình

Đây là ví dụ có class là "chenhinh"

CSS:

<center>
<table class="chenhinh">
<tr>
<td>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgANtAz_vbLHOo7bUG0IBa72jH2ZJBcy65cXiDJSlsjAKjav3uAfQHuS_XW1iSXGkpJeK3apNS4Rvou9dbbM9Vr1tRBKUlQF06PoW7ik_Brz2jTAUa1CsuHpDQ1DMz9pej_AGgn_lmHcLc/s1600/tuy-chon-dang-bai-viet-qua-email.PNG"/><br>
</td>
</tr>
<tr>
<td style="text-align:center;">
Đây là ví dụ có class là "note"
</td>
</tr>
</table>
</center>

10. Blockquote

<div class="blockquote">#####</div>

11. Nút demo và Download


CSS:


#wrap {
    margin: 20px auto;
    text-align: center;
}

#wrap br {
    display: none;
}

.btn-slide, .btn-slide2 {
    position: relative;
    display: inline-block;
    height: 50px;
    width: 200px;
    line-height: 50px;
    padding: 0;
    border-radius: 50px;
    background: #fdfdfd;
    border: 2px solid #0099cc;
    margin: 10px;
    transition: .5s;
}

.btn-slide2 {
    border: 2px solid #efa666;
}

.btn-slide:hover {
    background-color: #0099cc;
}

.btn-slide2:hover {
    background-color: #efa666;
}

.btn-slide:hover span.circle, .btn-slide2:hover span.circle2 {
    left: 100%;
    margin-left: -45px;
    background-color: #fdfdfd;
    color: #0099cc;
}

.btn-slide2:hover span.circle2 {
    color: #efa666;
}

.btn-slide:hover span.title, .btn-slide2:hover span.title2 {
    left: 40px;
    opacity: 0;
}

.btn-slide:hover span.title-hover, .btn-slide2:hover span.title-hover2 {
    opacity: 1;
    left: 40px;
}

.btn-slide span.circle, .btn-slide2 span.circle2 {
    display: block;
    background-color: #0099cc;
    color: #fff;
    position: absolute;
    float: left;
    margin: 5px;
    line-height: 42px;
    height: 40px;
    width: 40px;
    top: 0;
    left: 0;
    transition: .5s;
    border-radius: 50%;
}

.btn-slide2 span.circle2 {
    background-color: #efa666;
}

.btn-slide span.title,
  .btn-slide span.title-hover, .btn-slide2 span.title2,
  .btn-slide2 span.title-hover2 {
    position: absolute;
    left: 90px;
    text-align: center;
    margin: 0 auto;
    font-size: 16px;
    font-weight: bold;
    color: #30abd5;
    transition: .5s;
}

.btn-slide2 span.title2,
  .btn-slide2 span.title-hover2 {
    color: #efa666;
    left: 80px;
}

.btn-slide span.title-hover, .btn-slide2 span.title-hover2 {
    left: 80px;
    opacity: 0;
}

.btn-slide span.title-hover, .btn-slide2 span.title-hover2 {
    color: #fff;
}

HTML:


<div id="wrap">
<a href="#" class="btn-slide" target="_blank">
  <span class="circle"><i class="fa fa-rocket"></i></span>
  <span class="title">Demo</span>
  <span class="title-hover">Click here</span>
</a>
<a href="#" class="btn-slide2" target="_blank">
  <span class="circle2"><i class="fa fa-download"></i></span>
  <span class="title2">Download</span>
  <span class="title-hover2">Click here</span>
</a>
</div>

12. Contoh Penerapan Prism Syntax Highlighter

HTML:



<pre title="HTML" data-codetype ="HTMLku"><code class="language-markup"> 
... kode HTML (yang sudah di`escape`) di sini ...
 </code>
</pre>
<pre title="CSS" data-codetype ="CSSku"><code class="language-css"> 
... kode CSS di sini ... 
</code>
</pre>
<pre title="Javascript" data-codetype ="JavaScriptku"><code class="language-javascript"> 
... kode JavaScript di sini ... 
</code>
</pre>
<pre title="jQuery" data-codetype ="JQueryku"><code class="language-javascript"> ... kode jQuery di sini ... </code></pre>




/* CSS Prism Syntax Highlighter */

pre {
    padding: 50px 10px 10px 10px;
    margin: .5em 0;
    white-space: pre;
    word-wrap: break-word;
    overflow: auto;
    background-color: #2c323c;
    position: relative;
    border-radius: 4px;
    max-height: 500px;
}

pre::before {
    font-size: 16px;
    content: attr(title);
    position: absolute;
    top: 0;
    background-color: #eee;
    padding: 10px;
    left: 0;
    right: 0;
    color: #fff;
    text-transform: uppercase;
    display: block;
    margin: 0 0 15px 0;
    font-weight: bold;
}

pre::after {
    content: 'Double click to selection';
    padding: 2px 10px;
    width: auto;
    height: auto;
    position: absolute;
    right: 8px;
    top: 8px;
    color: #fff;
    line-height: 20px;
    transition: all 0.3s ease-in-out;
}

pre:hover::after {
    opacity: 0;
    top: -8px;
    visibility: visible;
}

code {
    font-family: Consolas,Monaco,'
    Andale Mono','Courier New',Courier,Monospace;
    line-height: 16px;
    color: #88a9ad;
    background-color: transparent;
    padding: 1px 2px;
    font-size: 12px;
}

pre code {
    display: block;
    background: none;
    border: none;
    color: #e9e9e9;
    direction: ltr;
    text-align: left;
    word-spacing: normal;
    padding: 0 0;
    font-weight: bold;
}

code .token.punctuation {
    color: #ccc;
}

pre code .token.punctuation {
    color: #fafafa;
}

code .token.comment,code .token.prolog,code .token.doctype,code .token.cdata {
    color: #777;
}

code .namespace {
    opacity: .8;
}

code .token.property,code .token.tag,code .token.boolean,code .token.number {
    color: #e5dc56;
}

code .token.selector,code .token.attr-name,code .token.string {
    color: #88a9ad;
}

pre code .token.selector,pre code .token.attr-name {
    color: #fafafa;
}

pre code .token.string {
    color: #40ee46;
}

code .token.entity,code .token.url,pre .language-css .token.string,pre .style .token.string {
    color: #ccc;
}

code .token.operator {
    color: #1887dd;
}

code .token.atrule,code .token.attr-value {
    color: #009999;
}

pre code .token.atrule,pre code .token.attr-value {
    color: #1baeb0;
}

code .token.keyword {
    color: #e13200;
    font-style: italic;
}

code .token.comment {
    font-style: italic;
}

code .token.regex {
    color: #ccc;
}

code .token.important {
    font-weight: bold;
}

code .token.entity {
    cursor: help;
}

pre mark {
    background-color: #ea4f4e!important;
    color: #fff!important;
    padding: 2px;
    border-radius: 2px;
}

code mark {
    background-color: #ea4f4e!important;
    color: #fff!important;
    padding: 2px;
    border-radius: 2px;
}

pre code mark {
    background-color: #ea4f4e!important;
    color: #fff!important;
    padding: 2px;
    border-radius: 2px;
}

.comments pre {
    padding: 10px 10px 15px 10px;
    background: #2c323c;
}

.comments pre::before {
    content: 'Code';
    font-size: 13px;
    position: relative;
    top: 0;
    background-color: #f56954;
    padding: 3px 10px;
    left: 0;
    right: 0;
    color: #fff;
    text-transform: uppercase;
    display: inline-block;
    margin: 0 0 10px 0;
    font-weight: bold;
    border-radius: 4px;
    border: none;
}

.comments pre::after {
    font-size: 11px;
}

.comments pre code {
    color: #eee;
}

.comments pre.line-numbers {
    padding-left: 10px;
}

pre.line-numbers {
    position: relative;
    padding-left: 3.0em;
    counter-reset: linenumber;
}

pre.line-numbers > code {
    position: relative;
}

.line-numbers .line-numbers-rows {
    height: 100%;
    position: absolute;
    pointer-events: none;
    top: 0;
    font-size: 100%;
    left: -3.5em;
    width: 3em;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    padding: 0;
}

.line-numbers-rows > span {
    pointer-events: none;
    display: block;
    counter-increment: linenumber;
}

.line-numbers-rows > span:before {
    content: counter(linenumber);
    color: #999;
    display: block;
    padding-right: 0.8em;
    text-align: right;
    transition: 350ms;
}

pre[data-codetype='CSSku']:before {
    background-color: #00a1d6;
}

pre[data-codetype='HTMLku']:before {
    background-color: #3cc888;
}

pre[data-codetype='JavaScriptku']:before {
    background-color: #75d6d0;
}

pre[data-codetype='JQueryku']:before {
    background-color: #e5b460;
}


 
<script src='https://arlina-design.googlecode.com/svn/prism.js' type='text/javascript'/>
 
 
<script>
$('pre').attr('class', 'line-numbers');
Prism.hooks.add("after-highlight",function(e){var t=e.element.parentNode;if(!t||!/pre/i.test(t.nodeName)||t.className.indexOf("line-numbers")===-1){return}var n=1+e.code.split("\n").length;var r;lines=new Array(n);lines=lines.join("<span></span>");r=document.createElement("span");r.className="line-numbers-rows";r.innerHTML=lines;if(t.hasAttribute("data-start")){t.style.counterReset="linenumber "+(parseInt(t.getAttribute("data-start"),10)-1)}e.element.appendChild(r)})
</script>
 
<script type='text/javascript'>
var pres = document.getElementsByTagName(&quot;pre&quot;);
for (var i = 0; i &lt; pres.length; i++) {
  pres[i].addEventListener(&quot;dblclick&quot;, function () {
    var selection = getSelection();
    var range = document.createRange();
    range.selectNodeContents(this);
    selection.removeAllRanges();
    selection.addRange(range);
  }, false);
}
</script>

13. Syntax

HTML:


<?php
$example = range(0, 9);
foreach ($example as $value)
{
 echo $value;
}

TUTORIAL:

http://oneqonea.blogspot.com/2012/04/how-do-i-add-syntax-highlighting-to-my.html

14. Chia 2 cột

DEMO:


Đây là một mẫu của một bài viết chia 2 cột, tôi chỉ ghi linh tinh để làm mẫu cho các bạn thôi, không cần thiết phải đọc đến hết đâu nhé, nếu bạn thích đọc thì cứ tiếp tục đọc vì đây cũng chỉ là một mẫu mà tôi viết ra để cho ai rảnh thì đọc cho vui thôi mà, nếu đã đọc được đến đây rồi thì có thể đọc cho hết cũng không sao, xong đoạn này thì ví dụ này có thế hết được rồi, cõ lẽ đủ dài rồi đó nhỉ. Cảm ơn bạn đã đọc hết hehe

TUTORIAL:

 
.bagidua
{
   -webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
    column-count: 2;
}

 
<div class='bagidua'>Đây là một mẫu của một bài viết chia 2 cột, tôi chỉ ghi linh tinh để làm mẫu cho các bạn thôi, không cần thiết phải đọc đến hết đâu nhé, nếu bạn thích đọc thì cứ tiếp tục đọc vì đây cũng chỉ là một mẫu mà tôi viết ra để cho ai rảnh thì đọc cho vui thôi mà, nếu đã đọc được đến đây rồi thì có thể đọc cho hết cũng không sao, xong đoạn này thì ví dụ này có thế hết được rồi, cõ lẽ đủ dài rồi đó nhỉ. Cảm ơn bạn đã đọc hết hehe.</div>

Để bài viết hấp dẫn, ngoài nội dung hay thì cách trình bày cũng là một yếu tố vô cùng quan trọng giúp bài viết thêm sinh động hơn

1. Chèn khung vào chữ

<div class="dongkhungchu">######</div>

2. Phím

Ctrl

<div class="nut" style="width:45px">#####</div>

3. Demo 3

<div class="ghichu">Nội dung</div>

4. Demo 4

<div class="ghichuxanh"> Nội dung </div>

5. Demo 5

Đây là ví dụ có class là "ghichusilver"

6. Code view

Đây là ví dụ có class là "codeview"

7. Xem code

Đây là ví dụ có class là "xemcode"

8. code

Đây là ví dụ có class là "code"
Đây là ví dụ có class là "code"
Đây là ví dụ có class là "code"
Đây là ví dụ có class là "code"
Đây là ví dụ có class là "code"

9. Xem code

Đây là ví dụ có class là "note"

9. Chèn hình

Đây là ví dụ có class là "chenhinh"

CSS:

<center>
<table class="chenhinh">
<tr>
<td>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgANtAz_vbLHOo7bUG0IBa72jH2ZJBcy65cXiDJSlsjAKjav3uAfQHuS_XW1iSXGkpJeK3apNS4Rvou9dbbM9Vr1tRBKUlQF06PoW7ik_Brz2jTAUa1CsuHpDQ1DMz9pej_AGgn_lmHcLc/s1600/tuy-chon-dang-bai-viet-qua-email.PNG"/><br>
</td>
</tr>
<tr>
<td style="text-align:center;">
Đây là ví dụ có class là "note"
</td>
</tr>
</table>
</center>

10. Blockquote

<div class="blockquote">#####</div>

11. Nút demo và Download


CSS:


#wrap {
    margin: 20px auto;
    text-align: center;
}

#wrap br {
    display: none;
}

.btn-slide, .btn-slide2 {
    position: relative;
    display: inline-block;
    height: 50px;
    width: 200px;
    line-height: 50px;
    padding: 0;
    border-radius: 50px;
    background: #fdfdfd;
    border: 2px solid #0099cc;
    margin: 10px;
    transition: .5s;
}

.btn-slide2 {
    border: 2px solid #efa666;
}

.btn-slide:hover {
    background-color: #0099cc;
}

.btn-slide2:hover {
    background-color: #efa666;
}

.btn-slide:hover span.circle, .btn-slide2:hover span.circle2 {
    left: 100%;
    margin-left: -45px;
    background-color: #fdfdfd;
    color: #0099cc;
}

.btn-slide2:hover span.circle2 {
    color: #efa666;
}

.btn-slide:hover span.title, .btn-slide2:hover span.title2 {
    left: 40px;
    opacity: 0;
}

.btn-slide:hover span.title-hover, .btn-slide2:hover span.title-hover2 {
    opacity: 1;
    left: 40px;
}

.btn-slide span.circle, .btn-slide2 span.circle2 {
    display: block;
    background-color: #0099cc;
    color: #fff;
    position: absolute;
    float: left;
    margin: 5px;
    line-height: 42px;
    height: 40px;
    width: 40px;
    top: 0;
    left: 0;
    transition: .5s;
    border-radius: 50%;
}

.btn-slide2 span.circle2 {
    background-color: #efa666;
}

.btn-slide span.title,
  .btn-slide span.title-hover, .btn-slide2 span.title2,
  .btn-slide2 span.title-hover2 {
    position: absolute;
    left: 90px;
    text-align: center;
    margin: 0 auto;
    font-size: 16px;
    font-weight: bold;
    color: #30abd5;
    transition: .5s;
}

.btn-slide2 span.title2,
  .btn-slide2 span.title-hover2 {
    color: #efa666;
    left: 80px;
}

.btn-slide span.title-hover, .btn-slide2 span.title-hover2 {
    left: 80px;
    opacity: 0;
}

.btn-slide span.title-hover, .btn-slide2 span.title-hover2 {
    color: #fff;
}

HTML:


<div id="wrap">
<a href="#" class="btn-slide" target="_blank">
  <span class="circle"><i class="fa fa-rocket"></i></span>
  <span class="title">Demo</span>
  <span class="title-hover">Click here</span>
</a>
<a href="#" class="btn-slide2" target="_blank">
  <span class="circle2"><i class="fa fa-download"></i></span>
  <span class="title2">Download</span>
  <span class="title-hover2">Click here</span>
</a>
</div>

12. Contoh Penerapan Prism Syntax Highlighter

HTML:



<pre title="HTML" data-codetype ="HTMLku"><code class="language-markup"> 
... kode HTML (yang sudah di`escape`) di sini ...
 </code>
</pre>
<pre title="CSS" data-codetype ="CSSku"><code class="language-css"> 
... kode CSS di sini ... 
</code>
</pre>
<pre title="Javascript" data-codetype ="JavaScriptku"><code class="language-javascript"> 
... kode JavaScript di sini ... 
</code>
</pre>
<pre title="jQuery" data-codetype ="JQueryku"><code class="language-javascript"> ... kode jQuery di sini ... </code></pre>




/* CSS Prism Syntax Highlighter */

pre {
    padding: 50px 10px 10px 10px;
    margin: .5em 0;
    white-space: pre;
    word-wrap: break-word;
    overflow: auto;
    background-color: #2c323c;
    position: relative;
    border-radius: 4px;
    max-height: 500px;
}

pre::before {
    font-size: 16px;
    content: attr(title);
    position: absolute;
    top: 0;
    background-color: #eee;
    padding: 10px;
    left: 0;
    right: 0;
    color: #fff;
    text-transform: uppercase;
    display: block;
    margin: 0 0 15px 0;
    font-weight: bold;
}

pre::after {
    content: 'Double click to selection';
    padding: 2px 10px;
    width: auto;
    height: auto;
    position: absolute;
    right: 8px;
    top: 8px;
    color: #fff;
    line-height: 20px;
    transition: all 0.3s ease-in-out;
}

pre:hover::after {
    opacity: 0;
    top: -8px;
    visibility: visible;
}

code {
    font-family: Consolas,Monaco,'
    Andale Mono','Courier New',Courier,Monospace;
    line-height: 16px;
    color: #88a9ad;
    background-color: transparent;
    padding: 1px 2px;
    font-size: 12px;
}

pre code {
    display: block;
    background: none;
    border: none;
    color: #e9e9e9;
    direction: ltr;
    text-align: left;
    word-spacing: normal;
    padding: 0 0;
    font-weight: bold;
}

code .token.punctuation {
    color: #ccc;
}

pre code .token.punctuation {
    color: #fafafa;
}

code .token.comment,code .token.prolog,code .token.doctype,code .token.cdata {
    color: #777;
}

code .namespace {
    opacity: .8;
}

code .token.property,code .token.tag,code .token.boolean,code .token.number {
    color: #e5dc56;
}

code .token.selector,code .token.attr-name,code .token.string {
    color: #88a9ad;
}

pre code .token.selector,pre code .token.attr-name {
    color: #fafafa;
}

pre code .token.string {
    color: #40ee46;
}

code .token.entity,code .token.url,pre .language-css .token.string,pre .style .token.string {
    color: #ccc;
}

code .token.operator {
    color: #1887dd;
}

code .token.atrule,code .token.attr-value {
    color: #009999;
}

pre code .token.atrule,pre code .token.attr-value {
    color: #1baeb0;
}

code .token.keyword {
    color: #e13200;
    font-style: italic;
}

code .token.comment {
    font-style: italic;
}

code .token.regex {
    color: #ccc;
}

code .token.important {
    font-weight: bold;
}

code .token.entity {
    cursor: help;
}

pre mark {
    background-color: #ea4f4e!important;
    color: #fff!important;
    padding: 2px;
    border-radius: 2px;
}

code mark {
    background-color: #ea4f4e!important;
    color: #fff!important;
    padding: 2px;
    border-radius: 2px;
}

pre code mark {
    background-color: #ea4f4e!important;
    color: #fff!important;
    padding: 2px;
    border-radius: 2px;
}

.comments pre {
    padding: 10px 10px 15px 10px;
    background: #2c323c;
}

.comments pre::before {
    content: 'Code';
    font-size: 13px;
    position: relative;
    top: 0;
    background-color: #f56954;
    padding: 3px 10px;
    left: 0;
    right: 0;
    color: #fff;
    text-transform: uppercase;
    display: inline-block;
    margin: 0 0 10px 0;
    font-weight: bold;
    border-radius: 4px;
    border: none;
}

.comments pre::after {
    font-size: 11px;
}

.comments pre code {
    color: #eee;
}

.comments pre.line-numbers {
    padding-left: 10px;
}

pre.line-numbers {
    position: relative;
    padding-left: 3.0em;
    counter-reset: linenumber;
}

pre.line-numbers > code {
    position: relative;
}

.line-numbers .line-numbers-rows {
    height: 100%;
    position: absolute;
    pointer-events: none;
    top: 0;
    font-size: 100%;
    left: -3.5em;
    width: 3em;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    padding: 0;
}

.line-numbers-rows > span {
    pointer-events: none;
    display: block;
    counter-increment: linenumber;
}

.line-numbers-rows > span:before {
    content: counter(linenumber);
    color: #999;
    display: block;
    padding-right: 0.8em;
    text-align: right;
    transition: 350ms;
}

pre[data-codetype='CSSku']:before {
    background-color: #00a1d6;
}

pre[data-codetype='HTMLku']:before {
    background-color: #3cc888;
}

pre[data-codetype='JavaScriptku']:before {
    background-color: #75d6d0;
}

pre[data-codetype='JQueryku']:before {
    background-color: #e5b460;
}


 
<script src='https://arlina-design.googlecode.com/svn/prism.js' type='text/javascript'/>
 
 
<script>
$('pre').attr('class', 'line-numbers');
Prism.hooks.add("after-highlight",function(e){var t=e.element.parentNode;if(!t||!/pre/i.test(t.nodeName)||t.className.indexOf("line-numbers")===-1){return}var n=1+e.code.split("\n").length;var r;lines=new Array(n);lines=lines.join("<span></span>");r=document.createElement("span");r.className="line-numbers-rows";r.innerHTML=lines;if(t.hasAttribute("data-start")){t.style.counterReset="linenumber "+(parseInt(t.getAttribute("data-start"),10)-1)}e.element.appendChild(r)})
</script>
 
<script type='text/javascript'>
var pres = document.getElementsByTagName(&quot;pre&quot;);
for (var i = 0; i &lt; pres.length; i++) {
  pres[i].addEventListener(&quot;dblclick&quot;, function () {
    var selection = getSelection();
    var range = document.createRange();
    range.selectNodeContents(this);
    selection.removeAllRanges();
    selection.addRange(range);
  }, false);
}
</script>

13. Syntax

HTML:


<?php
$example = range(0, 9);
foreach ($example as $value)
{
 echo $value;
}

TUTORIAL:

http://oneqonea.blogspot.com/2012/04/how-do-i-add-syntax-highlighting-to-my.html

14. Chia 2 cột

DEMO:


Đây là một mẫu của một bài viết chia 2 cột, tôi chỉ ghi linh tinh để làm mẫu cho các bạn thôi, không cần thiết phải đọc đến hết đâu nhé, nếu bạn thích đọc thì cứ tiếp tục đọc vì đây cũng chỉ là một mẫu mà tôi viết ra để cho ai rảnh thì đọc cho vui thôi mà, nếu đã đọc được đến đây rồi thì có thể đọc cho hết cũng không sao, xong đoạn này thì ví dụ này có thế hết được rồi, cõ lẽ đủ dài rồi đó nhỉ. Cảm ơn bạn đã đọc hết hehe

TUTORIAL:

 
.bagidua
{
   -webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
    column-count: 2;
}

 
<div class='bagidua'>Đây là một mẫu của một bài viết chia 2 cột, tôi chỉ ghi linh tinh để làm mẫu cho các bạn thôi, không cần thiết phải đọc đến hết đâu nhé, nếu bạn thích đọc thì cứ tiếp tục đọc vì đây cũng chỉ là một mẫu mà tôi viết ra để cho ai rảnh thì đọc cho vui thôi mà, nếu đã đọc được đến đây rồi thì có thể đọc cho hết cũng không sao, xong đoạn này thì ví dụ này có thế hết được rồi, cõ lẽ đủ dài rồi đó nhỉ. Cảm ơn bạn đã đọc hết hehe.</div>

No comments: