Bài viết này sẽ thiêng về phần hướng dẫn hơn là 1 bài thủ thuật hoàn chỉnh, tức là không chỉ với thao tác "copy paste" code là bạn có thể thực hiện thủ thuật. Để hoàn thiện và phù hợp với blog của bạn thì bạn cần phải bỏ 1 chút thời gian.
Ở hình minh họa các bạn sẽ thấy khi ra phần ráp lại ta sẽ được 1 khung hình trang trí hoàn chỉnh.
☼ Các bước thực hiện: (mình sẽ hướng dẫn như hình demo)
1. Đầu tiên ta sẽ tạo các đường viền & màu nề cho nội dung comment.
- Hình minh họa:
Ở hình 2, nếu để ý các bạn sẽ thấy ko có đường border-top.
- Để thực hiện các bạn vào trong code template, tìm đoạn code CSS như bên dưới, lưu ý, (đối với 1 số template được convert lại thì code có thể khác)
.comment-body {
margin:0;
padding:5px;
}
Và thêm code được đánh dấu highlight như bên dưới:
.comment-body {
margin:0;
padding:5px;
background:#eee;
border-left:1px solid #ccc;
border-bottom:1px solid #ccc;
border-right:1px solid #ccc;
}
- Sau khi hoàn tất hãy nhớ save template lại.
2. Tạo 1 thẻ div rỗng với hình nền tương ứng với nền của nội dung comment.
- ví dụ như trong hình demo mình sử dụng hình bên dưới :
- Để dễ hình dung các bạn có thể hiểu là hình nền của thẻ div sẽ được thêm vào là đường border-top mà khung chứa nội dung comment còn thiếu, chỉ có khác là đường border-top là 1 đường thẳng đơn thuần, còn hình nền của thẻ div này có hơi cầu kì một chút.
- Cái chính ở bước này là bạn hãy tạo cho mình một hình nền thật phù hợp với khung của comment. Lưu ý tới độ rộng của khung comment để thiết kế hình nền cho khớp và hợp lý nhất.
- Để thực hiện bước 2 này, các bạn làm theo các bước như bên dưới:
a. vào bố cục
b. vào chỉnh sửa code HTML
c. chọn mở rộng mẫu tiện ích
d. tìm đoạn code như bên dưới :
<dd class='comment-body'>
e. thêm vào trước nó đoạn code bên dưới:
<div style='height:8px; background:url(link ảnh nền) no-repeat;'/>
- với 8px là chiều cao của hình nền mà bạn đã thiết kế.
f. save template.
Chúc các bạn thành công.
Tem ^^ ! :) ;)
phan relatepost cua a loading mai a Dung oi !
tại cái host 110mb nó trục trặc, anh chưa fix sang link khác nên nó mới load mãi, giờ thì ổn rồi
sao mọi người không dùng google site nhỉ, nó cho phép up file .js đó. Trang web của mình đang dùng link js tại host của google rất là tốt
@Yumi : ủa, google nó chu up file JS rồi hả, hồi trước mình dùng nó để xài, nhưng nó ko cho up file js, nên mình phải đổi đuôi .js lại thành .txt rồi mới up lên.
chút add thũ thuật này vào mới dc thanks bác nghen ^%^ ;))
hay quá cho em xin bài này !!! em cũng đã làm thử ở rất đẹp !! em cảm ơn nhé !
Anh dũng ơi có thủ thuật hiện avatar của mem ko anh
:( hôm trước làm cái thủ thuật tạo biểu tượng vui của yahoo vào trong khung nhận xét, nhưng không sài được mặc dù nó hiện đầy đủ các biểu tượng lên rồi nhưng khi post lại không có tác dụng, hôm nay quay lại để tìm lại bài viết đó mà không thấy đăng nữa. Bạn có thể viết lại một bài hướng dẫn tưưong tự vậy đựoc không
» Nội dung phải liên quan tới chủ đề bài viết.
» Có thể sử dụng thẻ trích dẫn [quote], cấu trúc thẻ như bên dưới :
[quote=AUTHOR name=fdquote]NỘI DUNG[/quote]
» Có thể sử dụng các thẻ <b>,<i>,<a>.
BlOg FD chính thức đóng comment của khách ẩn danh.
BlOg FD.