Bố cục của một Blogger có thể tùy biến các vị trí, cũng như các thành phần của Blogger bằng kiến thức CSS cũng như HTML cơ bản, nếu chưa biết bạn có thể học dần dần. Về riêng phần Nhận xét - Comment bạn có thể tạo style riêng cho nhận xét của Author, đánh số các nhận xét... Ngoài ra để tạo thẩm mỹ, bạn có thể tạo hình bong bóng cho số Nhận xét của bài viết ngay trên tiêu đề bài viết.
VnBlognet [dot] com : Chỉ cần Copy và dán code theo hướng dẫn sau bạn có thể tạo cho Blogger một style riêng như hình minh họa
- Truy cập và Blogger: Bảng điều khiển (Dashboard) >> Bố cục (Layout) >> Chỉnh sửa HTML (Edit HTML) >> Click chọn vào ô check Mở rộng mẫu tiện ích (Expand Widget Templates)
Chèn mã CSS:
- Tìm đoạn code </head> và thay thế chúng bằng đoạn mã sau:
<style type="text/css">
.comment-bubble {
float: right;
background: url(http://i49.tinypic.com/2vugahu.jpg) no-repeat;
width: 55px;
height: 38px;
font-size: 18px;
margin-top: -15px;
margin-right: 2px;
text-align: center;
}
</style>
</head>
- Đoạn mã màu đỏ là đường dẫn hình bong hóng hiển thị cùng kích thước của chúng, tùy vào Template mà bạn có thể thay đổi kích thước này.
- Tìm (Ctrl – F) và dán ngay dưới đoạn mã: <h3 class='post-title entry-title'> hoặc <h3 class='post-title'> tùy thuộc vào mẫu Template đoạn mã sau:
<!--COMMENT-BUBBLES-STARTS—>
<b:if cond='data:post.allowComments'>
<a class='comment-bubble' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:post.numComments/></a>
</b:if>
<!--COMMENT-BUBBLES-STOPS-->
- Lưu mẫu (Save) là hoàn thành công việc.
Thay đỏi hình hiển thị Bubble:
- Trong bước 2: đoạn mã màu đỏ http://i49.tinypic.com/2vugahu.jpg là địa chỉ URL hiển thị của mẫu bong bóng.
- Bạn có thể xem xét và lựa chọn 1 trong các mẫu sau để thay thế bằng cách [Right Click và "Copy Image Address/Location" để lấy URL các hình dưới:
Tham khảo theo: http://bloggerstop.net
Ý kiến bạn đọc [ 5 ]
bác thay đổi giao diện à? nhìn hơi giống web chuyên về soft :D
đâu mình ăn trộm cái giao diện của thethao.zing đó mà ^_^
sao page này load nhanh vậy a, có bí quyết gì hem ;;)
Cái này có gì đâu Pika anh dùng temp chuẩn của pro (cái này không chắc lắm) thứ nữa là anh không dùng nhiều file js, tức là hạn chế những tiện ích không cần thiết.
hehe bạn nhớ share code menu tớ xin nhé
Tớ cảm ơn nhiều
http://www.dungmu.co.cc/
Ý kiến của bạn