博客帖子添加框框（章鱼，韩宝）

-----------------------分割线----------------------

如上图，在文章外面添加框框。

登入博客 - 信息中心 - 设计 - 修改HTML

CTRL+F 找 .post-body {

在 .post-body { 下面添加以下代码。

-moz-border-radius: 35px;

border-radius: 35px;

border: 5px solid #000000;

添加了后会像下图。

保存模板。

----------------------------小提示------------------------

可以自行美化框框哦 =）

*青色字体 = 框框线条的厚度，数目越大，厚度越厚。

*蓝色字体 = 框框线条的颜色的颜色代码

*红色字体 = 框框 线条的类型

框框的线条类型如下：

*粉色字体 = 框框的形状代码

框框的形状代码如下：

A

B

C

D

E

F

Example A 

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



Example B 

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



Example C 

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



Example D 

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



Example E 

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



Example F 

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

在每个评论添加回复按钮（夜小猫）

如图黑色箭头 ，在每个评论添加回复按钮，

回复他们的留言。

---------------------开始--------------------

第一步骤

登入博客 - 信息中心 - 设计 - 修改HTML（扩展窗口小部件模板打勾）

CTRL + F 找 

 <data:commentpostedbymsg/> 或者 <dd class='comment-footer'> 

在<data:commentpostedbymsg/> 或者 <dd class='comment-footer'> 

下面添加以下代码。

<span class='comment-reply'><a expr:href='&quot;https://www.blogger.com/comment.g?blogID=你的博客ID&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=400,height=450&quot;); return false;'>回复</a></span>

先别保存模板  =）。

第二步骤，找BLOG ID

去 设计 - 页面元素

看看上面你的网址，会有BLOG ID 的网址。

如图所示，copy BLOGID=的后面部分

paste在第一步骤代码里的红色字体

添加了后会像下图。

预览看看有没错误再保存模板。

----------------------小提示---------------------

粉色字体 = 按钮的字眼，自行修改。

要放图片的按钮（如：）就把粉色字体改成

<img src='回复按钮的图片URL'/>

更换鼠标&鼠标在指向链接时更换另个鼠标（huiying）

我是某链接，请你指向我，你就会看到效果

就是指向链接，会换成另一个鼠标。

-----------------------开始---------------------

小提示：有鼠标了的记得把你们的鼠标代码给删除，然后跟着以下步骤。

登入博客 - 信息中心 - 设计 - 页面元素 - 添加小工具 - HTML/JAVASCRIPT


在  HTML/JAVASCRIPT 里面 paste 以下代码。

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

***粉色字体 和 红色字体的鼠标是不一样的。

粉色字体 = 没有指向链接的鼠标图片URL网址
红色字体 = 指向链接后鼠标的图片Direct link


保存，完成。

文章标题下添加分割线（B3B3兒）

-----------------------分割线----------------------

如上图，在文章标题下添加分割线……

-----------------------开始----------------------

登入博客 - 信息中心 - 设计 - 修改HTML 

CTRL + F 找 /* Posts

在/* Posts

----------------------------------------------- */ 下面添加以下一款分割线代码……

第一款：图片的分割线

h3.post-title {

border-bottom: 5px solid #000000;

background:   url(图片URL) no-repeat scroll  left;

padding:0px 0px 45px 0px;

}

第二款：非图片的分割线

h3.post-title {

border-bottom: 5px solid #000000;

padding::0px 0px 5px 0px;

}

添加了后就会像下图：

保存模板。

---------------------小提示---------------------

红色字体 = 图片的网址URL
青色字体 = 数目越大，分割线越下
紫色字体 = 颜色代码
粉色字体 = 线条的类型，更换线条的类型看下图

博客帖子添加反应（amyonlyone,xiiaoyan,tracy star)

---------------------开始-------------------

如图黑色箭头，在博客帖子添加反应。

第一步骤：

登入博客 - 信息中心 - 设计 - 修改HTML - 扩展窗口小部件模板（打勾）

CTRL + F 找 <div class='post-footer-line post-footer-line-3'>

在 <div class='post-footer-line post-footer-line-3'> 下面添加以下代码

<span class='reaction-buttons'>
<b:if cond='data:top.showReactions'>
<table border='0' cellpadding='0' width='100%'><tr>
<td valign='center'><span class='reactions-label'>
<data:top.reactionsLabel/></span>
</td>
<td><iframe allowtransparency='true' class='reactions-iframe' expr:src='data:post.reactionsUrl' frameborder='0' name='reactions' scrolling='no'/></td>
</tr></table>
</b:if>
</span>

添加了后会像下图。

保存模板。

第二步骤：

再到 设计 - 页面元素 - 如下图点击博客帖子的修改 

如上图，记得在红框那里打勾，

在反应：旁边白色格子编辑你的反应

以英文的逗号（,) 弄成多项选择……

最后按保存即可。

博客文章下添加分割线（bobo）

------------------------分割线----------------------

如图黑色箭头，就是在博客帖子之间添加分割线……

------------------------开始----------------------

登入博客 - 信息中心 - 设计 - 修改HTML 

CTRL + F 找 .post {


在 .post { 下面添加以下代码。

background: url(分割线的图片网址);

 background-repeat: no-repeat;

 background-position: bottom center;

 padding-bottom:3em;

添加了后就会像下图：

预览 + 保存模板 。

------------------------小提示----------------------

红色字体 = 分割线的图片URL网址
青色字体 = 数目越大，分割线越下

制作个人博客链接（renee）

--------------------------分割线---------------------------

<center><a href="http://dulei-mylife.blogspot.com" target="_blank"><img src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjn9cpPm6i5XPXQhcrEKRrM2hVTFSU8u0LvUpnoMEsMvlgWMqHLqMrO7NpMrvy9WzUovxd_Ti0q3Uykv8wwWH7mKPJ_IWr0cRGOVcLnXlLrWM8UA1FYa1cz4ob_27foLU8KzyWSx1VahfCY/s1600/0.gif" onmouseover="this.src=' https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTT2KOqHHl-hoz4gPistVrhvIZGCSRIYuGRlvv-GEUM2AlJJs7s-_EezHBE5v3ilkYALqJ-OSK5p-HjrLnePxiOlR2vMFFOjyMCidjtWtYtP0XPXmm6YycF5H1oHLhPA8mBPHbelEZlU6p/s1600/2.gif'" onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjn9cpPm6i5XPXQhcrEKRrM2hVTFSU8u0LvUpnoMEsMvlgWMqHLqMrO7NpMrvy9WzUovxd_Ti0q3Uykv8wwWH7mKPJ_IWr0cRGOVcLnXlLrWM8UA1FYa1cz4ob_27foLU8KzyWSx1VahfCY/s1600/0.gif'" /></a></center>
就是部落之间互相交换连接的时候的博客图片连接.

----------------------------开始----------------------------

登入博客 - 信息中心 - 设计 - 页面元素 - 添加小工具 - HTML/Javascript

在 HTML/Javascript 里paste 以下代码。

<center>
<img border="0" alt="sticker" src="图片URL网址"/></center>

<center><textarea id="code" name="code"><center><a href="博客网址" target="_blank"><img src="图片URL网址"/></a></center></textarea></center>

完成。

效果 ：

----------------------------提示----------------------------

红色字体 = 图片的URL网址

粉色字体 = 你的博客网址

添加List列表图标（韩小爵）

---------------------分割线--------------------

如上图，添加列表图标。

--------------------开始-------------------

Sign in博客 - 信息中心 - 设计 - 修改HTML

CTRL+F 找 /* Widgets

在 /* Widgets
----------------------------------------------- */ 下面添加以下代码

.widget ul li, .widget #ArchiveList ul.flat li {
background: url(图片网址) left no-repeat;
padding-left:20px;
}

添加了后会像下图：

保存模板。

---------------------小提示----------------------

* 红色字体 = 图片的网址

将博客头图调去中间

-------------------------分割线----------------------

如上图所示，将博客头图移到中间。

-------------------------开始----------------------

登入博客 - 信息中心 - 设计 - 修改HTML

CTRL+F 找 /* Header

在 /* Header
----------------------------------------------- */ 下面放以下代码

#header {
	margin: 0px 0px 0px 300px;
	padding: 0px 0px 0px 0px;
	text-align: center;
	}

添加了后，会像下图。

预览+保存模板。

红色字体 - 更改头图位置，数目越大，图片越向右边

让youtube播放器“行走移动”（给12人）

因为有12人问过，所以只好筛选出来放4个而已，

也懒惰在这里报其他 8人姓名（欧），不好意思哈╮(╯▽╰)╭

------------------------分割线------------------------

例子1

例子2

如上图所示，让youtube播放器自行“行走移动”。

-----------------------教学开始-----------------------

第一步骤：拿网址后面部分

先到youtube找你喜欢的歌……

拿网址的后面部分，

http://www.youtube.com/watch?v=xxxxxxxxx

例子：

http://www.youtube.com/watch?v=gj1HcughPSg

拿网址的后面部分（我highlight的地方）

如果你的网址后面有&feature=related，不要copy，如上图，copy蓝色部分，粉红框框不要copy

例子：

http://www.youtube.com/watch?v=gj1HcughPSg&feature=related

只copy黄色hightlight部分，粉色字体不要copy

第二步骤：

Sign in博客 - 信息中心 - 设计 - 页面元素 - 添加小工具 - HTML/Javascript

copy以下代码paste到HTML/Javascript

<marquee direction="up" style="position: fixed;right: 2%; top: 0%;width:25px; height:600px;"><embed src="http://www.youtube.com/v/网址后面部分?fs=1&amp;hl=en_GB&amp;rel=0；&amp;autoplay=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="25" height="25"></embed></marquee>

完成。

-----------------------小提示-----------------------

* 红色字体 = youtube网址后面部分

* 青色HIGHLIGHT = youtube音乐播放器移动的方向，可以跟着以下颜色更换

右边向下移动

down ,  right , 25 , 600

左边向下移动 （如上图所示**）

down ,  left , 25 , 600

上方向左移动 (如上图所示**）

left ,  left , 1000 , 25

上方向右移动

left ,  right , 1000 , 25

还有很多方向移动，自行挖掘 ，当然如果不会可以问我…… =）