222

Bạn muốn tạo bảng trên blogspot nhưng template lại không hỗ trợ, bảng tạo không đẹp,code rắc rối...Với Blogger shortcode Plugin bạn có thể tạo 1 bảng với nhiều cột một cách nhanh chóng, đơn giản và đặc biệt là nó còn responsive rất tiện lợi.

>> Tạo box thông báo đẹp cho blogspot

>> YouTube shortcode cho blogspot

DEMO

CÀI ĐẶT SHORTCODE PLUGIN BLOGSPOT

Để sử dụng Tables shortcode trước tiên bạn phải cài đặt Plugin shortcode cho Blogspot tại link dưới đây:

~~~> Shortcode Plugin cho blogspot <~~~

 Nếu bạn đã thêm nó vào template blogger của bạn thì bỏ qua bước này.

THÊM CSS SHORTCODE TABLES

- Có 4 màu cho các bạn lựa chọn:
       • theme1 - Default Đen
       • theme2 - Blue
       • theme3 - Green
       • theme4 - Red

- Thêm CSS vào template (Chèn đoạn css sau trên ]]></b:skin>)

#theme1, #theme2,#theme3,#theme4{width:100%;font-family:sans-serif,arial; block;border-spacing: 0;} 
#theme1, #theme2,#theme3,#theme4,#theme1 th, #theme2 th,#theme3 th,#theme4 th,#theme1 td, #theme2 td,#theme3 td,#theme4 td{border:1px solid #ddd;border-collapse:collapse} 
#theme1 td, #theme2 td,#theme3 td,#theme4 td{padding:10px} 
#theme1 th, #theme2 th,#theme3 th,#theme4 th{padding:12px 10px;text-align:left;font-family:oswald;font-weight:400; font-size: 17px;} 
#theme1 tr:nth-child(odd){background-color:#f1f1f1} 
#theme1 tr:nth-child(even),#theme2 tr:nth-child(even),#theme3 tr:nth-child(even),#theme4 tr:nth-child(even){background-color:#fff} 
#theme1 th{background-color:#333;color:#fff;border:1px solid #333} 
#theme1 th:nth-child(even){background-color:#555}
/*Blue*/ 
#theme2 tr:nth-child(odd){background-color:#d3ecf2} 
#theme2 th{background-color:#42b0c9;color:#fff;border:1px solid #42b0c9} 
#theme2 th:nth-child(even){background-color:#4bbad3} 
/*Green*/ 
#theme3 tr:nth-child(odd){background-color:#e2f2d3} 
#theme3 th{background-color:#a3e264;color:#fff;border:1px solid #a3e264} 
#theme3 th:nth-child(even){background-color:#85c942} 
/*Red*/ 
#theme4 tr:nth-child(odd){background-color:#efddda;} 
#theme4 th{background-color:#ef4832;color:#fff;border:1px solid #ef4832} 
#theme4 th:nth-child(even){background-color:#de1f05}
@media only screen and (max-width:768px) {#theme1,#theme2,#theme3,#theme4 {overflow-x: auto;display: block;}}

HTML HIỂN THỊ

- Code hiển thị bảng gồm 2 cột và 1 dòng: 

[table color="theme3"]  
[row] [heading]Tiêu đề 1[/heading] [heading]Tiêu đề 2[/heading] [/row]  [row] [col]Cột 1[/col] [col]Cột 2[/col] [/row] [/table]  

- Code hiển thị bảng gồm 3 cột và 4 dòng: 

[table color="theme3"]  
[row] [heading]Tiêu đề 1[/heading] [heading]Tiêu đề 2[/heading] [heading]Tiêu đề 3[/heading] [/row]  
[row] [col]Cột 1[/col] [col]Cột 2[/col] [col]Cột 3[/col] [/row]  
[row] [col]Cột 4[/col] [col]Cột 5[/col] [col]Cột 6[/col] [/row] 
[row] [col]Cột 7[/col] [col]Cột 8[/col] [col]Cột 9[/col] [/row] 
[/table]

- Bạn cũng có thể tùy chỉnh nhiều hơn :)

TÙY CHỈNH TABLES

Element	Definition
Row	Trong HTML là <tr>, còn trong Shortcode là [row]
Column	Trong HTML là <td>, còn trong Shortcode là [col]
Heading	Trong HTML là <th>, còn trong Shortcode là [heading]