Loading post navigation ...
 
 

Pro page

42
Nhận xét

[Update] - Modify Form comment : Bài 13 - Thiết kế lại giao diện của comment

| by Phan Dũng | views

Hãy nhấn thanks để ủng hộ tác giả

Thủ thuật này mình thực hiện theo yêu cầu của bạn Yolks.
Đây là thủ thuật thứ 13 về comment cho blogspot. Thủ thuật này sẽ giúp các bạn tạo mới lại giao diện cho khu vực hiển thị comment của blogspot.
Một lưu ý nhỏ khi thực hiện thủ thuật : do thủ thuật can thiệp khá nhiều vào code của template, nên tránh gặp sự cố đáng tiếc, các bạn nên download template của blog về máy trước khi thực hiện thủ thuật.

Sau đây là 1 số hình mình họa cho thủ thuật:

Hình minh họa cho yêu cầu

Hình mình đã test trên blog

A. Đầu tiên đê thực hiện thủ thuật, bạn phải thay đổi 1 số cài đặt như bên dưới
- Vào phần cài đặt
- Chọn mục nhận xét
- Kéo xuống dưới phần "Định dấu thời gian của các nhận xét" và chọn như hình bên dưới
- Lưu lại giá trị cài đặt.

B. Sau đây là các bước thực hiện thủ thuật:
1. Vào bố cục
2. Vào chỉnh sửa code HTML
3. Chọn mở rộng mẫu tiện ích
4. Tìm đến đoạn code CSS như bên dưới :
#comments dl dt {
...
...
}
5. Thay thế và thêm mới bằng đoạn code CSS bên dưới:
#comments dl dt {
font-weight: bold;
margin-top: 0;
padding-left: 4px;
}
#comments dl dt span.cmlink {font-weight:normal!important;}
#comments dl dt p
{font-size:85%;font-weight:normal!important;padding: 0; margin: 0;}

/* Modify Comment layout */

#comments-block.avatar-comment-indent {margin-left:0px!important;}
.comment-items {
background:#efefef;
border:1px solid #c3c3c3;
margin-bottom:5px;
padding:5px;
}
.comment-items-info {padding-left: 45px;}
.avatar-image-container {
position:none!important;
left:12px!important;
}
.comment-items-body {
margin-top: 20px;
position: relative;
background: white;
border: 1px solid #C3C3C3;
padding:3px 7px;
}
.comment-items-body .triangle {
width: 19px;
height: 18px;
display: block;
position: absolute;
left: 50px;
top: -18px;
background: url(http://data.fandung.com/img/fd-cm_triangle.gif);
}

.avatar-image-container img{width:40px;height:40px;padding:1px;}

/* END Modify Comment Layout */

- Chú ý : nếu blog của bạn nào ko có đoạn code ở bước 4 thì vẫn thêm đoạn code ở bước 5 như bình thường, vị trí thêm bạn có thể đặt nó trước đoạn code bên dưới :
.deleted-comment {
font-style:italic;
color:gray;
}
6. Tiếp tục tìm trong code template đoạn code như bên dưới :
<div expr:class='data:post.postAuthorClass' expr:id='data:widget.instanceId + "_comments-block-wrapper"'>

<dl expr:class='data:post.avatarIndentClass' id='comments-block'>
<b:loop values='data:post.comments' var='comment'>

<dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName'>
...
...
...
</dt>

<dd expr:class='"comment-body " + data:comment.commentAuthorClass' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>
...
...
...
</dd>

<dd class='comment-footer'>
...
...
...
</dd>

</b:loop>
</dl>

</div>
7. Thay tất cả chúng bằng code bên dưới :
<div expr:class='data:post.postAuthorClass' expr:id='data:widget.instanceId + "_comments-block-wrapper"'>

<dl expr:class='data:post.avatarIndentClass' id='comments-block'>
<b:loop values='data:post.comments' var='comment'>

<div class='comment-items'>

<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>

<div class='comment-items-info'>

<dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName'>
<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
</b:if>
<a expr:name='data:comment.anchorName'/>

<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<span class='cmlink'>
( <a expr:href='data:comment.url' title='comment permalink'> <img src='http://data.fandung.com/img/fd-link-icon.png'/> </a><b:include data='comment' name='commentDeleteIcon'/> )
</span>
<p><data:comment.timestamp/></p>
</dt>

</div> <!-- END comment-items-info -->

<div class='comment-items-body'>
<span class='triangle'/>
<dd expr:class='"comment-body " + data:comment.commentAuthorClass' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p>
<data:comment.body/>
<span class='interaction-iframe-guide'/>
</p>
</b:if>
</dd>

</div>

</div> <!-- END DIV comment-items -->

</b:loop>
</dl>

</div>
8. Save Template.
Update : Tạo ảnh nền riêng biệt cho comment của ADMIN

Hình ảnh minh họa:

Để update, các bạn thực hiện các bước như bên dưới:
1. Thêm code CSS vào code ở bước 5:
.comment-items-body-admin{
margin-top: 20px;
position: relative;
padding:3px 7px;
background: #d3f0f8;
border: 1px solid #98ccda!important;
}

.comment-items-body-admin .triangle {
width: 19px;
height: 18px;
display: block;
position: absolute;
left: 50px;
top: -18px;
background: url(http://data.fandung.com/img/fd-cm_triangle-admin.gif);
}
2. Tìm code như bên dưới ở bước 7:
<div class='comment-items-body'>
<span class='triangle'/>

<dd expr:class='"comment-body " + data:comment.commentAuthorClass' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p>
<data:comment.body/>
<span class='interaction-iframe-guide'/>
</p>
</b:if>
</dd>

</div>
3. Thay nó bằng code bên dưới:
<b:if cond='data:comment.authorUrl == "http://www.blogger.com/profile/04749296400753058357"'>
<div class='comment-items-body-admin'>
<span class='triangle'/>

<dd expr:class='"comment-body " + data:comment.commentAuthorClass' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p>
<data:comment.body/>
<span class='interaction-iframe-guide'/>
</p>
</b:if>
</dd>
</div>

<b:else/>

<div class='comment-items-body'>
<span class='triangle'/>

<dd expr:class='"comment-body " + data:comment.commentAuthorClass' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p>
<data:comment.body/>
<span class='interaction-iframe-guide'/>
</p>
</b:if>
</dd>
</div>

</b:if>
- Ở code này, ta sẽ thấy 1 dãy số 04749296400753058357 , đây là số ID Profile của các bạn, thay nó bằng mã ID của bạn.

4. Save template.

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


Enter your mail address:

42

Pig

anh Dũng cho em hỏi chút về thẻ html , em muốn lồng 2 điều kiện vào trong dấu '' được ko, hay vẫn phải dùng 2 thẻ đó

Khuong34a

Blog của anh có rất nhiều thủ thuật hay, Anh có thê chia sẻ với em các làm cái "Nội Quy Comment" được không anh?
Cảm ơn anh truocs nhá!

Phan Dũng

@PikaRock : em nói rõ hơn được ko???

@KhuongOnline : cái nội quy comment này chia sẻ cũng dễ thôi, nhưng có 1 cái là cái ảnh nền hiện tại nó chỉ hợp với blog của mình . Khi nào mình sửa lại thì mình sẽ chia sẻ sau.

Pig

ohh xin lỗi tại em paste cả thẻ vào comment nên bị mất. em định hỏi anh về thẻ điều kiện

b:if cond='...'
có cách nào lồng nhiều điều kiện vào 1 thẻ mà ko phải mất công liệt kê ko anh


b:if cond='...'
b:if cond='...'
/b:if
/b:if

Yolks

:-o không thể tin dc, ;)) cảm ơn fandung lắm lắm luôn :-*

ABV

Tùy vào template của tưng blog, nếu không có đoạn code như ở Bước 6 thì mình phải làm sao anh nhỉ!

Phan Dũng

@PikaRock : việc lồng nhiều điều kiện vào với nhau a đã thử rồi, nhưng ko thấy tác dụng.

@Linh Dung VnMart : thực ra code ở bước 6 chắc chắn phải có ở mỗi template, nếu khác thì chỉ khác ở bố cục cũng như việc trình bày code mà thôi. Code mà mình đưa ở bước 6 là code chuẩn của blogger. Nếu template ko có đoạn code ở bước 6 thì các bạn nên chịu khó tìm code tương tự để thay thế thôi. Biết sao được.

Điện Tử ChipKool

anh Dũng ơi.code bước 6 em có.nhưng code bước 4 5 em không có.hic :((

Yolks

(TEAM Support) thôi thì để (Yolks Support) cho mới khai trương blog mà

DPMNET

@ChipKool_Online: code bước 4 không có thì vẫn thêm css bình thường bạn nhé :D

DPMNET

@ Fan Dũng: Hồi trước Dũng có 1 bài về hiển thị widget ở trang bất kì dựa vào điều kiện ở link, có thể nói nó giúp blogspot pro hơn rất nhiều. Tuy nhiên có cách nào để nó dựa vào cái id của widget ko nhỉ :-/ không cần chèn tất cả js vào 1 widget và có thể di chuyển thoải mái. Hjx hơi nhức đầu nhỉ ~x(

ABV

Ok anh! Em đã làm được rồi anh ạ! Anh Dũng pro thật đó!

MoigioiForex.Com

Nếu không có Code số 6 thì thay thế sao các pak ?

Thánh Thiện Tâm

( Mời Phan Dũng và các bạn đọc bài này - http://vatinam.blogspot.com/2011/05/247010.html )

|̲̲̲͡͡͡ ̲▫̲͡ ̲̲̲͡͡π̲̲͡͡ ̲̲͡▫̲̲͡͡ ̲|̡̡̡ ̡ ̴̡ı̴̡̡ ̡͌l̡ ̴̡ı̴̴̡ www.MoiGioiForex.Com |̲̲̲͡͡͡ ̲▫̲͡ ̲̲̲͡͡π̲̲͡͡ ̲̲͡▫̲̲͡͡ ̲|̡̡̡ ̡ ̴̡ı̴̡̡ ̡͌l̡ ̴̡ı̴̴̡

@Pham Minh Tam:Chú lộn tiệm rồi đấy, chia sẻ kinh nghiệm thiết kế weblog với FD à :-t

Yolks

Anh dũng em muốn cái hình rộng lên thì dc roài nhưng mà nó bị bỡ khung đó anh thử tăng lên 60x60 thử xem ^^

ABV

@MoigioiForex.Com: Như anh Dũng đã nói ở trên thì code ở bước 6 chắc chắn phải có ở mỗi template, nếu khác thì chỉ khác ở bố cục cũng như việc trình bày code mà thôi. Bác chịu khó tìm kỹ tý là được, em cũng phải tìm mãi mới được đó bác!:D

NAD

Hơi phức tạp nhưng hay :D

Yolks

Bạn nào làm ko dc thì gửi temp cho yolks chỉnh sửa giúp cho , qua blog của yolks vào khung liên hệ để anh dũng khỏi phải bận tâm làm code khác ^^

Phan Dũng

@Yolks : hoanh nghênh sự nhiệt tình của bạn, có muốn làm TEAM Support ko để mình add luôn :d

M®Tadaa

Mình không làm được bạn oi~x(

Khách (ẩn danh)

Anh dũng có thể giúp em cái vấn đề nhức đầu ~x( này ko em có cái domain mới bây giờ mình muốn redirect domain cũ của mình về domain mới. Pavel có thể giúp mình đc ko với lại giúp mình chuyển hết traffic và rank ở bên domain cũ về domain mới. Khi mình gõ từ khóa ictsoft.tk vào google nó ko chuyển về domain mới mà vẫn là domain cũ. Mong anh Dũng giúp thanks

DPMNET

@ Minh Quân: Để redirect tên miền bạn có thể thực hiện trong domain control hoặc tạo 1 blog mới đặt thẻ meta refresh để chuyển hướng tự động tới tên miền mới. Bạn muốn thông báo việc chuyển tên miền với Google thì có thể thực hiện trong google webmaster tool, thường thì đối với Blogger khi đổi tên miền thì công cụ tìm kiếm sẽ tự động chuyển đổi dù phải đợi lâu. Còn rank tại alexa thì mình chịu, mình cũng vừa đổi tên miền và rank trở về vị trí xuất phát.

Khách (ẩn danh)

Hic để cái meta refresh nó cứ f5 liên tục

DPMNET

@ Minh Quân: Bạn phải tạo blog mới chứ, đặt meta refresh ở blog này để direct đến tên miền mới

Unknown

Kiểu khung comments này mà nhiều người thích nhỉ ?? Không gọn gàng, tốn nhiều không gian vô ích.

Yolks

Ông còn tốn hơn tôi mà ông nói. Anh dũng ơi avarata này hẹp quá khi tăng lên mềnh bị vỡ khung đó

Nguyen Duc

A dũng chỉ e làm cái Comment form giống anh đi

Yolks

Anh nên nâng cấp lên nữa đi anh http://jogame.vn/gameonline/gioithieu/huong-dan-lam-nhiem-vu-va-dung-patch-eng-trong-dragonball-online-dai-loan/ comment admin sẽ có màu khác , nâng cấp lên lại ko dc dùng cái thủ thuật cũ dc anh ạ

Lập Koj

:x yêu rồi!
bài viết rất hay

Phan Dũng

@Yolks: up date lên cũng được luôn :D, dể a test cái.

Phan Dũng

@Nguyễn Đức : nếu muốn khung comment kiểu như mìh thì mình sẽ chia sẻ luôn, nhưng bạn tự code lại code css nhé, tức là chỉh lại màu sắc cho phù hợp với blog đó, còn muốn giữ nguyên thì khỏi chỉnh

Yolks

Update chưa ta :-/ sốt ruột quá à

Phan Dũng

@Yolks: sorry , a bận quá nên cũng quên, may em nhắc. sẽ update cho em ngay, mấy bữa nay a đang fix template

Yolks

Nhanh quá ^^ , cái vụ contact anh nhận được chưa ạ

saigon bike

ặc ặc.
Áp dụng xong không bị mắc lỗi nhưng không hiểu sao cái ảnh thum nó không hiện anh Dũng à?
Anh xem dùm em với: http://www.sachxaydung.co.cc

Nguyen Duc

Blog em ko có #comments dl dt

Yolks

Nếu ko có thì thêm vào bạn ơi ;;)

Khách (ẩn danh)

Hay quá đi mất =))

Admin

Chia sẻ game và phim cực lớn mọi người vào ủng hộ mình nha :D

srhk.blogspot.com

Dinh Van Anh

Bạn ơi cho mình hỏi, mình tìm hok thấy dòng như ở bước 4 hoặc 5, nhờ bạn giúp mình được hok.

Yolks

[quote=AUTHOR name=fdquote]Test hihii[/quote]



☺ Các bạn có thể viết lời bình của mình cho bài viết, và tuân thủ một số quy tắc sau:
» Các bài comment phải nghiêm túc, không dung tục, không spam.
» 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.

[▼/▲] More Emoticons
:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Newer Posts Older Posts Home