gỗ ghép
Chia sẻ những đoạn code đơn giản thường dùng chủ yếu trang trí làm đẹp bài viết.  

Thẻ P : 

<p style="background-color:red;padding:10px;text-align:center;font-family:Arial;font-size:15px;border-radius:25px;overflow:hidden;"><span style="color:#ffffff;"><strong>
</strong></span></p>


Thẻ div :

Khung viền - thẻ div :

<div style="padding: 8px; border: 2px dashed #FF4500; word-wrap: break-word;"> </div>
<p style="border-style: dotted;"></p>
<p style="border: 2px solid red;border-radius: 12px;padding:2px;"></p>
<div style="border: 1px solid black;background-color: lightblue;padding-top: 50px;padding-right: 30px;padding-bottom: 50px;padding-left: 80px;">top padding có giá trị 50px, right padding có giá trị 30px, bottom padding có giá trị 50px,và left padding có giá trị 80px.</div>

Thẻ Div chứa text :

<div style="text-align:center;">Nội_dung canh giữa</div>
<div style="text-align: justify;padding:10px"> Nội dung dàn đều chữ </div>

Chèn Icon :

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<i class="fa fa-cloud"></i>
<i class="fa fa-heart"></i>
<i class="fa fa-car"></i>
<i class="fa fa-file"></i>
<i class="fa fa-bars"></i>

Chèn blockquote :

<style>
blockquote {position: relative;color: #333;border: 5px solid #0ABCB1;border-radius: 100px;padding: 30px 60px;margin: 2em 60px 60px;text-align: center;font: 16px Cambria,Georgia,sans-serif;font-weight: 600;}
blockquote:before {display: block;border: 10px solid #21B028;position: absolute;background: none repeat scroll 0 0 #FFFFFF;content: "";height: 50px;width: 50px;right: 100px;bottom: -40px;border-radius: 50px;z-index: 10;}
blockquote:after {position: absolute;background: none repeat scroll 0 0 #FFFFFF;display: block;content: "";height: 25px;border: 10px solid #5A8F00;bottom: -60px;right: 50px;width: 25px;border-radius: 25px;z-index: 10;}
@media only screen and (max-width: 500px) {
blockquote {padding: 30px 20px;margin: 1em 30px 30px;font-size:12px;}}
</style>
<center>
<blockquote>
<p> nội dung <br />
blockquote</p>
</blockquote>
</center>
Code Font chữ :

<font size="2" color="red">Đây là chữ có kích thước= 2, màu đỏ.</font> Đây là chữ có kích thước= 2, màu đỏ.
In đậm = In đậm - code - <b>In đậm</b>
Nghiêng = Nghiêng - code - <i>Nghiêng</i>
Gạch dưới = Gạch dưới - code - <u>Gạch dưới</u>
Gạch ngang chữ = Gạch ngang chữ - code - <s>Gạch ngang chữ</s>
Chữ Sub Script = Chữ Sub Script - code - <sub>Sub Script</sub>
Chữ Super Script = Chữ Sub Script - code - <sup>Sub Script</sup>
Background cho chữ : code  <font style="background-color: #c4c4c4; display:block">Text</font>
<span style="color:#339966; font-family:Tahoma; font-size:12pt; margin-left:12px;">Thụt đầu dòng Nội_dung</span>
<font color='red' size='6' style='line-height: 1.1;'>thuộc tính line-height giúp dãn dòng text</font>

Code chèn hình ảnh :

<img src="đường dẫn đến tập tin hình ảnh" width="chiều rộng" height="chiều cao" alt="mô tả"/>
<img src="Link Hình" alt="Viết mô tả cho tấm hình" title="Nội dung tấm hình" width="n" height="n" border="n" />

Chèn hình tự co dãn : 

<img alt="gỗ ghép" src="https://lh4.googleusercontent.com/-vUd7R4IMWZk/Wk2Rv1iMWnI/AAAAAAAAABU/7rROFhQ8jVYik9sws4SQzbCjO6NQDMuNACLcBGAs/s1200/goghep.jpg" style="margin-top: 5px;box-shadow: 0px 0px 12px rgba(50, 50, 50, 0.2);width: 100%;margin-bottom: 10px;border: 1px dotted #ccc;"/>
Link liên kết : 

<a name="ten">Chapter 4</a>
<a href="#ten">liên kết đi đến vị trí có name = tên </a>

<a href="LINK_bài_viết#Tên_gán_cho_vị_trí ">Nội_dung</a>
<a name="Tên_gán_cho_vị_trí ">Nội_dung</a>

Html link liên kết (đổi màu link)
<style>
a:link {
    color: green;
    background-color: transparent;
    text-decoration: none;
}

a:visited {
    color: pink;
    background-color: transparent;
    text-decoration: none;
}

a:hover {
    color: red;
    background-color: transparent;
    text-decoration: underline;
}

a:active {
    color: yellow;
    background-color: transparent;
    text-decoration: underline;
}
</style>

<a href="https://www.ivietpr.com" target="_blank">Visit web viết bài PR - quảng cáo online !</a>
Visit web viết bài PR - quảng cáo online !

Hiệu ứng text :

1. Hiệu ứng Drop cap :
<style>
.firstcharacter {
color: #903;
float: left;
font-family: Georgia;
font-size: 75px;
line-height: 60px;
padding-top: 4px;
padding-right: 8px;
padding-left: 3px;
}
</style>
<p>
<span class="firstcharacter">D</span> rop cap chữ cái đầu tiên trong bài viết
</p>

2. Hiệu ứng :


Code Tổng hợp :
Canh hình giữa chữ theo chiều dọc :
<style>
.textimage1 {
border: none; /* Remove borders */
color: white; /* Add a text color */
padding: 1px 5px; /* Add some padding */
cursor: pointer; /* Add a pointer cursor on mouse-over */
vertical-align: middle;
}
</style>
<a href="http://www.ivietpr.com/2017/09/code-html-css-thuong-dung-lam-dep-noi-dung-online.html"> <img alt="Code html, css thường dùng làm đẹp nội dung online" border="0" class="textimage1" height="30" src="http://4pvn.com.vn/img/Type/394.png" tilte="Viết nội dung online" width="60" / /></a>, Chuyên viết nội dung quảng cáo sản phẩm...

Gắn link CSS :
<link rel="stylesheet" type="text/css" href="link css">

Gắn Link JavaScript :
<script language="JavaScript" src="link jav script">

Link tham khảo :
https://bloggersorigin.com/blockquote-styles-customize-blockquote-blogger/
http://nicolasgallagher.com/pure-css-speech-bubbles/demo/
http://webcoban.vn
http://www.kienmkt.info/2016/08/chen-anh-vao-blogspot.html
http://hocwebchuan.com/reference/