Tạo Sitemap - Sơ đồ Website dạng metro ui trong windows 8

RÈN LUYỆN TƯ DUY - Hướng dẫn tạo sitemap dạng metro UI theo nhãn cho blogspot. Thủ thuật này được mình chỉnh sửa lại CSS một tí cho giống c...

RÈN LUYỆN TƯ DUY - Hướng dẫn tạo sitemap dạng metro UI theo nhãn cho blogspot. Thủ thuật này được mình chỉnh sửa lại CSS một tí cho giống các live title trong windows 8 là những ô vuông màu tím và màu màu rê chuột vào là màu đỏ.

Xem DEMO

Ưu điểm:

• Hoạt rất tốt trên Di động, mượt và thích hợp cả độ phân giải trên màn hình di động
• Được chia là 3 ô live title trên 1 hàng ngang, font chữ sử dụng là segoe UI

Các thực hiện:
Bước 1: tạo 1 trang tĩnh mới cho blogspot
Bước 2: chuyển qua tab HTML và dán đoạn code bên dưới vào
Bước 3: sửa đoạn code được mình đánh dấu màu đỏ thành địa chỉ website của bạn.

<script src="https://googledrive.com/host/0B-0uHUanipfMMWlMUHJjcERkVFU" type="text/javascript"></script><script src="http://www.renluyentuduy.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script><div style="display: none;"><a href="http://www.renluyentuduy.blogspot.com/">RÈN LUYỆN TƯ DUY</a></div><style type="text/css">.post-archive {width: 100%; padding: 20px 0; text-transform: capitalize; }.post-archive h4 { border-bottom: 1px solid #EEEEEE; color: #be591c; font:28px Segoe ui light; margin: -42px 0 -8px 2px; padding:6px 0 0px}.ct-columns-3 { -moz-column-count: 3; -moz-column-gap: 10px; -moz-column-rule: none; -webkit-column-count: 3; -webkit-column-gap: 10px; -webkit-column-rule: none; column-count: 3; column-gap: 10px; column-rule: none;}.ct-columns-3 p { padding: 5px 0px; -moz-column-break-inside: avoid; -webkit-column-break-inside: avoid; -o-column-break-inside: avoid; -ms-column-break-inside: avoid; column-break-inside: avoid; display: inline-block; width: 100%; }.ct-columns-3 p a {margin:0px 0 -24px 0;height:107px; background: #68217A; color: #fff; display: block; font:16px segoe ui;padding: 10px 15px;}.ct-columns-3 p a:hover {text-decoration:none;background:#cd2122;color: #fff}@media screen and (max-width: 768px){ .ct-columns-3 { -moz-column-count: 1; -moz-column-gap: 0px; -moz-column-rule: none; -webkit-column-count: 1; -webkit-column-gap: 0px; -webkit-column-rule: none; column-count: 1; column-gap: 0px; column-rule: none; } }</style>