2007年2月5日星期一

blogger:从别人博客黑的评论CSS样式

昨天大家应该就注意到了,GG派博客的文章页评论变了样子。每个评论现在都被一个小方框包围了起来。火狐浏览器里,还可以看到鼠标移动到小方框上颜色还会变换。

从台湾朋友hguei那里黑到的CSS代码。看到他的评论好看,就把原代码复制了:)

现在把黑到的代码分享给大家:
就是评论那一段得代码:


/* Comments
----------------------------------------------- */
#comments {
padding-top: 10px;
color: #009855;
font-family: 'Trebuchet MS';
}

#comments h4 {
margin: 0px;
padding: 8px 0 0 30px;
font-size: 20px;
color: #000;
background: url(http://gggpie.googlepages.com/bubbles.gif) no-repeat;
height: 29px !important; /* for most browsers */
height /**/:37px; /* for IE5/Win */
}

.comment-body {
background: url(http://gggpie.googlepages.com/bg_comment.gif) no-repeat 35px 0px;
padding-top:1px;
}

.comment-body p {
background:#F4FFF5;
margin: 5px 0 0px 0;
border: 6px solid #e5e5e5;
line-height: 1.6em;
padding: 7px 7px 7px 13px;
}

.comment-body-author {
background: url(http://gggpie.googlepages.com/bg_comment.gif) no-repeat 35px 0px;
padding-top:1px;
}

.comment-body-author p {
background:#E2FFCC;
margin: 5px 0 0px 0;
border: 6px solid #e5e5e5;
line-height: 1.6em;
padding: 7px 7px 7px 13px;
}

.comment-body p:hover,
.comment-body-author p:hover,
.comments-peek-a-boo p:hover{
background: #f4f4f4;
}

.comment-author {
margin: 0px 0px 0px 0px;
padding: 0 10px 0 45px;
color: #000000;
font-size: 16px;
font-weight:bold;
background: url(http://gggpie.googlepages.com/gif_39_012.gif) no-repeat 20px 7px;
}

/* 主要是上面的代码起作用。下面是博客评论本身杂七杂八的代码,具体干嘛有些不知道没试验,有些懒得说 */

.comment-footer {
padding: 5px 0px 3px 30px;
}

.comments-block .comment-body {
background: #fff;
}
.comments-block .comment-footer{
margin: 0 0 0 -10px;
}

.comment-title{
margin: 0 0 0 30px;
}

.deleted-comment {
font-style:italic;
color:gray;
}

/*
* 下面的代码是控制最低下的新旧文章、主页翻页按钮位置的
*/
#blog-pager-newer-link {
float: left;
}

#blog-pager-older-link {
float: right;
}
#blog-pager {
text-align: center;
}

上面的暗红色代码就是主要的代码,一般直接替换博客原代码就成了。

还有也是从别人那里黑的关于评论的小图标放上来给大家使用:












想不出还要具体介绍哪些东西,大家有问题一起讨论了:)

2 评论:

匿名 说...

很漂亮,已经把我的blogger改了.谢谢GG分享.

Cyril Chai 说...

为什么我的博客上不能显示comment-body-author那一行的背景颜色?背景颜色和comment-body那一行是一样的

发表评论: ☆欢迎灌水☆言论自由☆交流快乐☆