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

2017.02.22

教程 | Blockquote 教学


blockquote 指的就是 “引用”,如图:
框框就是所谓的 blockquote

如果你还是不明白,可以看看这一个:
我就是 blockquote :)
1. 设计 → 修改 HTML

2. Ctrl + F 寻找代码 ]]></b:skin>

3. 在 ]]></b:skin> 上面添加 这一组代码:

blockquote {
background: url(图片 direct link);
border: 1px solid #000000;
text-shadow: 2px 2px 2px #cccccc;
padding: 5px;
font-color: #000000;
}
* 这一组代码是根据我的 blockquote 的 :)

小解释
1. background - 你的 blockquote 的背景图(你可以选择放背景颜色)
若是将之更改为背景色,请将 “ background ” 改成 “ background-color: #颜色代码; ”
2. border - 你的 blockquote 的框框(1px solid #000000;)
如果不要添加边框,可以删除掉这个代码
1px:框框的厚度
solid:框框的类型(可参考下图)
#000000:框框的颜色(可参考颜色代码)
3. text-shadow - 就是你的 blockquote 你的字有阴影(可以选择添加与否)
2px 2px 2px:px 越大,你的阴影离你的字越远
#cccccc:阴影的颜色(可参考颜色代码)
4. padding - 你的 blockquote 内容离开边框有多远(可以选择添加与否)
如果你没有添加边框,就可以删除掉这个代码
5. font-color - 字体的颜色(可参考颜色代码)


另一款 blockquote
*没错,我要放的就是开引号~ >,< 
背景色不用去理,因为我这个模板的背景本来就是蓝色的。

若果你使用这一款的 blockquote,就不用添加背景图以及边框了 :)

1. 设计 → 修改 HTML

2. Ctrl + F 寻找代码 ]]></b:skin>

3. 在 ]]></b:skin> 上面添加以下代码:
blockquote {
padding-left: 70px;
padding-top: 40px;
background: url(图片 direct link) no-repeat;
}
这个不需要解释,那个 padding 我已经调好了,不要再去调了 :)

图片 direct link 就换去那个开引号的 图片url。

这里有一些开引号的版本,大家可以看看,如果你要自己制作开引号,就不能使用我调给你的 padding 了,请自行调整
http://i1198.photobucket.com/albums/aa448/shehjing/blogger%20material/blockquote3.gif

http://i1198.photobucket.com/albums/aa448/shehjing/blogger%20material/blockquote.gif

http://i1198.photobucket.com/albums/aa448/shehjing/blogger%20material/blockquote1.gif

http://i1198.photobucket.com/albums/aa448/shehjing/blogger%20material/blockquote2.gif


3 comments:

  1. 還有 這是怎樣的效果呢 ? 是不是好像上面的 一動 就會有粉紅色的出來嗎 ? :O

    ReplyDelete
    Replies
    1. 你是指要将代码加在哪里吗?
      上面已经列明了 :)

      不是那个效果哦,这个只是最基本的代码、那个效果请参考教程列表 - 【Blockquote Effect】

      -replied by BII.

      Delete

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

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

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