[Blogspot] - Widget chia trang chủ thành 2 cột đẹp mắt cho Blogspot

google-vina

Widget chia trang chủ thành 2 cột đẹp mắt cho Blogspot

Trong hướng dẫn này, tôi sẽ cung cấp cho bạn cách tạo một bảng nội dung với một diện mạo hấp dẫn hơn. và cũng có tính năng phân loại theo nhãn và bài viết đã được tân trang lại.

DEMO

Xem trực tiếp

Bước cài đặt trên blogspot ..

1. Trong bảng điều khiển Blogger của bạn Chọn Menu Templates và chọn Edit Template lại
2. Nhấn phím Ctrl + F và tìm kiếm các mã </ style> hoặc]]> </ b: skin>.
3. Sao chép CSS và Đặt đoạn mã trên </ style> hoặc]]> </ b sau đây: skin>.

#table-outer table {width: 100%;margin:0;padding:0;}#table-outer input, #table-outer select {padding: 4px;font: inherit;border: 2px solid rgba(177, 0, 0, 0.26);width: 170px;box-sizing: border-box;}#table-outer select {cursor:pointer;}#resultDesc {margin-bottom:10px; }#feedContainer {overflow: hidden;margin-top: 20px;}#feedContainer strong {font-size: 10px;}#feedContainer, #feedContainer li {padding: 0;margin: 0;list-style: none;}#feedContainer li {float: left;width: 50%;margin-bottom: 10px;position: relative;z-index: 0;}#feedContainer .inner {padding: 8px;margin: 0 5px;position: relative;background-color: #FFFFFF;border: 1px solid rgba(177, 0, 0, 0.26);border-radius: 2px;height: 133px;}#feedContainer img {float: left;margin: 0 8px 0 0;max-width: 100%;border: 1px solid #C7C7C7;padding: 3px;}#feedContainer .toc-title {max-height: 33px;overflow: hidden;}#feedContainer .toc-title:hover {text-decoration:underline;}#feedContainer .news-text {font-size:11px;}#feedNav a, #feedNav span {display: block;text-align: center;color: #FFFFFF;text-decoration: none;background-color: #AF0606;padding: 5px;width: 95%;margin: 0 auto;border-radius: 2px;}#feedContainer .date {position: absolute;bottom: 0;right: 0;background-color: #AF0606;color: #FFFFFF;font-size: 9px;padding: 3px 2px;width: 75px;}#feedContainer .date .dd {font-size: 15px;line-height: 18px;font-weight: bold;}#feedContainer .date span {display: inline-block;line-height: 12px;text-align: center;margin-left: 5px;}

4. Nhấp vào Save Template

5. Quay lại bảng điều khiển Blogger
6. Đăng Nhập Blogspot==> Bố Cục (Layout) ==> Tạo một tiện ích HTML/Javascript rồi copy đoạn code dươi đây vào rồi nhấn lưu:

<div id="table-outer"><table><tr><td><label>Urutkan posting berdasarkan:</label></td><td><select id="orderFeedBy"><option value="published" selected>Posting terbaru</option><option value="updated">Posting diperbaharui</option></select></td></tr><tr><td><label>Filter posting berdasarkan kategori:</label></td><td><span id="labelSorter"><select disabled><option selected>Loading...</option></select></span></td></tr><tr><td><label>Cari dengan kata kunci:</label></td><td><form id="postSearcher"><input type="text"/></form></td></tr></table></div><header id="resultDesc"></header><ul id="feedContainer"></ul><div id="feedNav">Loading...</div><script src="https://googledrive.com/host/0B-GXzRKoPbNnR3N0Z0dMQ0lDYWM" type="text/javascript"></script>

Lưu và xem kết quả,
Chúc may mắn

Nguồn: ngudang.blogspot.com