BS / 美化帖子下的评论箱

寻寻觅觅寻寻觅觅 都很少看到Blogskins的评论箱代码，于是就分享啦。但总算是成功了，可以用语法按照你的意思去美化它哦。 

[左边：BEFORE/右边：AFTER]

 模板 > 修改HTML

 首先，你要放以下的代码 B，(Ctrl+C)到</blogger>的上面。

<itempage> <div id="comments" style="margin-top:5px;"> <blogitemcommentsenabled><a name="comments"></a> <dl id="comments-block"> <div style="width:470px; padding:5px;margin-top:20px;border:4px solid #fff;6px;background:url(http://pastelpatterns.com/small/smallpattern-9.png); box-shadow:0 0 3px #ddd;"> <$CommentPager$> <blogitemcomments> <dt class="comment-data" id="<$BlogCommentAnchorName$>"><a name="<$BlogCommentAnchorName$>"></a> <$I18NCommentAuthorSaid$></dt> <dd class="comment-body"> <p> <$BlogCommentBody$></p> <$BlogCommentDeleteIcon$> </dd> </BlogItemComments> <$CommentPager$> </dl> </div> <p class="comment-timestamp"> <$BlogItemCreate$> </p> </div> </ItemPage>
代码 B

 过后你再把代码 A 放到</style>的上面。

.comment-timestamp { margin:0 0 .5em; padding:0 0 .75em 20px; color:#666; } .deleted-comment { font-style:italic; color:gray; } #comments { margin:5; border-width:0 1px 1px; padding:20px 0 15px 0; } .comment-icon blogger-comment-icon{display:none} #comments-block { margin:2px ; } .comment-data { background:url("http://media.tumblr.com/tumblr_m89rmpKOEf1qdlkyg.gif") no-repeat 2px .3em; margin-top:5px !important;background-size:10px; padding:0 0 0 20px; color:#666; } span.comment-icon{display:none} .comment-poster { font-weight:bold; } .comment-body { margin:0px; } .comment-body p { background:#F9F5FB; border:2px solid #; margin:0em; padding:5px; color:#808080; }
代码 A

 完成。

代码 A 的

.comment-body p {
background背景颜色:#F9F5FB;
border框框:2px厚度 solid #;
margin:0em;
padding相距离:5px;
color字体颜色:#808080;
}

是例子图紫色的部分。你可以编辑加影子还是换圆形、边边、颜色等等的。

.comment-data {
background:url("http://media.tumblr.com/tumblr_m89rmpKOEf1qdlkyg.gif兔子图") no-repeat 2px .3em;
margin-top与上面的距离:5px !important;背景大小background-size:10px;
padding:0 0 0 20px;
color字体颜色:#666;
}

http://media.tumblr.com/tumblr_m89rmpKOEf1qdlkyg.gif

可更换其他的图标链接。

代码 B 的

<div style="width宽度:470px; padding:5px;margin-top离上面:20px;border格子:4px厚度 solid #fff格子颜色;6px;background背景:url(http://pastelpatterns.com/small/smallpattern-9.png背景图片); box-shadow:0  0 3px #ddd;">

的部分是，外面那层白色的格子。

http://pastelpatterns.com/small/smallpattern-9.png

可以换去你要的背景图片链接。



本博客的是(加了鼠标经过的效果哦)

.comment-body p { background:#FFF;font-family:'微軟雅黑體'; border:2px solid #; margin:2em;border-radius:4px 4px 4px 4px; -moz-border-radius:4px 4px 4px 4px; padding:7px; color:#888888;box-shadow:0 0 3px #ddd } .comment-body p:hover { background:#F9F9F9; color:#888888;box-shadow:0 0 6px #E0E0E0; }