Mr. GaGa 工作室

添加follow button在帖子中

2011-03-17T01:18:00.000-07:00

效果如图：

打开设计→修改HTML
然后在『扩展窗口小部件模板』的空格打勾。

同时按着键盘上 Ctrl 和 F，
寻找

<div class='post-body entry-content'>

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

 <a href='http://www.blogger.com/follow-blog.g?blogID=1597981694362151590' style='clear: right; float: right; margin-bottom: 1px; margin-left: 1em;'><img src='http://img80.imageshack.us/img80/7462/followa.png'/></a>

tips:
蓝色部分为图片网址，可自行更改。

红色部分为blogID
你可以在你的修改HTML的网址中得到你的blogID
如图：

最后再按个保存就行啦~？
不明白得可以举手发问....

放置CHAT BOX背景

2011-03-15T06:54:00.000-07:00

FOR SHOUTMIX

首先，
先去设计→页面元素→添加小工具→HTML/JavaScript
paste你的shoutmix code

再copy以下的code

<div align="center" id="shoutmix" style="background: url(图片网址) no-repeat scroll left top transparent; height: 230px; padding-top: 30px; position: relative; width: 479px;">

把刚刚的code放在  后面

如图：

tips:
code里面的的 height（高度） , width（宽度）还有 padding-top 要跟着背景图片大小更改。

如图：

FOR CBOX

首先，
先去设计→页面元素→添加小工具→HTML/JavaScript

paste你的cbox code

把框里的字删除

再把那些字换成以下代码

<div align="center" id="shoutmix" style="background: url("图片网址") no-repeat scroll left top transparent; height: 450px; padding-top: 30px; position: relative; width: 220px;">

tips:
code里面的的 height（高度） , width（宽度）还有 padding-top 要跟着背景图片大小更改。

如图：

自制comment图片。

2011-03-15T04:45:00.000-07:00

又是我DIY时间啦～
希望会喜欢.........(终于肯滚上来的说

如何放置？按我，到在comment-form添加图片教程

http://img849.imageshack.us/img849/2079/twy95i.gif

http://img560.imageshack.us/img560/8459/twy95ii.gif

http://img190.imageshack.us/img190/6021/twy95iii.gif

http://img651.imageshack.us/img651/9692/twy95iv.gif

http://img36.imageshack.us/img36/1930/twy95v.gif

转载请注明。谢谢....

CHAT BOX背景 - 炎亚纶

2011-03-05T07:48:00.000-08:00

连续第四篇？我疯了。

做这个CHAT BOX让我很尴尬。
因为炎亚纶从头到尾一直都在望着我......... >/////////////<

大
width: 280px
height: 532px
http://img171.imageshack.us/img171/3401/aaronbp.png

小
width: 230px
height: 479px
http://img109.imageshack.us/img109/8585/aaronsj.png

CHAT BOX背景 - 倪安东

2011-03-05T01:16:00.000-08:00

真是够了我？
连续发3篇CHAT BOX skin.....
Akina，你要的pink colour倪安东。

大
width: 280px
height: 400px
http://img545.imageshack.us/img545/6410/anthonyb.png

小
width: 230px
height: 370px
http://img841.imageshack.us/img841/5193/anthonys.png

CHAT BOX背景 - DREAM HIGH

2011-03-04T10:54:00.000-08:00

呃.....我是个夜猫子``
今天真的睡不着，就做了这个。
总觉得太单调了.....又不知道该加什么？/ n \

大
width: 280px
height: 475px
http://img402.imageshack.us/img402/5624/dreamhigh.png

小
width: 230px
height: 417px
http://img51.imageshack.us/img51/5142/dreamhighs.png

CHAT BOX背景 - SHINEE

2011-03-03T22:04:00.000-08:00

SHINEE.........?!

大
width: 280px
height: 469px
http://i793.photobucket.com/albums/yy211/twy_95/Decorated%20images/chat%20box/shineeb.gif

小
width: 230px
height: 430px
http://i793.photobucket.com/albums/yy211/twy_95/Decorated%20images/chat%20box/shinees.gif

使用 PHOTOSCAPE 制作动画

2011-02-17T23:35:00.000-08:00

效果如图：
CN BLUE!!

首先，先打开PHOTOSCAPE。选择GIF 动画

从文件夹中找出要制作动画的图片(最好都放在同个文件夹里)，
再把你要制作动画的图片移至箭头指向出。

接下来的图片也可依照上面的步骤。
或者，你也可以按添加→添加图片

Oops...如果不小心放错了图片，点选那张图片后，按"X"把它删除。
垃圾桶符号则是把所有图片都删除。

按播放钮是播放你制作的动画，如果觉得很烦的话，可以按暂停钮。

若你想要改变动画速度，请按改变时间 (数目值越大，动画变得越慢）

若你要改变显示效果，请按改变动画效果。选择你要的效果...

如果你的图片大小不一致建议按画布大小，选择保持第一张图片大小
图片对齐建议在中央

最后再按保存就行啦！

囧男有话想说：
好长～的一篇。会很lag吗？

把帖子中的图片框弄不见

2011-02-17T02:51:00.000-08:00

是不是觉得那框很碍眼？

首先,
去设计→修改HTML

FOR 旧模板
同时按着键盘上 Ctrl 和 F，
寻找

 .post img

再把它下面类似这样的代码删掉

 border:1px solid $bordercolor; 

如图：

把红色框里的字删除，再保存就行啦！

FOR 新模板
同时按着键盘上 Ctrl 和 F，
寻找

.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {

再把它下面类似这样的代码删掉

-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
-goog-ms-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);

如图：

把红色框里的字删除，再保存就行啦！

可爱对话框

2011-02-09T02:45:00.000-08:00

BLa BLa BLa........
最近没时间更新哪～都嘛老师害的，给酱多功课。

聊天室的留言迟些再回复，sorry@

很久没分享表情了，希望你们会LIKE IT~ ♥

click me to download all!

能移动的博客标题

2011-02-01T21:09:00.000-08:00

先进去这里→ http://www.bosiljak.hr/titlemaker/

接着，跟着以下步骤..
① 在 Add title bar message 写入你要的标题文字
② 按 Add，接着你也可以输入第二排文字（如果想要更多拍文字，可以重复步骤①&②
③ 在 Choose an effect 选择你要现实的效果
④ 你可以按 Preview 预览效果
⑤ 按 OK,Generate Code
⑥ 在 Generated Code copy你的代码

最后去设计→页面元素→添加小工具→HTML/JavaScript
发放入刚刚的代码就行了!

CHAT BOX背景 - 原来是美男啊～

2011-01-31T20:04:00.000-08:00

原来是美男啊～
小lie托我弄的.....希望你们会喜欢。

大
width: 290px
height: 568px
http://img696.imageshack.us/img696/3977/43394447.gif

小
width: 220px
height: 461px http://img835.imageshack.us/img835/4055/58191228.gif

SPECIAL
JEREMY!!! 这个我大爱 ♥ 啊～很佩服自己的说......

大
width: 280px
height: 440px
http://img406.imageshack.us/img406/1355/21965049.gif

小
width: 220px
height: 360px
http://img146.imageshack.us/img146/9750/87625725.gif

拿走了记得留言喂～

添加Facebook like button

2011-01-31T03:00:00.000-08:00

↑ 效果如上

首先,
去设计→修改HTML

然后在『扩展窗口小部件模板』的空格打勾。

同时按着键盘上 Ctrl 和 F，
寻找

 <div class='post-header-line-1'/>

或寻找

 <data:post.body/>

接着在以上代码的后面加上

 <iframe allowTransparency='true'  expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot;  + data:post.url +  &quot;&amp;layout=standard&amp;show_faces=false&amp;width=100&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;'  frameborder='0' scrolling='no' style='border:none; overflow:hidden;  width:450px; height:40px;'/>

或许你想放在小工具。

首先，
先去设计→页面元素→添加小工具→HTML/JavaScript
再放入以下的code

 <iframe  allowTransparency='true'   expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot;   + data:post.url +   &quot;&amp;layout=standard&amp;show_faces=false&amp;width=100&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;'   frameborder='0' scrolling='no' style='border:none; overflow:hidden;   width:450px; height:40px;'/>

easy?

透明化效果

2011-01-30T23:35:00.000-08:00

效果如图（帖子：
点击放大。

没看过有人的实验室也布置得那么美的。哇哈哈（踹

打开设计→修改HTML

copy以下代码
filter:alpha(opacity=80); -moz-opacity:0.80; opacity:0.80; -khtml-opacity:0.80;

然后，你可以把代码放在以下其中一个的 { ........ } 之间
#header-wrapper
#outer-wrapper
#main-wrapper
#sidebar-wrapper
#comments-block
.post-body
.sidebar .widget, .main .widget

CHAT BOX背景 - 东于哲

2011-01-29T19:54:00.000-08:00

JWen..希望你会喜欢。
弄得很赶~因为等下要出门了XD
喜欢也可以拿去用啦喂～

大
width: 290px
height: 420px
http://img703.imageshack.us/img703/9997/thomasjack.gif

小
width: 220px
height: 360px
http://img253.imageshack.us/img253/8268/thomasjacks.gif

指向链接有彩虹效果

2011-01-28T20:09:00.000-08:00

打开设计→修改HTML

同时按着键盘上 Ctrl 和 F，
寻找
</head>

在的</head>上面加上以下代码就行了!
<script src='http://ggpi.googlecode.com/files/rainbow.js' type='text/javascript'/>

禁止right click 加强版 ( 连highlight也不能 )

2011-01-22T23:33:00.000-08:00

打开设计→修改HTML

FOR 旧模板
同时按着键盘上 Ctrl 和 F，
寻找

<body>

用以下代码把 <body> 给替换掉

<body onmousedown="return false" oncontextmenu="return false" onselectstart="return false">

FOR 新模板
同时按着键盘上 Ctrl 和 F，
寻找

<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

用以下代码把 <body> 给替换掉

<body expr:class='&quot;loading&quot; + data:blog.mobileClass' onmousedown="return false" oncontextmenu="return false" onselectstart="return false">

Easy?

在 comment-form 添加图片

2011-01-20T03:02:00.000-08:00

效果如图：

打开设计→修改HTML
然后在『扩展窗口小部件模板』的空格打勾。

同时按着键盘上 Ctrl 和 F，
寻找

<div class='comment-form'>

在他后面添加以下代码。

<img src='图片网址'/>

再按保存就行啦～（简单教程 =]

囧男有话想说：
想发日记，但想想.............还是算了呗～

小粒头？

2011-01-17T03:45:00.000-08:00

因为他的头很小粒，所以就叫小粒头。（很废的讲解

click me to download all!

囧男有话想说：
早上喊到快烧声啦

米卤蛋

2011-01-14T23:12:00.000-08:00

♥小笨我放给你啦XD









click me to download all!

囧男有话想说：
哈哈。香蕉你个芭樂

加强博主和访客留言的差别

2011-01-14T00:29:00.000-08:00

效果如图：

( 为了以防万一，请先下载您的完整模板 )

step 1：

打开设计→修改HTML
然后在『扩展窗口小部件模板』的空格打勾。

同时按着键盘上 Ctrl 和 F，
寻找类似以下的代码

<dd expr:class='"comment-body " +  data:comment.commentAuthorClass' expr:id='data:widget.instanceId +  data:comment.cmtBodyIdPostfix'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p>
<data:comment.body/>
<span class='interaction-iframe-guide'/>
</p>
</b:if>
</dd>

copy以下代码，然后把上面的代码给替换掉

<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<b:if cond='data:comment.author == data:post.author'>
<p>
<div class='comment-owner'>
<data:comment.body/>
</div>
</p>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</b:if>
</dd>

step 2：

完成之后，寻找

]]></b:skin>

在]]></b:skin>之前，添加以下代码

.comment-owner {
margin:0; 
color: #cccccc; /*字体颜色*/
font-size: 10px; /*字体大小*/
line-height: 1.5em; 
background-color: #ffffff; /*背景颜色*/
border: 1px dotted #cccccc;
padding:5px;
}

成功了记得告诉我啦XD

囧男有话想说：
留言啦～拜托。

页面BUTTON教程

2011-01-12T00:26:00.000-08:00

这教程会有点复杂，不明白的可以发问。

什么是页面BUTTON啊？
如下图：

step 1：

打开设计→修改HTML
然后在『扩展窗口小部件模板』的空格打勾。

同时按着键盘上 Ctrl 和 F，
寻找

<b:loop values='data:links' var='link'>

copy以下代码，放在 <b:loop values='data:links' var='link'> 之前

<ul class='pagebutton'> 

然后在 <b:loop values='data:links' var='link'> 下面你会看到类似这样的代码

        <b:if cond='data:link.isCurrentPage'>
          <li class='selected'><a expr:href='data:link.href'><data:link.title/></a></li>
        <b:else/>
          <li><a expr:href='data:link.href'><data:link.title/></a></li>
        </b:if>
      </b:loop>
    </ul>

你就在这些代码后面再加上

</ul>

所以后面会有两个 </ul> ，如图：

step 2：

完成之后，寻找

]]></b:skin>

在]]></b:skin>之前，添加以下代码


/* pagebutton
----------------------------------------------- */
.pagebutton li a{
padding:5px;
background:#000000; /*背景颜色*/
text-decoration: none;
margin: 0; 
font-size:12px; /*字体大小*/
}

.pagebutton li.selected a{ /*已选择的效果*/
font-weight:bold;
background:#cccccc; /*背景颜色*/
}

.pagebutton a:hover { /*指向时的效果*/
background:#eeeeee; /*背景颜色*/
}

tips:
● 背景颜色和字体大小可自行修改
● 你也可以在里面加 text-shadow 按我，到 text-shadow 教程
● 也可以在里面加 -moz-border-radius: 10px; 以增加弧度。

囧男有话想说：
其实我只会弄教程，不懂得教啊～

改变工具栏标题的第一个字

2011-01-10T00:02:00.000-08:00

打开设计→修改HTML。

同时按着键盘上 Ctrl 和 F，
寻找

]]></b:skin>

copy以下代码，放在 ]]></b:skin> 之前

.sidebar h2:first-letter{
font-weight:bold; /*粗字体*/
font-style:italic; /*斜字体*/
font-size:15px; /*字体大小*/
color:$sidebarcolor; /*字体颜色*/
}

tips:
● 如果不要粗字体，可以把 bold 改成 normal
● 如果不要斜字体，可以把 italic 改成 normal
● 如果想更换字体大小，可以把 15px 改成你要的大小
● 如果想更换字体颜色，可以把 $sidebarcolor 改成你要的颜色代码按我，到颜色代码
● 你也可以在里面加 text-shadow 按我，到 text-shadow 教程

囧男有话想说：
我的教程都很 colourful 的XD

ANI 机器人

2011-01-08T18:58:00.000-08:00

分享素材囉～
上次分享大概是去年的事吧?!!
不管啦！反正我也把它删掉了XD

click me to download all!

囧男有话想说：
我发现好多系列的表情都有这个--〉 (杯具啊~

text-shadow

2011-01-07T20:33:00.000-08:00

这教程或许还有很多人不会吧？

I am Sample

先copy 以下代码
text-shadow:0px 0px 1px #999999;

tips:
红色= 影子左右。例子：" -5px " = 往左5px / " 5px " = 往右5px (距离可以自行修改
橙色= 影子上下。例子：" -5px " = 往上5px / " 5px " = 往下5px (距离可以自行修改

黄色= 影子的散度。例子：
青色= 颜色代码按我，到颜色代码

若是要放在帖子里，
先去编辑器的修改HTML
放以下的代码

<span style=" 放在这里 "> 你要的字 </span>

如图：

再按撰写就会看到效果啦！

若是要放在修改HTML，
就放在{.....}之间。如图

囧男有话想说：
怎么都没人留言啊?!!

制作个人链接

2010-08-21T02:05:00.001-07:00

首先，
先去设计→页面元素→添加小工具→HTML/JavaScript
再放入以下的code

<center>
<img border="0" alt="sticker" src="照片direct link"/></center>

<center><textarea  id="code"  name="code"><center><a href="部落网址"   target="_blank"><img src="照片direct   link"/></a></center></textarea></center>

这样就大功告成咯!!

把sidebar widget 放开

2010-08-14T22:14:00.001-07:00

效果如图：

首先,
去布局/设计→修改HTML 然后，
同时按着键盘上 ctrl 和 f
寻找
.sidebar .widget, .main .widget {
再把红色的那部分给拿掉。

在他的下面加

margin:10px 0px .75em;
padding-:5px;
-moz-border-radius: 10px;
border: 1px solid #F1E7E2;
background:#FFFDFC;

tips:
紫色= 更换弧度大小。如果不要弧度可以改为0
蓝色= 框线的粗度。
橙色= 框线的款式。如：solid, dotted, dashed ......
绿色= 更换颜色

换favicon

2010-07-23T02:08:00.001-07:00

favicon就是网址旁边的那个图案。

效果如图：

首先,
去设计→修改HTML
然后，
同时按着键盘上 ctrl 和 f
寻找

<title><data:blog.pageTitle/></title>

之后在他后面添加以下的code

<link href='图片网址' rel='shrtcut icon' type='image/图片类型'/>

例子：<link href='http://dl9.glitter-graphics.net/pub/408/408809hh214cw5hz.gif' rel='shrtcut icon' type='image/gif'/>

再按保存就行啦!!!
easy?

如何使用blogskin

2010-07-12T07:38:00.001-07:00

注意。
使用blogskin是不能发表评论的。
还有你一旦按了还原经典板模后，
所有的小工具将消失，
必须重新放过。
所以要先想好再换哦~

1）去这里寻找你要的blogskin

2）click你要的blogskin然后进到里面。你就会在它下面看到

3）然后选择blogger main下载....

4 ) 过后，到设计→修改HTML ，拉到最下面你会看到还原到经典模板，如图[粉红框的]：

5 ）按进去后，把里面的代码全部删除，换上刚刚下载的blogskin代码就可以了....

添加代码框

2010-06-24T05:57:00.001-07:00

效果如图：

首先,
去设计→修改HTML 然后，
同时按着键盘上 ctrl 和 f
寻找
body {

在他下一个的body{.....} 的下面添加

code {
display: block; /* fixes a strange ie margin bug */
font-family: Courier New;
font-size: 9pt;
overflow:auto;
background: #ffffff ;
border: 2px solid #52638;
padding: 5px 5px 5px 20px;
max-height:200px;
line-height: 1.2em;
margin: 5px 5px 0 15px;
}

红色的字就代表颜色代码。按我，到颜色代码

记得在每次使用的时候，在代码前后都要加上

<code>代码</code>

这样就大功告成了~~~~

back to top

2010-06-14T03:14:00.001-07:00

首先，
先登入你的blog账号。

按了过后你会看到

在标题旁边的格子里打上
就完成了。

在comment-block加图片

2010-06-14T00:21:00.001-07:00

例子[紫色框里的那个]：

首先,
去设计→修改HTML
然后，
同时按着键盘上 ctrl 和 f
寻找
#comments-block {

然后在他下面加
background:url(图片网址) no-repeat right top;

过后就大功告成了！
easy?

在comment-body加框框

2010-06-09T05:12:00.001-07:00

例子如下：

首先,
去设计→修改HTML
然后，同时按着键盘上 ctrl 和 f
寻找
#comments-block .comment-body p {

然后在它下面加

border:1px solid #cccccc;
padding:5px;
background:url(图片网址);

这样就可以了!!!

放鼠标

2010-06-08T22:13:00.001-07:00

首先,
去布局/设计→修改HTML
然后，
同时按着键盘上 ctrl 和 f
寻找
body {

过后在 body{....} 的 } 之前添加以下的code

cursor: url("鼠标网址"),
url("鼠标网址"), auto;

完成啦～

介绍一些小图片给大家参考哦~

http://cur.cursors-4u.net/holidays/hol-4/hol357.cur

http://cur.cursors-4u.net/holidays/hol-4/hol358.cur

http://cur.cursors-4u.net/holidays/hol-4/hol356.cur

http://cur.cursors-4u.net/holidays/hol-4/hol345.cur

http://cur.cursors-4u.net/holidays/hol-4/hol340.cur

添加页面

2010-06-08T21:43:00.001-07:00

如图：

首先，
先去设计→页面元素→添加小工具→页面
进去页面后，
按保存

然后去发帖→编辑页面→新建页面
过后，
你就会看到一个编辑器[如下图]:

在页面标题那边
打下你要的页面名称，如： 关于我，博客教学.......
格子里就打你要的内容
然后按发布页面。

换hightlight的颜色

2010-06-08T05:54:00.001-07:00

首先,
去设计→修改HTML
然后，
同时按着键盘上 ctrl 和 f
寻找
a img {

然后在 a img {......} 的后面加

::-moz-selection {
background-color:颜色代码;
color:颜色代码;
}

按我，到颜色代码

编排如图：

在帖子旁边放图案。

2010-06-04T05:29:00.003-07:00

效果如图：

首先,
去设计→修改HTML
然后，
同时按着键盘上 ctrl 和 f
寻找
.post-body {

过后在它下面加
background:url(图片网址) no-repeat right top;

放帖子背景

2010-06-04T05:29:00.002-07:00

首先,
去设计→修改HTML
然后，
同时按着键盘上 ctrl 和 f
寻找
.post {

过后在它下面加

  border:1px solid #cccccc;
padding:5px;
background:url(图片网址);