越努力越幸运。
不管如何,我比你努力,比你好,比你更问心无愧。

2017.02.22

教程 | 如何美化评论箱


- Tutorial requested by Michelle -

这篇教程有点乱、请大家耐心的浏览哦 :)

* 教程只限新模板使用者 *

教程 I - 美化评论箱

1. 设计 → 修改 HTML

2. 按 Ctrl+F 寻找代码 .post-footer {

3. 在 .post-footer { 里面添加你想要美化的代码,例:
添加框框
border: 1px solid #000000;

红色代码:框框的粗度
蓝色代码:框框的类型
紫色代码:框框的颜色
添加背景
(纯颜色)background-color: #000;
(背景图)background-image: url(图片 url);

红色代码:背景的颜色
蓝色代码:背景图的网址
添加小图片
background-image: url(图片 url);
background-repeat: no-repeat;
background-position: left top

红色代码:小图片的网址
蓝色代码:图片的位置
(left top = 左上角 以此类推)
为框框添加圆框
border-radius: 6px;

红色代码:框框的弧度

* 建议你们在 {...} 之间添加 padding: 3px; 这样看起来,你的内容不会粘着你的框框了。

4. 保存即可。



教程 II - 在作者旁边添加小图片

1. 设计 → 修改 HTML

2. 按 Ctrl+F 寻找代码 .comments .comments-content .icon.blog-author {

3. 将 .comments .comments-content .icon.blog-author { 里面的代码全部删除,添加以下的代码:
background-image: url(图片 url);
background-repeat: no-repeat;
padding: 2px;

红色代码:小图片的网址
4. 保存即可。



教程 III - 美化博友的留言箱
1. 设计 → 修改 HTML

2. 按 Ctrl+F 寻找代码 .comments .comments-content .comment-content {


若寻找不到此代码,可寻找代码:
/* Comments
----------------------------------------------- */

然后在这个代码下面添加 .comments .comments-content .comment-content {...}


3. 在 .comments .comments-content .comment-content { 里面添加美化的代码

美化方式如 教程 I 一样。

4. 保存即可。

10 comments:

  1. 雪晶啊我真的是爱死你的教学了~~

    ReplyDelete
    Replies
    1. 我个人觉得这篇教学蛮乱的、你看的明吗?XD

      Delete
    2. 超明白可能是对我们旧手来说吧新手就不懂啦~应该也是可以的呀~

      Delete
    3. 哈哈~ 那就好啦、新手如果不会,可以留言、我怕的是连旧手都看不明白,我就太失败了 =3=

      Delete
  2. Replies
    1. 我的意思是这个是 for blog template 的,blogskin 的我还没研究到 ;)

      Delete
  3. 为什么我弄不到得 ? ( 教程3 & 教程 1 )

    ReplyDelete
    Replies
    1. 你再试试看~ 真的不行再说、不可能全部人弄得到,你弄不到~ XD

      Delete

っ 谢谢你耐心的看完这篇帖子 ♥
っ 评论将在博主审核后发布,如有不便,敬请原谅哦 :)
っ 除了评论之外,亲也可以选择在 Cbox 留言或 PM 我的部落格专页信箱

ベ 请用词确切,勿使用脏字哟
ベ 部落格不接受匿名评论,评论前请确保你拥有 Google Account 哦
ベ 请仔细列明你的问题好方便我回答哦 :)

* 感谢你的留言,欢迎下次再来。