Tạo bảng Responsive với Shortcode cho Blogspot

SHORTCODE PLUGIN LÀ GÌ?

Shortcode Plugin là một macrocode, tức là một dòng mã có chứa một tập hợp các hướng dẫn mà cho phép bạn dễ dàng khi ghi một đoạn code. Shortcodes có thể giúp bạn nhúng các tập tin hoặc tạo ra các đối tượng trong Blogspot với một dòng mã mà thông thường sẽ đòi hỏi rất nhiều đoạn mã phức tạp và dài dòng.

Với Shortcode plugin bạn có thể dễ dàng chèn các đối tượng như Video, Audio, tập tin, video và tất cả các yếu tố web quan trọng như accordions, tab, button màu, Sidebar, Footer, bài viết và bình luận. Plugin này không đòi hỏi nhiều kiến thức về HTML, CSS hay JavaScript, plugin này rất nhẹ và tối ưu được những đoạn code giúp trang bạn tải nhanh hơn.

DANH SÁCH CÁC SHORTCODE HỖ TRỢ

Shortcode	Definition
[accordion]	Accordion là một danh sách xếp chồng lên nhau theo chiều dọc của menu, trong đó mỗi hàng có thể được "mở rộng" hoặc "dãn ra" và hiển thị những nội dung liên quan đến hạng mục đó. Các menu có thể được bật và tắt một cách dễ dàng.
[tab]	Widget Tab tạo menu hiển thị trong một cửa sổ duy nhất, sử dụng các tab như một widget điều hướng.
[code]	Làm đẹp code khi đăng bài
[table]	Create responsive and fancy HTML Tables with multiple Rows and Columns
[quote]	Khung nền quote đẹp
[button]	CSS3 Buttons nhiều màu sắc
[icon]	Chèn icon FontAwesome với các tùy chọn tùy chỉnh hỗ trợ
[soundcloud]	Nhúng một bài nhạc hoặc playlist vào blog
[dailymotion]	Nhúng Video trên Dailymotion
[youtube]	Nhúng Video trên YouTube
[divider]	Inserts a Horizontal Separator to divide a section, also contains a Back To Top button
[num]	Inserts a Number enclosed inside a circular background
[warning]	Chèn box với thông điệp cảnh báo
[success]	Chèn box với thông điệp Thành công
[alert]	Chèn box với thông điệp cảnh báo
[info]	Chèn box hiển thị chi tiết
[update]	Chèn box thông báo mới
[facebook]	Nhúng Facebook Page Plugin
[image]	Nhúng hình ảnh bất cứ nơi nào bạn muốn.
[tooltip]	Chèn một Fancy CSS3 Tooltip trên hoặc dưới siêu liên kết để hiển thị thông tin thêm

CÁC BƯỚC CÀI ĐẶT CƠ BẢN

- Vào Mẫu

- Chỉnh sửa HTML

- Tìm đến thẻ </body>

- Dán đoạn code trên vào trước thẻ vừa tìm được

<script src='https://dl.dropboxusercontent.com/s/4opz6d0gzucab1h/shortcodes.js' type='text/javascript'></script>

- Dán các đoạn code sau vào trước thẻ </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script> 
<link href='http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/> 
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>

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Ị

Ở nơi muốn hiển thị, trong trang HTML ta sử dụng:

- 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 bằng các thuộc tính sau:

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]

Demo:

DEMO

LỖI THƯỜNG GẶP

- Chỉ ghi các kí tự thường, không được ghi hoa khi dùng shortcode
- Không thêm khoảng trống khi ghi shortcode
- Các giá trị thuộc tính sử dụng đơn(') hoặc đôi(")
- Khi thêm nhiều hơn 1 thuộc tính phải cách nhau bằng dấu cách (space).
- Không sử dụng [] trong thuộc tính. VD: color="[#000]"

Chúc các bạn thành công.

Khanhnguyen' s blog

Breaking News