MỘT SỐ ĐOẠN CODE TRÌNH BÀY TRONG BLOG

Để 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ữ
2. Mô phỏng một phím
3. Note nền vàng
4. Note nền xanh da trời
5. Note nền bạc silver
6. Note nền bạc - codeview
7. Note nền bạc - quote
8. Note nền bạc - loại 2
9. Note nền xanh da trời - loại 2
10. chèn khung có nội dung dưới hình
11. Note Blockquote có hover xanh
12. Nút demo và Download
13. Contoh Penerapan Prism Syntax Highlighter
14. Syntax
15. Chia 2 cột
16. Chữ đầu viết to

1. Chèn khung vào chữ | MENU

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

2. Phím | MENU

Ctrl

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

3. Note nền vàng | MENU

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

4. Note nền xanh da trời | MENU

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

5. Note nền bạc silver | MENU

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

6. Note nền bạc - codeview | MENU

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

7. Note nền bạc - quote | MENU

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

8. Note nền bạc - loại 2 | MENU

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

9. Note nền xanh da trời - loại 2 | MENU

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

10. chèn khung có nội dung dưới hình | MENU

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

hướng dẫn:

<center>
<table class="chenhinh">
<tr>
<td>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggXEdQrRcYV49gOpOdR68fW4tU8qf5CNM2EJ_3BXARo5Z11bwrxYDIz5apFt2ZRq43obJIdnp0a99egq1MOGzB3I5cw5_4_RiYi6ijR7HP3_Ii6bTDpTOSLSLP0ysANbUC_gauFxvxbyg/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>

11. Note Blockquote có hover xanh | MENU

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

12. Nút demo và Download | MENU

đang load mẫu của peajastr (@lengoccuong) on CodePen.

13. Contoh Penerapan Prism Syntax Highlighter | MENU

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>

14. Syntax | MENU

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

15. Chia 2 cột | MENU

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>

16. Chữ đầu viết to | MENU

<span class="first-letter">M</span>

.first-letter { float: left; color: #4791d2; font-size: 75px; line-height: 60px; padding-top: 4px; padding-right: 8px; padding-left: 3px; font-family: Georgia; }

Free Download Preview Purchase Now

Notice

To continue, please switch to your personal account.