泪划痕
Best viewed in Google Chrome

2011年8月31日星期三

博客帖子添加框框(章鱼,韩宝)

-----------------------分割线----------------------
如上图,在文章外面添加框框。

登入博客 - 信息中心 - 设计 - 修改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'/>

2011年8月30日星期二

更换鼠标&鼠标在指向链接时更换另个鼠标(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


保存,完成。

2011年8月29日星期一

文章标题下添加分割线(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
青色字体 = 数目越大,分割线越下
紫色字体 = 颜色代码
粉色字体 = 线条的类型,更换线条的类型看下图

2011年8月28日星期日

博客帖子添加反应(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>

添加了后会像下图。
保存模板。

步骤:
再到 设计 - 页面元素 -下图点击博客帖子修改 

上图,记得在红框那里打勾,
反应:旁边白色格子编辑你的反应
英文的逗号,) 弄成多项选择……

最后按保存即可。

2011年8月27日星期六

博客文章下添加分割线(bobo)


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

如图黑色箭头,就是在博客帖子之间添加分割线……
------------------------开始----------------------
登入博客 - 信息中心 - 设计 - 修改HTML 

CTRL + F .post {


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

background: url(分割线的图片网址);
 background-repeat: no-repeat;
 background-position: bottom center;
 padding-bottom:3em;

添加了后就会像下图
预览 + 保存模板 。
------------------------小提示----------------------
红色字体 = 分割线的图片URL网址
青色字体 = 数目越大,分割线越下

2011年8月25日星期四

制作个人博客链接(renee)

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



sticker

就是部落之间互相交换连接的时候的博客图片连接.

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

登入博客 - 信息中心 - 设计 - 页面元素 - 添加小工具 - 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网址
粉色字体 = 你的博客网址

2011年8月21日星期日

添加List列表图标(韩小爵)


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

如上图,添加列表图标。
--------------------开始-------------------
Sign in博客 - 信息中心 - 设计 - 修改HTML

CTRL+F /* Widgets

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

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

添加了后会像下图:
保存模板。

---------------------小提示----------------------
* 红色字体 = 图片的网址

2011年8月15日星期一

将博客头图调去中间

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

如上图所示,将博客头图移到中间。
-------------------------开始----------------------
登入博客 - 信息中心 - 设计 - 修改HTML

CTRL+F /* Header

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


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


添加了后,会像下图。
预览+保存模板。

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

2011年8月13日星期六

让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

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