✟ 神秘の科学城 ✟: 2011

制作Copyright



1. Design => Edit HTML => 按 Ctrl+F 寻找  </body>

2. 在 </body> 的上面Paste以下的Code：

<script type='text/javascript'> window.setTimeout(function() { document.body.className = document.body.className.replace(&#39;loading&#39;, &#39;&#39;); }, 10); </script><center>把你要写的文字更换</center>



记得更换青色字体

Preview没问题之后，Save :D

没有评论:

如何更换部落格鼠标

第1个方法

1. 按 这里 选择鼠标

2. 把你选择好了的鼠标的Code Copy起来



3. 回到你的部落格Design => Add a Gadget => HTML/Java Script

4. 把刚刚Copy的Code Paste在里面

5. 之后在Code里面，请保留 <style 和 </style>之间的Code，后面的 <a 和 </a> 的Code全部删除，如图：



然后Save就行了 :D
按 这里 查看鼠标


第2个方法

其实很简单哦~^^

1. Design => Edit HTML => 按 Ctrl+F 寻找 ]]></b:skin>


2. 在 ]]></b:skin> 的上面Paste以下的Code：


body, a, a:hover {cursor: url(鼠标 URL), progress;}






3. 鼠标URL你们可以到以下3个网站找：



找到喜欢的鼠标之后，按Right Click，然后Copy Image URL，替代上面的鼠标URL



第3个方法

1. Design => Edit HTML => 按 Ctrl+F 寻找 <head>


★ 如果你要鼠标没有在连接出现，也就是说平时看到的，你就在 <head> 的之后Paste这个Code：
<style>body{cursor: url("鼠标1"), url("鼠标1"), auto;}</style> 

★ 相反的，如果你要鼠标指向连接时出现，那么你就在 <head> 的之后Paste这个Code：
<style>A:hover{cursor: url("鼠标2"), url("鼠标2"), auto;}</style>

★ 如果你要你部落格同时拥有2个鼠标，一个是平时看到，一个是鼠标指向连接时看到的话，那么你就在 <head> 之后Paste这个Code：
<style>body{cursor: url("鼠标1"), url("鼠标1"), auto;}</style><style>A:hover{cursor: url("鼠标2"), url("鼠标2"), auto;}</style>

记得把绿色字体替换成鼠标URL 


如何使用自制鼠标

1. 把你自制好的鼠标上载到 Photobucket，然后获取鼠标的Direct Link，不懂如何获取Direct Link的话，按这里


2. 之后回到部落格，Design => Edit HTML => 按 Ctrl+F 寻找 ]]></b:skin>


3. 在 ]]></b:skin> 的上面Paste以下的Code：
body, a, a:hover {cursor: url(鼠标 URL), progress;} 

检查Code没问题之后就Save，完成:D
1 条评论:

如何调整Gadget标题位置

之前一直在想，到底怎样调那个Gadget标题位置啊？！我のGadget标题位置显示在左边の，现在终于学会把它调到中间去了，哈哈哈！

如图：



1. Design => Edit HTML => 按 Ctrl+F 寻找  h2 {

2. 在  h2 { の下面Paste以下のCode：

text-align: center;


小提醒：
1. 青色字是标题显示位置，可以替换成 Left 或者 Right 


没有评论:

鼠标滑过时有泡泡飘起来





就是这个效果啦~ 鼠标移动时，就会有泡泡咯~

1. Design => Page Elements => Add a Gadget => HTML/Java Script 

<noscript></noscript><!-- --><script type="text/javascript" src="http://www.freewebs.com/p.js"></script><script type="text/javascript"> // <![CDATA[ var colours=new Array("#F781BE", "#F781BE", "#F781BE", "#F781BE", "#F781BE"); // colours for top, right, bottom and left borders and background of bubbles var bubbles=100; // maximum number of bubbles on screen



 /**************************** * JavaScript Bubble Cursor * * (c) 2010 mf2fm web-design * * http://www.mf2fm.com/rv * * DON'T EDIT BELOW THIS BOX * ****************************/ var x=ox=400; var y=oy=300; var swide=800; var shigh=600; var sleft=sdown=0; var bubb=new Array(); var bubbx=new Array(); var bubby=new Array(); var bubbs=new Array();



 window.onload=function() { if (document.getElementById) { var rats, div; for (var i=0; i<bubbles; i++) { rats=createDiv("3px", "3px"); rats.style.visibility="hidden";



 div=createDiv("auto", "auto"); rats.appendChild(div); div=div.style; div.top="1px"; div.left="0px"; div.bottom="1px"; div.right="0px"; div.borderLeft="1px solid "+colours[3]; div.borderRight="1px solid "+colours[1];



 div=createDiv("auto", "auto"); rats.appendChild(div); div=div.style; div.top="0px"; div.left="1px"; div.right="1px"; div.bottom="0px" div.borderTop="1px solid "+colours[0]; div.borderBottom="1px solid "+colours[2];



 div=createDiv("auto", "auto"); rats.appendChild(div); div=div.style; div.left="1px"; div.right="1px"; div.bottom="1px"; div.top="1px"; div.backgroundColor=colours[4]; div.opacity=0.5; if (document.all) div.filter="alpha(opacity=50)";



 document.body.appendChild(rats); bubb[i]=rats.style; } set_scroll(); set_width(); bubble(); }}



 function bubble() { var c; if (x!=ox || y!=oy) { ox=x; oy=y; for (c=0; c<bubbles; c++) if (!bubby[c]) { bubb[c].left=(bubbx[c]=x)+"px"; bubb[c].top=(bubby[c]=y)+"px"; bubb[c].width="3px"; bubb[c].height="3px" bubb[c].visibility="visible"; bubbs[c]=3; break; } } for (c=0; c<bubbles; c++) if (bubby[c]) update_bubb(c); setTimeout("bubble()", 40); }



 function update_bubb(i) { if (bubby[i]) { bubby[i]-=bubbs[i]/2+i%2; bubbx[i]+=(i%5-2)/5; if (bubby[i]>sdown && bubbx[i]>0) { if (Math.random()<bubbs[i]/shigh*2 && bubbs[i]++<8) { bubb[i].width=bubbs[i]+"px"; bubb[i].height=bubbs[i]+"px"; } bubb[i].top=bubby[i]+"px"; bubb[i].left=bubbx[i]+"px"; } else { bubb[i].visibility="hidden"; bubby[i]=0; return; } } }



 document.onmousemove=mouse; function mouse(e) { set_scroll(); y=(e)?e.pageY:event.y+sleft; x=(e)?e.pageX:event.x+sdown; }



 window.onresize=set_width; function set_width() { if (document.documentElement && document.documentElement.clientWidth) { swide=document.documentElement.clientWidth; shigh=document.documentElement.clientHeight; } else if (typeof(self.innerHeight)=="number") { swide=self.innerWidth; shigh=self.innerHeight; } else if (document.body.clientWidth) { swide=document.body.clientWidth; shigh=document.body.clientHeight; } else { swide=800; shigh=600; } }



 window.onscroll=set_scroll; function set_scroll() { if (typeof(self.pageYOffset)=="number") { sdown=self.pageYOffset; sleft=self.pageXOffset; } else if (document.body.scrollTop || document.body.scrollLeft) { sdown=document.body.scrollTop; sleft=document.body.scrollLeft; } else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) { sleft=document.documentElement.scrollLeft; sdown=document.documentElement.scrollTop; } else { sdown=0; sleft=0; } }



 function createDiv(height, width) { var div=document.createElement("div"); div.style.position="absolute"; div.style.height=height; div.style.width=width; div.style.overflow="hidden"; return (div); } // ]]> </script>




小提醒：
1. 红色字是泡泡の颜色代码
2. 青色字是泡泡の数量 


3 条评论:

在部落格标题下添加线条




有没有看到标题下面の线条？！其实很简单而已~^^

1. Design => Edit HTML => 按 Ctrl+F 寻找   .Header h1 { 

2. 在  .Header h1 { の下面 Paste 以下のCode：

border-bottom: 5px dashed #000000;
padding: 5px;


小提醒：

1. 青色号码是线条の厚度，可以随意更改 :D

2. 红色字是线条类型，可以替换成你喜欢の线条类型，给你们一些Example：



3.  橙色字 是颜色代码，可更换成别の颜色代码


没有评论:

如何把部落格标题设定在中间

有没有发现之前我の部落格标题是在左边の？！现在终于把它Setting在中间了 :D 哈哈哈哈~


现在把这个教学分享出来，呵呵呵！


1. Design => Edit HTML => 按Ctrl+F寻找 .Header h1 {


2. 在 .Header h1 {  の下面 Paste以下のCode：

text-align: center;


只需2个步骤，完成 :P


没有评论:

颜色代码


#000000#2F0000#600030#460046#28004D
#272727#4D0000#820041#5E005E#3A006F
#3C3C3C#600000#9F0050#750075#4B0091
#4F4F4F#750000#BF0060#930093#5B00AE
#5B5B5B#930000#D9006C#AE00AE#6F00D2
#6C6C6C#AE0000#F00078#D200D2#8600FF
#7B7B7B#CE0000#FF0080#E800E8#921AFF
#8E8E8E#EA0000#FF359A#FF00FF#9F35FF
#9D9D9D#FF0000#FF60AF#FF44FF#B15BFF
#ADADAD#FF2D2D#FF79BC#FF77FF#BE77FF
#BEBEBE#FF5151#FF95CA#FF8EFF#CA8EFF
#d0d0d0#ff7575#ffaad5#ffa6ff#d3a4ff
#E0E0E0#FF9797#FFC1E0#FFBFFF#DCB5FF
#F0F0F0#FFB5B5#FFD9EC#FFD0FF#E6CAFF
#FCFCFC#FFD2D2#FFECF5#FFE6FF#F1E1FF
#FFFFFF#FFECEC#FFF7FB#FFF7FF#FAF4FF
#000079#000079#003E3E#006030#006000
#000093#003D79#005757#01814A#007500
#0000C6#004B97#007979#019858#009100
#0000C6#005AB5#009393#01B468#00A600
#0000E3#0066CC#00AEAE#02C874#00BB00
#2828FF#0072E3#00CACA#02DF82#00DB00
#4A4AFF#0080FF#00E3E3#02F78E#00EC00
#6A6AFF#2894FF#00FFFF#1AFD9C#28FF28
#7D7DFF#46A3FF#4DFFFF#4EFEB3#53FF53
#9393FF#66B3FF#80FFFF#7AFEC6#79FF79
#AAAAFF#84C1FF#A6FFFF#96FED1#93FF93
#B9B9FF#97CBFF#BBFFFF#ADFEDC#A6FFA6
#CECEFF#ACD6FF#CAFFFF#C1FFE4#BBFFBB
#DDDDFF#C4E1FF#D9FFFF#D7FFEE#CEFFCE
#ECECFF#D2E9FF#ECFFFF#E8FFF5#DFFFDF
#FBFBFF#ECF5FF#FDFFFF#FBFFFD#F0FFF0
#467500#424200#5B4B00#844200#642100
#548C00#5B5B00#796400#9F5000#842B00
#64A600#737300#977C00#BB5E00#A23400
#73BF00#8C8C00#AE8F00#D26900#BB3D00
#82D900#A6A600#C6A300#EA7500#D94600
#8CEA00#C4C400#D9B300#FF8000#F75000
#9AFF02#E1E100#EAC100#FF9224#FF5809
#A8FF24#F9F900#FFD306#FFA042#FF8040
#B7FF4A#FFFF37#FFDC35#FFAF60#FF8F59
#C2FF68#FFFF6F#FFE153#FFBB77#FF9D6F
#CCFF80#FFFF93#FFE66F#FFC78E#FFAD86
#D3FF93#FFFFAA#FFED97#FFD1A4#FFBD9D
#DEFFAC#FFFFB9#FFF0AC#FFDCB9#FFCBB3
#E8FFC4#FFFFCE#FFF4C1#FFE4CA#FFDAC8
#EFFFD7#FFFFDF#FFF8D7#FFEEDD#FFE6D9
#F5FFE8#FFFFF4#FFFCEC#FFFAF4#FFF3EE
#613030#616130#336666#484891#6C3365
#743A3A#707038#3D7878#5151A2#7E3D76
#804040#808040#408080#5A5AAD#8F4586
#984B4B#949449#4F9D9D#7373B9#9F4D95
#AD5A5A#A5A552#5CADAD#8080C0#AE57A4
#B87070#AFAF61#6FB7B7#9999CC#B766AD
#C48888#B9B973#81C0C0#A6A6D2#C07AB8
#CF9E9E#C2C287#95CACA#B8B8DC#CA8EC2
#D9B3B3#CDCD9A#A3D1D1#C7C7E2#D2A2CC
#E1C4C4#D6D6AD#B3D9D9#D8D8EB#DAB1D5
#EBD6D6#DEDEBE#C4E1E1#E6E6F2#E2C2DE
#F2E6E6#E8E8D0#D1E9E9#F3F3FA#EBD3E8


没有评论:

在部落格添加搜索框

所谓搜索框，就是就是这个啦~ XD

第一个：





第2个：




搜索框の功能是访客可以在部落格の搜索框简单又方便の寻找你部落格の相关资料 :D


第一个搜索框是由Google提供の，可以在BloggerのDesign那边直接添加

1. Design => Page Elements => Search Box




而第2个の搜索框好处就是你可以随意更改搜索按钮字眼，如图：


红色框框就是搜索按钮啦~ :P

1. Design => Page Elements => Add a Gadget => HTML/Java Script

<p align="center"><form id="searchthis" action="/search" style="display:inline;" method="get"> <input id="search-box" name="q" size="25" type="text"/> <input id="search-btn" value="寻找糖果♥" type="submit"/> </form></p>



小提醒：
1. 红色字可以随意更改 ^-^
3. 青色字是框框の大小，也是可以更改
2. 如果你要把搜索框Setting在中间の话，你就Paste一下のCode：

<center><p align="center"><form id="searchthis" action="/search" style="display:inline;" method="get"> <input id="search-box" name="q" size="25" type="text"/> <input id="search-btn" value="寻找糖果♥" type="submit"/> </form></p></center>


没有评论:

更换部落格密码

之前有想过更换，结果不懂去哪里换 -,-''lll 过后乱乱按，Oh，找到了，哈哈哈哈~

1. 按部落格右上角のMy Account（我の账户）



2. 会出现一个页面，那是你Google的Account，如果要更换密码就按 Changing Your Password



3. 就可以改密码了~





没有评论:

更改部落格 Highlight 颜色

刚刚去淑慧の部落格逛了一下，然后看到一个教程，我很喜欢呐~ :3  现在和大家分享一下~真の觉得淑慧真の好厉害哦  ~o(≧v≦)o~

你们去Highlight我部落格字体看看，是不是有点不一样？！之前是Automatic蓝色の，现在更换了变成粉红色，我本身就喜欢粉红啦~O(∩_∩)O~

如图：



1. Design => Edit HTML => Ctrl+F寻找 a:link {


2. 在  a:link {  の上面Paste以下のCode

::-moz-selection {
background:#F6CEE3;
color:#000000;
}
::selection {
background:#F6CEE3;
color:#000000;
}



小解释：

青色字是 Highlight 背景颜色，可以自行更换成你喜欢の颜色代码
红色字是字体颜色，也可以自行更换成你喜欢の颜色代码


过后干什么？！当然是按Save咯，成功！


没有评论:

更换部落格Favicon

之前我一直想换部落格Favicon了，可是吼，弄好了，也已经Save Template了，不过吼~还是失败失败 T.T 不过经过几次一直弄，一直搞，终于换到了 :D


什么是部落格Favicon？！

就是这个：



嘿嘿，弄到了很开心啊！现在教你们吧！我也是从淑慧和我同学那边拜师学艺の~哈哈哈哈~



第1个方法：

1. Design => Edit HTML => 在Expand Widget Templates打勾（一定要打勾）

2. Ctrl+F寻找 <title><data:blog.pageTitle/></title>


3. 在  <title><data:blog.pageTitle/></title> の下面Paste以下のCode：

<link href='图片 URL/Direct Link' rel='icon' type='image/x-icon'/>



第2个方法：

1. Design => Edit HTML => 按 Ctrl+F 寻找 </head>


2. 在  </head> 的上面Paste以下的Code：


<link href='图片URL/Direct Link' rel='icon' type='image/x-icon'/><link href='图片URL/Direct Link' rel='shortcut icon'/>


如何获取图片URL？！其实只要把鼠标指向图片，接着按Right Click，然后会出现这个：


然后Copy Image URL就可以啦~^^


那么图片Direct Link如何获取？！你可以上载到 Photobucket 拿Direct Link ~如果不明白Photobucket如何应用，按 这里 ~


给你们一些图片例子：





第3个方法：

其实呢！我发现了一个最最最简单，最最最容易更换部落格Faviconの方法，之前乱乱按部落格然后发现の，不过最麻烦の是，如果你Uploadの照片不是正方形，Blogger就不会接受哦~很讨厌吼？！所以你要自己动手把照片弄成正方形，而且要小张の，不然图片会变样~没办法啦，如果你嫌第1和2个教学麻烦の话~

1. Design => Page Elements => Edit Favicon => Choose File => Save 









现在可以把自己の部落格Favicon换成自己喜欢の图片，很高兴是不是？


转载请附上本部落格链接贴纸：
sticker
2 条评论:

制作自己喜欢のDashboard和Follow按钮

之前我发布过同样の教学，不过那是比较普通の，不能更改喜欢の图片为按钮，这次の教学是可以更换喜欢の图片为按钮の哦~^^


相关教学

●  Dashboard和Follow按钮


转回主题~

首先，先教你们Dashboard按钮

1. Design => Add a Gadget => HTML / Java Script

2. Paste 以下のCode：


<a style="display:scroll;position:fixed;top:15px;left:15px;" href="http://www.blogger.com/home" title="Dashboard"><img src="图片 Direct Link" /></a>



小解释：

a. 15 是按钮显示の位置，可以随意更改 :D
b. Dashboard の字眼可以随意更改，它是当鼠标指着按钮时出现の字体
c. 图片 Direct Link 记得替换成你图片のDirect Link，如何获取Direct Link，按 这里 查看 ~




现在教你们Follow按钮

1. Design => Add a Gadget => HTML / Java Script

2. Paste 以下のCode：


<a style="display:scroll;position:fixed;top:45px;left:15px;" href="http://www.blogger.com/follow-blog.g?blogID=你的 Blog ID" title="Follow"><img src="图片 Direct Link" /></a>


小解释：

a. 45，15是按钮显示の位置，可以随意更改
b. 你的 Blog ID 不是部落格网址，而是当你按Design时，看看上面の网站，就会有显示~如图显示：



c. Follow の字眼可以随意更改，它是当鼠标指着按钮时出现の字体
d. 图片 Direct Link 记得替换成你图片のDirect Link，如何获取Direct Link，按 这里 查看~


没有评论:

Popular Posts