Chỉnh sửa làm đẹp giao diện blogspot phần 2

Chia sẻ những đoạn code sử dụng trong khi đăng bài viết mới trong blogspot :
1. Code chia cột khi viết bài :

- Chia 2 cột :
<!-- css chia 2 cot -->
<style>
/* SECTIONS */
.section {
clear: both;
padding: 0px;
margin: 0px;
}
/* COLUMN SETUP */
.col {
display: block;
float:left;
margin: 1% 0 1% 1.6%;
}
.col:first-child { margin-left: 0; }
/* GROUPING */
.group:before,
.group:after { content:""; display:table; }
.group:after { clear:both;}
.group { zoom:1; /* For IE 6/7 */ }
/* GRID OF TWO */
.span_2_of_2 {
width: 100%;
}
.span_1_of_2 {
width: 49.2%;
}
/* GO FULL WIDTH AT LESS THAN 480 PIXELS */
@media only screen and (max-width: 480px) {
.col {
margin: 1% 0 1% 0%;
}
}
@media only screen and (max-width: 480px) {
.span_2_of_2, .span_1_of_2 { width: 100%; }
}
</style>
<!-- ket thuc css chia 2 cot -->
<!-- the div chia 2 cot -->
<div class="section group">
<div class="col span_1_of_2">
This is column 1
</div>
<div class="col span_1_of_2">
This is column 2
</div>
</div>
<!-- ket thuc the div chia 2 cot -->


- Chia 3 cột :
<!-- css chia 3 cot -->
<style>
/* SECTIONS */
.section {
clear: both;
padding: 0px;
margin: 0px;
}
/* COLUMN SETUP */
.col {
display: block;
float:left;
margin: 1% 0 1% 1.6%;
}
.col:first-child { margin-left: 0; }
/* GROUPING */
.group:before,
.group:after { content:""; display:table; }
.group:after { clear:both;}
.group { zoom:1; /* For IE 6/7 */ }
/* GRID OF THREE */
.span_3_of_3 { width: 100%; }
.span_2_of_3 { width: 66.13%; }
.span_1_of_3 { width: 32.26%; }
/* GO FULL WIDTH BELOW 480 PIXELS */
@media only screen and (max-width: 480px) {
.col { margin: 1% 0 1% 0%; }
.span_3_of_3, .span_2_of_3, .span_1_of_3 { width: 100%; }
}
</style>
<!-- ket thuc css chia 3 cot -->
<!-- the div chia 3 cot -->
<div class="section group">
<div class="col span_1_of_3">
This is column 1
</div>
<div class="col span_1_of_3">
This is column 2
</div>
<div class="col span_1_of_3">
This is column 3
</div>
</div>
<!-- ket thuc the div chia 3 cot -->

- Chia 4 cột :
<!-- css chia 4 cot -->
<style>
/* SECTIONS */
.section {
clear: both;
padding: 0px;
margin: 0px;
}
/* COLUMN SETUP */
.col {
display: block;
float:left;
margin: 1% 0 1% 1.6%;
}
.col:first-child { margin-left: 0; }
/* GROUPING */
.group:before,
.group:after { content:""; display:table; }
.group:after { clear:both;}
.group { zoom:1; /* For IE 6/7 */ }
/* GRID OF FOUR */
.span_4_of_4 {
width: 100%;
}
.span_3_of_4 {
width: 74.6%;
}
.span_2_of_4 {
width: 49.2%;
}
.span_1_of_4 {
width: 23.8%;
}
/* GO FULL WIDTH BELOW 480 PIXELS */
@media only screen and (max-width: 480px) {
.col { margin: 1% 0 1% 0%; }
.span_1_of_4, .span_2_of_4, .span_3_of_4, .span_4_of_4 { width: 100%; }
}
</style>
<!-- ket thuc css chia 4 cot -->
<!-- the div chia 4 cot -->
<div class="section group">
<div class="col span_1_of_4">
1 of 4
</div>
<div class="col span_1_of_4">
1 of 4
</div>
<div class="col span_1_of_4">
1 of 4
</div>
<div class="col span_1_of_4">
1 of 4
</div>
</div>
<!-- ket thuc the div chia 4 cot -->


- Chia 2 cột điểu chỉnh động rộng từng cột theo tỷ lệ :
<!--css chia 2 cot responsive chia do rong theo ty le-->
<style>
.left {
float: left;
width: 50%;
}
.right {
float: right;
width: 50%;
}
.group:after {
content:"";
display: table;
clear: both;
}
img {
max-width: 100%;
height: auto;
}
@media screen and (max-width: 480px) {
.left,
.right {
float: none;
width: auto;
}
}
</style>
<!-- ket thuc css chia 2 cot responsive chia do rong theo ty le -->
<!--div chia 2 cot responsive chia do rong theo ty le-->
<div class="group">
<div class="left">
<p>
CÔNG TY CỔ PHẦN VÁN GHÉP NĂM TRUNG
255/9B KP Chiêu Liêu, P. Tân Đông Hiệp, Dĩ An, Bình Dương
Di động : 01656.916.247
Điện Thoại: (084.0650) 3711 234 - 3712 673
Email: Support@ntwood.vn, namtrungemail@gmail.com
Website : www.ntwood.vn(SP : Ván ghép, gỗ cưa xẻ tẩm sấy ),www.muaban.in (Sp : sàn gỗ tự nhiên, nội thất, dụng cụ nhà bếp ) , www.goxesay.vn (Sp : Gỗ xẻ sấy ... )
Quý khách hàng có nhu cầu về :
Gỗ cao su xẻ tẩm sấy (LH : 0981.101.317 A.Thành )
Đồ Mộc Gia đình, Ván ghép Thanh, Vật tư ngành gỗ (LH: 0968.970.650 - 01656.916.247 A.Trung)
Sàn gỗ tự nhiên, Len Tường(LH: 0984.512.478 Gặp C. Trang) </p>
</div>
<div class="right">
<img src="http://ntwood.vn/img/img/Lo%20Go%201.jpg" alt="Ván ghép" />
</div>
</div>
<!-- ket thuc div chia 2 cot responsive chia do rong theo ty le -->

<br/>

- Tạo bảng responsive : <br/>
<style>
table {
border-collapse: collapse;
border-spacing: 0;
width: 100%;
border: 1px solid #ddd;
}
th, td {
border: none;
text-align: left;
padding: 8px;
}
tr:nth-child(even){background-color: #f2f2f2}
</style>
</head>
<body>

<div style="overflow-x:auto;">
<table>
<tr>
<th>cot 1</th>
<th>cot 2</th>
<th>cot 3</th>
</tr>
<tr>
<td>1.1</td>
<td>1.2</td>
<td>1.3</td>
</tr>
<tr>
<td>2.1</td>
<td>2.2</td>
<td>2.3</td>
</tr>
</table>
</div>