在帖子里添加 Scrollbar

我终于记得来写教程了 ==

这个就是说在帖子里面添加滚动条的，缩短你们帖子的长度

先到模板 --> 修改 Html --> Ctrl + F 寻找 .post-body {

在 .post-body { 的下面添加这个代码

overflow:auto;
max-height:400px;

温馨小提示❤
❤ 红色的字 --> 我不太会解释这个的效果，不过你们可以随意更改这个号码，这个是帖子的长度到这个数目的时候就会有 Scrollbar 了哟

好了就先预览看看，然后就保存起来

注：如果你的帖子长度没有超过你写的数字是不会有 Scrollbar 的出现哟 =D

漂浮在旁边的另类页面

啦啦啦~~趁着要开学了就来发发教程呗 =D

转载请务必贴上链接

先到模板 --> 修改 Html --> Ctrl + F 寻找 ]]></b:skin>

然后在 ]]></b:skin> 的上面添加以下的代码

.nav{
background: #fff;
text-align:center;
color: #000000;
width: 100px;
height: 90px;
opacity: 0;
margin-top:-100px;
-webkit-transition:all .3s ease-in-out;
 }

.nav:hover{
margin-top:-60px;
text-align:center;
-webkit-transition:all .3s;
height: 15px;
opacity:.6;
}

温馨小提示 ❤
❤ 橙色的字 --> 背景的颜色
❤ 红色的字 --> 字体的颜色
❤ 粉色的字 --> 背景的宽度
❤ 黄色的字 --> 背景的高度
❤ 青色的字 --> 数目越大，背景就越高，想看效果可以把数目加大到 200px，然后再调回来

PS :: 那个 .nav:hover{ 是鼠标指向图片后的效果

好了就保存起来

再去布局 --> 添加小工具 --> Html / Jave Script 把以下的代码放下去

注意：如果你是要用字体来显示页面的话就用代码 1，如果要用图片来显示页面的话就用代码 2

代码 1

<div style='position:fixed;top:140px;right:30px;'>
<img src="图片网址" height='90'width="100"/>

<div class="nav">

<a href="链接网址">

要显示的字体

</div></div>

<div style='position:fixed;top:240px;right:30px;'>

<img src="图片网址" height='90'width="100" />

<div class="nav">

<a href="链接网址">

要显示的字体

</div></div>

<div style='position:fixed;top:340px;right:30px;'>

<img src="图片网址" height='90'width="100" />

<div class="nav">

<a href="链接网址">

要显示的字体

</div></div>

<div style='position:fixed;top:440px;right:30px;'>

<img src="图片网址" height='90'width="100" />

<div class="nav">

<a href="链接网址">

要显示的字体

</div></div>

代码 2

<div style='position:fixed;top:140px;right:30px;'>
<img src="图片网址" height='90'width="100"/>
<div class="nav">
<a href="链接网址">
要显示的图片
</div></div>

<div style='position:fixed;top:240px;right:30px;'>
<img src="图片网址" height='90'width="100" />
<div class="nav">
<a href="链接网址">
要显示的图片
</div></div>

<div style='position:fixed;top:340px;right:30px;'>
<img src="图片网址" height='90'width="100" />
<div class="nav">
<a href="链接网址">
要显示的图片
</div></div>

<div style='position:fixed;top:440px;right:30px;'>
<img src="图片网址" height='90'width="100" />
<div class="nav">
<a href="链接网址">
要显示的图片
</div></div>

好了就保存起来，这个教程有点复杂嗯，如果有不明白的话就问我，成功与否都记得要告诉我，不然我不知道这个教程是不是有用的。

添加 Navbar

就是上面那排粉红色的 Navbar 啦 =D

先到布局 --> 添加小工具 --> Html /Jave Script 把以下的代码放下去

<div style="opacity:0.8; top:0px; position: fixed; text-align: center; background:#ffffff; width: 100%; left: 0px; color: #cccccc; font-size: 12px; z-index:10000; padding:5px; ">
内容
</div>

温馨小提示 ❤
❤ 红色的字 --> 背景的颜色
❤ 橙色的字 --> 字体的颜色
❤ 黄色的字 --> 字体的大小
❤ 蓝色的字 --> 要显示的内容

好了就保存起来，完成 =D

更改帖子背景

末日过去了，答应发布的教程也应该发布了，哈哈

先发布这篇是帖子的背景，废话不多说，直接入正题，这篇教程的方法很简单而已

先到模板 --> 修改 Html --> Ctrl + F 寻找 .post-body {

然后在 .post-body { 的后面添加以下的代码

background:url('图片网址');

好了就可以预览看看帖子背景有没有改变，如果有显示你要的背景就可以保存起来了 :)

为评论添加背景还有框框

我又来发教程了啦 :)  这次是评论添加背景还有框框哟

先到模板 --> 修改 Html --> 继续 --> Ctrl + F 寻找 .comments .comments-content .comment-content {

然后就在它的后面添加以下的代码

border:1px dashed #cccccc;

border-radius:5px;

padding:3px;

background:url(背景网址);

温馨小提示 ❤

❤ 红色的字 --> 框框的厚度

❤ 黄色的字 --> 框框的种类

❤ 粉色的字 --> 框框的颜色

❤ 蓝色的字 --> 背景的链接网址

好了就可以保存来了 :)

如果你 Ctrl + F 发现没有 .comments .comments-content .comment-content { 的话，就找 /* Comments 

然后在 ----------------------------------------------- */ 的下面添加以下的代码

.comments .comments-content .comment-content {

border:1px dashed #cccccc;

border-radius:5px;

padding:3px;

background:url(背景网址);

}

好了就可以保存起来，去看看你的评论箱的评论有没有背景吧 =D

其实你还可以加很多效果进去的哦，比如说让框框会发光的效果等等，发挥自己的想象力弄一个属于自己的评论箱吧 =)

指向链接后的鼠标的变化

这个教程貌似几千年前就有人问过我了 /.\ 我今天终于来发布了啦 :)

效果请把鼠标移向以下的链接，请注意鼠标的变化

指我看变化 ❤

先到布局 --> 添加小工具 --> Html / Jave / Script 把以下的代码放下去

<style type="text/css">body:hover {cursor: url(鼠标图片), progress;}</style>
<style type="text/css">a:hover {cursor: url(指向链接后的鼠标图片), progress;}</style>

好了就保存起来 :)

发现你的部落格鼠标变成你要的图片就成功了

指向图片后会出现字

我来更新教程了 ╮(╯▽╰)╭  这篇教程有很多人问过我的说 - v - 原谅我之前懒惰再加上一直忘了更新  哈哈哈

根据下图图片显示的步骤来做哦 :)

然后选择【修改 Html】-->【继续】--> Ctrl + F 寻找 ]]></b:skin>

在 ]]></b:skin> 的上面添加以下的代码

.girl{
background: #E8E6E6;
color: #000;
width: 268px;
height: 210px;
opacity: 0;
margin-top:-216px;
-webkit-transition:all .5s ease-in-out;
 }

.girl:hover{
opacity:.7
}

温馨小提示 ❤
❤ 红色的字 --> 背景的颜色
❤ 橙色的字 --> 字体的颜色
❤ 黄色的字 --> 背景的宽度
❤ 青色的字 --> 背景的高度

好了就可以保存起来，选择右下角的【关闭】把修改 Html 关掉，然后选择左边那里的【布局】

添加小工具 --> Html / Jave Script 把以下的代码放下去

<img src="图片网址" height='210'width="268"/>
<div class="girl">
内容
</div>

温馨小提示 ❤
❤ 蓝色的字 --> 图片的网址
❤ 青色的字 --> 图片的高度 (要和上面那个 "背景的高度" 一样)
❤ 黄色的字 --> 图片的宽度 (要和上面那个 "背景的宽度" 一样)

注：想要空到下一行请在后面添加 <br/>

例子：

内容 <br/>
内容

好了就可以保存起来了，看看有没有成功呗 :)

你们可以把 Cbox // 音乐器还是什么都可以放在里面，发挥你们的创意 =D

成功了麻烦留言告诉我，不然我不知道这个代码是不是有问题 > <

添加另类页面 2

怎么说是另类的页面？

  --> 

先到模板 --> 修改 Html --> 继续 --> Ctrl + F 寻找【]]></b:skin>】

然后在【]]></b:skin>】的上面添加以下的代码

bb{
background:#FDF2E1;
width:60px;
padding:2px;
text-align:center;
border-left:3px solid #FCE3BD;
-webkit-transition:.5s;
}

bb:hover{
-webkit-transition: .5s;
border-left:18px solid #FCE3BD;
}

温馨小提示 ❤
❤ 红色的字 --> 背景的颜色
❤ 粉色的字 --> 背景的宽度
❤ 橙色的字 --> 旁边框框的厚度
❤ 黄色的字 --> 框框的种类
❤ 浅蓝的字 --> 框框的颜色

注：【bb:hover{】后面的代码是鼠标指向页面后的效果哦

好了过后就可以先预览看看，然后就保存起来

到布局 --> 添加小工具 --> Html / Jave Script 把以下的代码放下去

<bb><a href="链接网址">要显示的字</a></bb> 

你只要在你想要添加这个效果的前面添加 <bb>，然后在后面添加</bb>就可以了哦 :)

框框的种类可根据下图显示选择：

添加另类页面

注：转载请贴上标签 :)

就像以下中间粉色的页面，指向它后背景颜色话会变色的哦

先到模板 --> 修改 Html --> Ctrl + F 寻找【]]></b:skin>】

然后在【]]></b:skin>】的上面添加以下的代码

navi{
background:#FFECF5;
border-radius:5px;
padding:2px;
-webkit-transition-duration:3s;
}

navi:hover{
background:#ffffff;
-webkit-transition-duration:3s;
}

温馨小提示 ❤
❤ 红色的字 --> 背景的颜色

好了就保存起来，然后再到布局 --> 添加小工具 --> Html / Jave Script 把以下的代码添加下去

<navi><a href="网页链接网址">要显示的字</a></navi>

<navi><a href="网页链接网址">要显示的字</a></navi>

<navi><a href="网页链接网址">要显示的字</a></navi>

<navi><a href="网页链接网址">要显示的字</a></navi>

温馨小提示 ❤
❤ 粉色的字 --> 就是你要链接的网页上面的那个网址
❤ 橙色的字 --> 要显示的连接名字

好了就保存起来，完成

小工具标题添加颜色背景

好久都没有发教程了嗯 /3\ 请原谅我啊 xDD

预览图：

就是那个 Navigation 的背景嗯 :)

先到设计 --> 修改 Html --> Ctrl + F 寻找【h2 {】

然后在【h2 {】的下面添加以下的代码 [ps : 若之前添加过背景代码记得删除]

color:#ffffff;
background:#FFECF5;
border-radius:5px;

温馨小提示 ❤
❤ 红色的字 --> 字体的颜色
❤ 橙色的字 -->
❤ 粉色的字 --> 背景的圆角度，可自行调整数目

注意：粉色的字体可以换掉的哦，如果你想要别的形状的话 =D

框框的形状可根据下图显示所选择

A 形状的代码：

-moz-border-radius-bottomright: 50px;
 border-bottom-right-radius: 50px;

B 形状的代码：

-moz-border-radius-bottomright: 50px 25px;
 border-bottom-right-radius: 50px 25px;

C 形状的代码：

-moz-border-radius-bottomright: 25px 50px;
 border-bottom-right-radius: 25px 50px;

D 形状的代码：

-moz-border-radius: 1em 4em 1em 4em;
 border-radius: 1em 4em 1em 4em;

E 形状的代码：

-moz-border-radius: 25px 10px / 10px 25px;
 border-radius: 25px 10px / 10px 25px;

F 形状的代码：

-moz-border-radius: 35px;
 border-radius: 35px;

好了就先预览看看，如果在预览看到小工具标题后面有背景的话就代表你成功了 =D

最后保存就可以了 :)

小工具添加外框

在小工具的外面添加框框，就像上图所显示的一样，外面有圆角框框的哦

先到设计 --> 修改 Html --> Ctrl + F 寻找【/* Widgets】

然后在【----------------------------------------------- */】的下面添加以下的代码

.sidebar .widget {
background: #FFFFFF;
border:1px dashed #ccb299;
-moz-border-radius: 15px 15px;
border-radius:15px 15px;
padding:7px 10px 7px 10px;
}

温馨小提示 ❤
❤ 红色的字 --> 框框内的背景颜色
❤ 青色的字 --> 框框的厚度，数目越大框框越厚
❤ 黄色的字 --> 框框的种类
❤ 橙色的字 --> 框框的颜色
❤ 粉色的字 --> 框框的外形

框框的种类可以从下图中选择：

框框的外形可根据下图选择：

A 形状的代码：

-moz-border-radius-bottomright: 50px;
 border-bottom-right-radius: 50px;

B 形状的代码：

-moz-border-radius-bottomright: 50px 25px;
 border-bottom-right-radius: 50px 25px;

C 形状的代码：

-moz-border-radius-bottomright: 25px 50px;
 border-bottom-right-radius: 25px 50px;

D 形状的代码：

-moz-border-radius: 1em 4em 1em 4em;
 border-radius: 1em 4em 1em 4em;

E 形状的代码：

-moz-border-radius: 25px 10px / 10px 25px;
 border-radius: 25px 10px / 10px 25px;

F 形状的代码：

-moz-border-radius: 35px;
 border-radius: 35px;

好了就可以先预览看看，然后看到有框框了就可以保存起来了哦 :)

创建部落格

其实这篇是要写给我朋友的嗯>3<

当然其他的没有部落格的网友可以来看看哦 xD

先到 >>点我<< ，根据它右边给你的表来填

注意：
那个 Username 是只能放 a-z / 数字而已哦，也不能空格嗯 :)

然后都填好了只有就移到下面在【I agree...】的前面那个格子打 (√)

好了就可以点击【Next Step】了

成功注册了过后你会先来到上传 Profile 照片的页面，如果你要放照片的话点击【Add Profile Picture】，如果不要的话也能省略直接点击【Next Step】

来到了第二个步骤你就会看见你的网址显示在左边，黑体的那个就是你登录 blogger 要用的 email 了

点击【Back To Blogger】

然后就会来到新的一页，点击【Continue To Blogger】，就会到你的部落格主页了

你可以点击右上角的那个【English】来更换语言

如果你不是很明白这个部落格该怎么使用的话，你可以选择换回旧版的部落格，我个人觉得旧版的部落格会比较明白哦，我也比较好讲解 :)

点击右上角的那个齿轮，选择【Older Blogger interface】

然后就会回到旧版部落格的页面，你还没有拥有一个属于你的部落格，点击【Create Your Blog Now】

右上角粉色框框是选择语言
左边紫色框框是编辑你的 Profile
选择中间的 Create Your Blog Now 来创建部落格

输入你的部落格名字 / 部落格网址

注意：输入了部落格网址后点击它下面的【Check Availability】来检查网址的可用性，显示网址可以用了过后点击【Continue】

选择一个你喜欢的模板，随便一个都可以哦 :) 然后点击【Continue】--> 【Start Blogging】，你的部落格就创建好了哦 =D

现在你可以开始写你的部落格了咯 \(≧▽≦)/

刚刚开的部落格的外观不是很漂亮的哦，都是要自己去装修的哦 :)

以下的教程链接在美化部落格上对你有很大的帮助
❤ >> 部落格教程 <<

标题下添加分割线

顾名思义就是再小工具的标题下添加图片分割线啦 :)

先到 --> 设计 --> 修改 Html --> Ctrl + F 寻找【h2 {】

然后在【h2 {】的下面添加以下的代码

background:   url(图片网址) no-repeat scroll center;
padding:0px 0px 45px 0px;

温馨小提示 ❤
❤ 红色的字 --> 分割线的网址
❤ 橙色的字 --> 分割线的位子，可自行更改
* Left 左边
* Center 中间
* Right 左边
❤ 粉色的字 --> 数目越大，图片离标题就越下

好了就先预览看看，如果小工具标题下有了你放的分割线就代表你成功了 =D

取消关注部落格

之前有一位博友要求我写一篇教程是关于如何取消部落格的，抱歉我那么迟才发教程啊 >3<

但是你们不要取消关注我啊 T.T

好了，不和你们闹了 >3<

先到你的部落格主页，把鼠标移下来，会看到左下角那会有【添加】还有【管理】，选择【管理】

然后就就会来到新的页面，哪里会显示所有你关注的部落格，选择你不要关注的部落格右边的【设置】

如果你点进去的是选择 Google 那些的画面的话，就选择 Google，然后它会叫你输入网址还有密码，只要输入你登陆 Blogger 的那个网址还有密码就好了。

然后就会看到下图所显示的一样

选择【停止关注此网站】，然后会跳一个窗口出来，再选择一次停止关注就可以了 :)

如果你们有什么不明白的话就在 Cbox 留言告诉我 ING :)

在小工具里置放图片页面

在还没有开始这篇教程之前我希望博友如果要转载我这篇教程的话请一定要贴上我的标签，虽然可能有博友发了类似的教程，但是这篇代码绝对是我自己写出来的，请不要擅自转载 :) 谢谢

现在很多人都很喜欢用一些非主流的图片来代替页面，今天我就来发教程吧 xD

先到设计 --> 添加小工具 --> Html / Jave Script 把以下的代码放下去

<a href="链接网址"><img height='80'src="图片网址" width="118"title="要显示的字"/></a>
<a href="链接网址"><img height='80'src="图片网址" width="118"title="要显示的字"/></a>

<a href="链接网址"><img height='80'src="图片网址" width="118"title="要显示的字"/></a>

<a href="链接网址"><img height='80'src="图片网址" width="118"title="要显示的字"/></a>

温馨小提示 ❤

❤ 红色的字 --> 网页的链接网址

❤ 黄色的字 --> 图片的高度

❤ 橙色的字 --> 图片的网址

❤ 青色的字 --> 图片的宽度

❤ 粉色的字 --> 指向图片的时候要显示的字

注意：

如果你的图片要空到下一行去，像我的这样，一排只显示两个图片我就在第二个【</a>】添加【br/】，这样的话我的代码就会变成这样

<a href="链接网址"><img height='80'src="图片网址" width="118"title="要显示的字"/></a>
<a href="链接网址"><img height='80'src="图片网址" width="118"title="要显示的字"/></a>
<br/>
<a href="链接网址"><img height='80'src="图片网址" width="118"title="要显示的字"/></a>
<a href="链接网址"><img height='80'src="图片网址" width="118"title="要显示的字"/></a>

其实那个图片的宽度还有高度我都调得刚刚好了哦 :) 当然你也可以自己去调整

好了就保存起来，如果有不明白的话再来留言问我吧 =D

更改 Facebook 登录首页

这个原本是华文版的，本博主研究了英文版的好半天才成功

转载请贴上连接  谢谢 :)

现在的 Facebook 的登录首页可以换成这样了咯  相信很多美眉都一定会很喜欢 xD

先到 >>点我<<  然后选择【Add To Chrome】

添加好了过后就开多一个窗口，

点击右上角有一个扳手的图片 >> Setting >> Extensions

你就会看到一个【FB Refresh 2.0.1】，在它下面的那个格子打 (√)

然后就点击打 (√) 小个字旁边的【Options】就会来到新的页面

温馨小提示 ❤
- Image URL / Upload = 背景的网址，也能自行上传
- Repeat = 图片是小图的话能选择重复排列背景，如果是背景图片很大张就不用选择这两个
* Repeat X (horizontally):打横重复排列
* Repeat Y (vertically):垂直重复排列
- Box Color = 登录框框的背景
- Label Color = 登录框框内的字体颜色

好了就能到左下角那里点击【Save】了，新 Facebook 首页完成了 =D

帖子底端添加图片分割线

这个就是美化帖子的低端啦 :)

先到设计 --> 修改 Html --> Ctrl + F 寻找【.post{】

然后在【.post{】的下面添加以下的代码

background: url(图片网址);
background-repeat: no-repeat;
background-position: bottom center;
padding-bottom:7em;

温馨小提示 ❤
❤ 红色的字 --> 分割线的网址
❤ 粉色的字 --> 数目越大图片越下

好了就先预览看看有没有分割线 :)

有的话就成功了 =D

就可以保存起来了嗯 :)

更改 Comment 显示的字

就像上图显示的一样，把 Comment 这个字眼给改掉

这个很简单而已哦:)

先到设计 --> 点击博客帖子的【修改】

好了就会看见和下图一样的，更改后面格子里面的字就好了，想放什么就放吧 :)

好了就点击保存，过后就完成了 =D

很简单对吧??  哈哈

为 Post A Comment 添加框框 / 背景

在写这篇教程前要向某位亲爱的博友道歉，因为那个状态吓到你了  哈哈 :)

放心啦  我不会随便就骂人哒 xD

其实是最近有一些烦人的事情才写那个状态的  哈哈

好了  言归正题 :)

就好像图片里面显示的一样，为这两个小家伙添加背景呗

先到设计 --> 修改 Html --> Ctrl + F 寻找【]]></b:skin>】

然后在【]]></b:skin>】的上面添加以下的代码

背景要颜色的代码

h4 {
background-color: #FFF0AC;
border:2px #FFFFFF  solid;
color: #ffffff;
width:140px;
padding: 1px;
border-radius: 6px;
-moz-box-shadow: 0 0 20px #FFF0AC;-webkit-box-shadow: 0 0 40px #FFF0AC;
}

背景要图片的代码

h4 {
background-image: url(背景网址);
color: #ffffff;
width:140px;
}

温馨小提示 ❤
❤ 红色的字 --> 背景的颜色 / 网址
❤ 浅蓝的字 --> 框框的厚度
❤ 粉色的字 --> 框框的颜色
❤ 黄色的字 --> 框框的种类
❤ 青色的字 --> 字体的颜色
❤ 浅紫的字 --> 框框的宽度
❤ 橙色的字 --> 框框的圆度，树木越大就越圆哦
❤ 灰色的字 --> 外框阴影的颜色

好了就先预览看看代码有没有问题，如果没有问题的话就保存起来 =D

完成  哈哈

有阴影的 Highlight

好久都没有来更新教程 (╯▽╰) 博友们真是抱歉啊  哈哈

这个是在 Hightlight 的时候字的旁边有阴影的 :)

先到设计 --> 修改 Html --> Ctrl + F 寻找【]]></b:skin>】

然后在【]]></b:skin>】的上面添加以下的代码

::-moz-selection {
background: transparent;
color:#ffaad5;
text-shadow: 0px 0px 3px #FFE66F;
}
::selection {
color:#ffaad5;
background: transparent;
text-shadow: 0px 0px 3px #FFE66F;
}

温馨小提示 ❤

❤ 红色的字 --> 字体的颜色

❤ 粉色的字 --> 旁边阴影的颜色

好了就可以保存起来了 :)