My imagination are strong enough for me to hold on.
Hello 2017

#Tutorial: Falling Rose Petal Effect
Friday, 8 July 2016 @ 07:48


哟哟哟，姐就长话短说啦
这个教程来自这里哦
这个是一个很美的effect
姐本身现在也在用着哟


save起来大概就是这样哦

只要copy这个代码然后paste在<style>之前就可以了哦
<script>if(typeof jQuery=='undefined'){document.write('<'+'script');document.write(' language="javascript"');document.write(' type="text/javascript"');document.write(' src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">');document.write('</'+'script'+'>')}</script><script>if(!image_urls){var image_urls=Array()}if(!flash_urls){var flash_urls=Array()}image_urls['rain1']="http://2.bp.blogspot.com/-IQXNv-_CBLE/TpWcK7LL4VI/AAAAAAAAG0I/bcxYcqc_uI0/pinkpetal1.png";image_urls['rain2']="http://4.bp.blogspot.com/-teXCIicWPF4/TpWcLLg0A2I/AAAAAAAAG0U/IPPCr1gponc/pinkpetal2.png";image_urls['rain3']="http://3.bp.blogspot.com/-3JG9HLECCRU/TpWcLZGSYtI/AAAAAAAAG0g/zIJINua93TE/redpetal1.png";image_urls['rain4']="http://2.bp.blogspot.com/-BByhQEK5E24/TpWcLux4xRI/AAAAAAAAG0s/x2hIr1AV_Ac/redpetal2.png";$(document).ready(function(){var c=$(window).width();var d=$(window).height();var e=function(a,b){return Math.round(a+(Math.random()*(b-a)))};var f=function(a){setTimeout(function(){a.css({left:e(0,c)+'px',top:'-30px',display:'block',opacity:'0.'+e(10,100)}).animate({top:(d-10)+'px'},e(7500,8000),function(){$(this).fadeOut('slow',function(){f(a)})})},e(1,8000))};$('<div></div>').attr('id','rainDiv')
.css({position:'fixed',width:(c-20)+'px',height:'1px',left:'0px',top:'-5px',display:'block'}).appendTo('body');for(var i=1;i<=20;i++){var g=$('<img/>').attr('src',image_urls['rain'+e(1,4)])
.css({position:'absolute',left:e(0,c)+'px',top:'-30px',display:'block',opacity:'0.'+e(10,100),'margin-left':0}).addClass('rainDrop').appendTo('#rainDiv');f(g);g=null};var h=0;var j=0;$(window).resize(function(){c=$(window).width();d=$(window).height()})});</script>
<script>if(typeof jQuery=='undefined'){document.write('<'+'script');document.write(' language="javascript"');document.write(' type="text/javascript"');document.write(' src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">');document.write('</'+'script'+'>')}</script><script>$(document).ready(function(){var a=$('<img>').attr({'src':'http://2.bp.blogspot.com/-IQXNv-_CBLE/TpWcK7LL4VI/AAAAAAAAG0I/bcxYcqc_uI0/pinkpetal1.png','border':0});$('<a></a>').css({position:'absolute',right:'0px',top:'22px','z-index':'90'}).attr({'href':'http://tutorialuntukblog.blogspot.com/2011/10/tutorial-kelopak-bunga-berguguran-di.html'}).append(a).appendTo('body')});</script>


希望大家会喜欢哦
不明白的可以留言问哦



Labels:

#Tutorial: Hidden Music Player(No Button)
Tuesday, 5 July 2016 @ 21:18


大家好呀
这个教程是要教大家怎样放音乐在部落格
可是会比较特别一点
因为这款音乐是没有play还是stop button的
有可能有些人不喜欢
可是小编的部落格喜欢用这款啦 xD
很简单的步骤哦


Copy这个code放在<body>和</body>之间

<div style="display:none">
<audio id="CTPmediaElement3" class="CTPmediaElement" controls="10" preload="auto" autoplay="1" src="你的MP3 link"></audio>
</div>


你的MP3 link＝你的MP3 link，记得记得哦，你的link后面一定要是mp3哦，youtube的不能用哦

save看看，能的话就恭喜啦 ><


Labels:

#Tutorial: 3D Text
Saturday, 21 May 2016 @ 03:37


大家安好
小编刚刚找到这个教程，超级酷的
是从7th District找来的
现在小编教大家设计3D效果的字
什么是3D效果的字呢？
就是这个啦
超级简单哦


步骤
如果你想要把这样的效果放在你的header的话
1.开你的模板
2.Ctrl+F(Command+F用Mac的)找header
3.把这些代码代替你的header code
(i)没有hover效果的
#header{
text-shadow: 2px 0 .2px #FF0000, -2px 0 .2px #00F1F5;
color:#000;
}
(ii)有hover效果的
#header{
text-shadow: 2px 0 .2px #FF0000, -2px 0 .2px #00F1F5;
color:#000;
}
#header:hover{
text-shadow: 15px 0 .2px #FF0000, -15px 0 .2px #00F1F5;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
}

4.save起来看看, 成功的话你就会看到3D效果的字在你的header哦


大家都可以发挥自己的创意去改颜色哦
只是这种颜色会比较有3D的感觉啦 ^-^
希望大家会喜欢哦


Labels:

#Tutorial: Hidden MusicPlayer 2
@ 02:54


 



大家好
上一个小编介绍一款隐藏版的mp3 player
这一款稍微不一样
这个教程是在fukuo那边拿来的哦
来看看吧


步骤
1.开你的模板
2.Ctrl+F(Command+F用Mac的)找</head>
3.在</head>之前放
#music-rounded {
      position:fixed;
      left:75px;
      top:150px;
      width:50px;
      height:50px;
      background-color:#000;
      -moz-border-radius:100px;
      -webkit-border-radius:100px;
      border-radius:100px;
      opacity:1;
      -webkit-transition: all 0.4s ease;
      -moz-transition: all 0.4s ease;
      transition: all 0.4s ease;
}
#music-rounded img {
     margin-top:17px;
     margin-left:-2px;
}
#music-rounded:hover .music-player-embed {
     -moz-border-radius:5px;
     -webkit-border-radius:5px;
     border-radius:5px;
     margin-top:-20px;
     opacity:1;
     background-color:#000;
     color:#fff;
     -webkit-transition: all 0.7s ease;
     -moz-transition: all 0.7s ease;
     transition: all 0.7s ease;
}
.music-border {
        position:absolute;
        margin-top:-42px;
        margin-left:-15px;
        border:10px solid rgba(0, 0, 0, 0.4);
        width:60px;
        height:59px;
        background-color:none;
        -moz-border-radius:100px;
        -webkit-border-radius:100px;
        border-radius:100px;
        -webkit-transition: all 0.4s ease;
        -moz-transition: all 0.4s ease;
        transition: all 0.4s ease;
}
.music-border:hover {
        margin-top:-48px;
        margin-left:-20px;
        border:15px solid rgba(0, 0, 0, 0.4);
        -webkit-transition: all 0.7s ease;
        -moz-transition: all 0.7s ease;
        transition: all 0.7s ease;
        -webkit-transform:rotateY(360deg);
        -moz-transform:rotateY(360deg);
        -o-transform: rotateY(360deg);
}
.music-player-embed {
    font-family:Consolas;
    font-size:11px;
    position:absolute;
    min-width:100px;
    background-color:#FFF;
    padding:9px;
    margin-left:90px;
    margin-top:0px;
    overflow:hidden;
    opacity:0;
    -webkit-transition: all 0.7s ease;
    -moz-transition: all 0.7s ease;
    transition: all 0.7s ease;
}
-size和颜色可以自行更换哦
4.Ctrl+F(Command+F用Mac的)找</body>
5.在</body>之前放
<div id="music-rounded">
    <center><img src="http://66.media.tumblr.com/tumblr_m7w2py1dEP1r6o8v2.gif"></center>
        <div class="music-border"></div>
            <div class="music-player-embed">
             <center>MUSIC PLAYER CODE HERE</center>
        </div>
    </div>
MUSIC PLAYER CODE HERE=放你的mp3在那里
6.Save，成功的话就恭喜啦 ^-^



Labels:

#Tutorial: Hidden MusicPlayer
Friday, 20 May 2016 @ 23:32


hover后的效果✒︎



大家好啊
上次小编教大家做隐藏版的chatbox
这次教大家做隐藏版的mp3 player
这款是隐藏在右上角哦
大家能发挥自己的创意任意放在哪里都可以哦
开始吧～～～～


步骤
1.开你的模板
2.Ctrl+F(Command+F用Mac的)找</head>
3.在</head>之前放
#mp3 {
text-align: center;font-size: 11px;position:fixed;left:1000px;top:-43px;-webkit-transition: all .5s ease-in-out;-moz-transition: all .5s ease-in-out;-o-transition: all .5s ease-in-out;z-index:999;}
#mp3 :hover {
top:-10px;}
#music {
padding: 15px 0 5px 0;background: #ffffff;width:100px;border-bottom-right-radius: 5px;-moz-border-radius-bottomright: 5px;-webkit-border-bottom-right-radius: 5px;z-index: 9999;}
#musictab {
font-family:century gothic;text-shadow: 0 1px 0 #ffffff height:30px;padding: 0 0 8px 0;background:#ffffff;border-bottom-left-radius: 5px;-moz-border-radius-bottomleft: 5px;-webkit-border-bottom-left-radius: 5px;border-bottom-right-radius: 5px;-moz-border-radius-bottomright: 5px;-webkit-border-bottom-right-radius: 5px;width: 50px;}
#ffffff可以换背景颜色哦
4.Ctrl+F(Command+F用Mac的)找</body>
5.在</body>之前放
<div id="mp3"> <div id="music"> <center> MP3 Player Code</center> </div> <div id="musictab"> <br><img src="IMG URL"></div> </div>

MP3 Player Code=放你的mp3在那里
IMG URL=随意放什么可爱的贴图都可以哦
6.Save，成功的话就恭喜啦 ^-^





Labels:

#Tutorial: HTML Tester
Saturday, 14 May 2016 @ 02:21


大家好呀
现编要向大家介绍我在用着哪一款的HTML tester
我建议当大家要设计自己的部落格的时候
用HTML tester会比较好
你可以设计了立刻看效果
如果不成功也能立刻改
你旧的HTML code也会留在你的模板
超级方便的哦
我自己本身有用两款tester哦
来跟大家一一介绍吧


第一款
http://www.play-hookey.com/htmltest/
这一款呢我比较常用
我也不知道什么原因 xD

1. 白色text area就是放HTML code的地方，下面有一个show page button，按了过后效果就会出现在2.那边了
2.效果显示的地方啦 ^^

缺点
这款的缺点就是不能完全看到那个效果，因为上面有一个很碍眼的白色东东，我不懂为什么要有那一块东东 xD 可是还是蛮好用的啦


第二款
http://htmledit.squarefree.com

这一款是最近才发现的一款
小编本身觉得还蛮好用的

1.蓝色text area就是放HTML code的地方，html code效果会直接呈现在2.，不用按任何button
2.效果显示的地方

缺点
我本身用了过后觉得上下看眼睛不是很舒服，可是这个是个人的啦，大家都可以是两款再看哪一款会比较好用哦






Labels:

#Tutorial: Hidden ChatBox
Friday, 13 May 2016 @ 23:13


大家好啊
小编今天教大家做一个隐藏版的聊天室
   

大家都可以发挥自己的创意去做
这个只是一个简单的模版给大家哦
跟着步骤走吧


步骤
1. 开你的模版
2.Ctrl+F(Command+F用Mac的)找</head>
3.在</head>之前放
 (a)左边
.dreamer{
border-radius: 0px 15px 15px 0px;
width:10px;
padding:10px;
height:55px;
margin-top:20px;
margin-left:255px;
background: #faafbe;
color:white;
font-size:12px;
-webkit-transition: 1.0s;
-moz-transition: 1.0s;
}
#salty {
position:fixed;
border:5px solid #faafbe;
border-radius: 15px 15px 15px 15px;
width:250px;
left:-268px;
top:10px;
height:400px;
padding:4px;
text-align:left;
font-size:11px;
font-family:arial;
-webkit-transition: 1.0s;
-moz-transition: 1.0s;
}
#salty:hover {
left:1px;
}

(b)右边
.dreamer{
border-radius: 15px 0px 0px 15px;
width:10px;
padding:10px;
height:55px;
margin-top:20px;
margin-left:-35px;
background: #faafbe;
color:white;
font-size:12px;
-webkit-transition: 1.0s;
-moz-transition: 1.0s;
}
#salty {
position:fixed;
border:5px solid #faafbe;
border-radius: 15px 15px 15px 15px;
width:250px;
right:-269px;
top:10px;
height:400px;
padding:4px;
text-align:left;
font-size:11px;
font-family:arial;
-webkit-transition: 1.0s;
-moz-transition: 1.0s;
}
#salty:hover {
right:1px;
}
-#faafbe = 可以自行换颜色哦

4. Ctrl+F(Command+F用Mac的)找</body>
5.在</body>之前放
<div id="salty"><div class="dreamer">
C<br>h<br>a<br>t</div>
<div style="margin-top: -100px;"><br>
你的cbox code

- 你的cbox code = 放你的cbox code哦

6. save看看，如果success就恭喜你啦 >.<


希望大家会喜欢

Labels:

#Tutorial: How to put image on Cbox?
Saturday, 7 May 2016 @ 08:51


大家好啊
这篇文章要教大家怎样放照片在cbox上面
就像这样啦


步骤
1.开你的模板
2.Ctrl+F(Command+F用Mac的)找<!-- BEGIN CBOX - www.cbox.ws - v4.3 -->
3.在<!-- BEGIN CBOX - www.cbox.ws - v4.3 -->之后放
<center><img src="Image URL" width="463" height="105"> </a><br></center>
4.把自己要的照片URL代替Image URL
5. - <center>可以换成<left>或者是<right>
    - width="463" height="105"可以换自己想要的size


就大功告成啦～～




Labels:

#Tutorial: How to make a pixel speech bubble?
@ 05:19


大家好呀
今天介绍大家怎样做很可爱的Speech Bubble
有两种哦
一种是静态的，一种是动态的哟
小编来简单解释下吧

第一种静态的

1.在Enter your text here哪里写自己要的字哦，很可惜的是没得写华语，只能写英文哦
2.可以选Spike left或者是Spike right哦，意思是下面的勾勾在左边还是右边哦。另外Transparent PNG是可以选择放背景透明。如果要颜色的话就选Gif with background color哦，后面各自释放Colour Hex Number哦。
3.按Create就生成一个属于自己的Speech Bubble啦 。



第二种动态的

1.也是一样，在空白格子里面写自己要的字
2.也是一样，下面勾勾在左边还是右边。这个比较特别一点哦，可以选animated，代表动态哦。
3.按create，speech bubble就生成了哦。


Labels:

#Tutorial: Bubble Effect (Special)
Sunday, 1 May 2016 @ 05:51


又来到教程时间了
这个教程保证你们会喜欢
美化部落格绝对不能少了这个东西
往上漂浮的泡泡
把你的部落格美化到好像在享受泡泡浴
重点是泡泡还可以自己选颜色哦
事不宜迟，上教程


1.选三个自己要的泡泡颜色(本人是喜欢七彩啦), right click 开照片拿 image url

紫色 - 
黄色 - 
青色 - 
蓝色 - 
七彩 - 

2.把自己要的泡泡颜色image url代替dreamer

<script type="text/JavaScript">
<!--
var no = 10;                      
var speed = 10;                    var snow = new Array();
snow[0] = "dreamer"
snow[1] = "dreamer"
snow[2] = "dreamer"
snow[3] = "dreamer"
var ns4up = (document.layers) ? 1 : 0;
var ie4up = (document.all) ? 1 : 0;
var ns6up = (document.getElementById&&!document.all) ? 1 : 0;
var dx, xp, yp;
var am, stx, sty;
var i, doc_width = 800, doc_height = 1800;
if (ns4up||ns6up) {
doc_width = self.innerWidth;
doc_height = self.innerHeight;}
else if (ie4up) {
doc_width = document.body.clientWidth;
doc_height = document.body.clientHeight;}
dx = new Array();
xp = new Array();
yp = new Array();
am = new Array();
stx = new Array();
sty = new Array();
j = 0;
for (i = 0; i < no; ++ i) {
dx[i] = 0;
xp[i] = Math.random()*(doc_width-50);
yp[i] = Math.random()*doc_height;
am[i] = Math.random()*20;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
if (ns4up) {
if (i == 0) {
document.write("<layer name=\"dot"+ i +"\" left=\"15\" top=\"15\" visibility=\"show\"><img src=\""+ snow[j] + "\" border=\"0\"></layer>");}
else {document.write("<layer name=\"dot"+ i +"\" left=\"15\" top=\"15\" visibility=\"show\"><img src=\""+ snow[j] + "\" border=\"0\"></layer>");}}
else if (ie4up||ns6up) {if (i == 0) {
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"VISIBILITY: visible; TOP: 15px; LEFT: 15px; width:1;\"><img src=\"" + snow[j] + "\" border=\"0\"></div>");}
else {document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"VISIBILITY: visible; TOP: 15px; LEFT: 15px; width:1;\"><img src=\"" + snow[j] + "\" border=\"0\"></div>");}}
if (j == (snow.length-1)) { j = 0; }
else { j += 1; }}
function snowNS() {        
for (i = 0; i < no; ++ i) {     // iterate for every dot
yp[i] -= sty[i];
if (yp[i] < -50) {
xp[i] = Math.random()*(doc_width-am[i]-30);
yp[i] = doc_height;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
doc_width = self.innerWidth;
doc_height = self.innerHeight;}
dx[i] += stx[i];
document.layers["dot"+i].top = yp[i];
document.layers["dot"+i].left = xp[i] + am[i]*Math.sin(dx[i]);}
setTimeout("snowNS()", speed);}
function snowIE_NS6() {    
for (i = 0; i < no; ++ i) { // iterate for every dot
yp[i] -= sty[i];
if (yp[i] < -50) {
xp[i] = Math.random()*(doc_width-am[i]-30);
yp[i] = doc_height;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
doc_width = ns6up?window.innerWidth-5:document.body.clientWidth;
doc_height = ns6up?window.innerHeight-5:document.body.clientHeight;}
dx[i] += stx[i];
if (ie4up){
document.all["dot"+i].style.pixelTop = yp[i];
document.all["dot"+i].style.pixelLeft = xp[i] + am[i]*Math.sin(dx[i]);}
else if (ns6up){
document.getElementById("dot"+i).style.top=yp[i];
document.getElementById("dot"+i).style.left=xp[i] + am[i]*Math.sin(dx[i]);}}
setTimeout("snowIE_NS6()", speed);}
if (ns4up) {snowNS();}
else if (ie4up||ns6up) {snowIE_NS6();}
-->
</script>

3.好了以后，copy全部代码paste在你blogskin template的最前面
4.先preview看看成不成功，如果成功就save起来，就大功告成啦 

Labels:

#Tutorial: Colour Code (Hex) 颜色代码
Friday, 25 March 2016 @ 00:46




















这是Color Picker提供的颜色代码生成器
什么是颜色代码呢？
颜色代码就是一种可以设定你部落格要用颜色的代码
颜色的代码实在是太多了
所以才会有颜色代码生成器
比较方便
这个代码生成器有点小，希望大家不要介意哦
代码会出现在HEX
copy代码，代码前面加 ＃ 就可以了

Labels:

#Tutorial: Unique Signature at bottom of Blog Post
Monday, 21 March 2016 @ 03:34


hihihihihi
好久没写教程了
这个教程很特别哦
我无意间在Google看到
所以就自己研究起来了 xD
可以放自己的专属签名在每个文章的底部
这就是我的专属签名啦









步骤：
1. 浏览 MyLifeSignature
2. 有很多款可以选哦，如下：
  a. 我会建议大家用这款哦，我的也是用这款哦
     因为比较容易，直接输入自己要的签名
     可以选字体的大小，歪斜度，颜色哦
     这款很方便哦
b. 这款呢就要用自己的方式去签名
    有一个画板给你签名
    可是会比较麻烦
    因为不是专业有专业的电子画板
    所以我手残，怎么签名也签不美
    这款也不能选颜色，大小和歪斜度哦
c. 相信没人会用这款吧
    最麻烦的一款
    要自己用Printer scan自己的签名

3. 设计完了download下来
4. 想办法得到照片的URL
5. 开自己的模板
6. Ctrl+F( Command+F for Mac User) 找 Blogitembody
7. 把 <div align='left'><img src='Image Url'></div> copy起来，paste在Blogitembody的后面，如下：
left＝可以换成right或者是center哦，看个人的喜欢
Image Url'＝把自己签名的照片Url放在这里

8.完成啦～～～

Labels:

#Tutorial: 3D Text
Saturday, 21 May 2016 @ 03:37


大家安好
小编刚刚找到这个教程，超级酷的
是从7th District找来的
现在小编教大家设计3D效果的字
什么是3D效果的字呢？
就是这个啦
超级简单哦


步骤
如果你想要把这样的效果放在你的header的话
1.开你的模板
2.Ctrl+F(Command+F用Mac的)找header
3.把这些代码代替你的header code
(i)没有hover效果的
#header{
text-shadow: 2px 0 .2px #FF0000, -2px 0 .2px #00F1F5;
color:#000;
}
(ii)有hover效果的
#header{
text-shadow: 2px 0 .2px #FF0000, -2px 0 .2px #00F1F5;
color:#000;
}
#header:hover{
text-shadow: 15px 0 .2px #FF0000, -15px 0 .2px #00F1F5;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
}

4.save起来看看, 成功的话你就会看到3D效果的字在你的header哦


大家都可以发挥自己的创意去改颜色哦
只是这种颜色会比较有3D的感觉啦 ^-^
希望大家会喜欢哦


Labels:

#Tutorial: Hidden MusicPlayer 2
@ 02:54


 



大家好
上一个小编介绍一款隐藏版的mp3 player
这一款稍微不一样
这个教程是在fukuo那边拿来的哦
来看看吧


步骤
1.开你的模板
2.Ctrl+F(Command+F用Mac的)找</head>
3.在</head>之前放
#music-rounded {
      position:fixed;
      left:75px;
      top:150px;
      width:50px;
      height:50px;
      background-color:#000;
      -moz-border-radius:100px;
      -webkit-border-radius:100px;
      border-radius:100px;
      opacity:1;
      -webkit-transition: all 0.4s ease;
      -moz-transition: all 0.4s ease;
      transition: all 0.4s ease;
}
#music-rounded img {
     margin-top:17px;
     margin-left:-2px;
}
#music-rounded:hover .music-player-embed {
     -moz-border-radius:5px;
     -webkit-border-radius:5px;
     border-radius:5px;
     margin-top:-20px;
     opacity:1;
     background-color:#000;
     color:#fff;
     -webkit-transition: all 0.7s ease;
     -moz-transition: all 0.7s ease;
     transition: all 0.7s ease;
}
.music-border {
        position:absolute;
        margin-top:-42px;
        margin-left:-15px;
        border:10px solid rgba(0, 0, 0, 0.4);
        width:60px;
        height:59px;
        background-color:none;
        -moz-border-radius:100px;
        -webkit-border-radius:100px;
        border-radius:100px;
        -webkit-transition: all 0.4s ease;
        -moz-transition: all 0.4s ease;
        transition: all 0.4s ease;
}
.music-border:hover {
        margin-top:-48px;
        margin-left:-20px;
        border:15px solid rgba(0, 0, 0, 0.4);
        -webkit-transition: all 0.7s ease;
        -moz-transition: all 0.7s ease;
        transition: all 0.7s ease;
        -webkit-transform:rotateY(360deg);
        -moz-transform:rotateY(360deg);
        -o-transform: rotateY(360deg);
}
.music-player-embed {
    font-family:Consolas;
    font-size:11px;
    position:absolute;
    min-width:100px;
    background-color:#FFF;
    padding:9px;
    margin-left:90px;
    margin-top:0px;
    overflow:hidden;
    opacity:0;
    -webkit-transition: all 0.7s ease;
    -moz-transition: all 0.7s ease;
    transition: all 0.7s ease;
}
-size和颜色可以自行更换哦
4.Ctrl+F(Command+F用Mac的)找</body>
5.在</body>之前放
<div id="music-rounded">
    <center><img src="http://66.media.tumblr.com/tumblr_m7w2py1dEP1r6o8v2.gif"></center>
        <div class="music-border"></div>
            <div class="music-player-embed">
             <center>MUSIC PLAYER CODE HERE</center>
        </div>
    </div>
MUSIC PLAYER CODE HERE=放你的mp3在那里
6.Save，成功的话就恭喜啦 ^-^



Labels:

#Tutorial: Hidden MusicPlayer
Friday, 20 May 2016 @ 23:32


hover后的效果✒︎



大家好啊
上次小编教大家做隐藏版的chatbox
这次教大家做隐藏版的mp3 player
这款是隐藏在右上角哦
大家能发挥自己的创意任意放在哪里都可以哦
开始吧～～～～


步骤
1.开你的模板
2.Ctrl+F(Command+F用Mac的)找</head>
3.在</head>之前放
#mp3 {
text-align: center;font-size: 11px;position:fixed;left:1000px;top:-43px;-webkit-transition: all .5s ease-in-out;-moz-transition: all .5s ease-in-out;-o-transition: all .5s ease-in-out;z-index:999;}
#mp3 :hover {
top:-10px;}
#music {
padding: 15px 0 5px 0;background: #ffffff;width:100px;border-bottom-right-radius: 5px;-moz-border-radius-bottomright: 5px;-webkit-border-bottom-right-radius: 5px;z-index: 9999;}
#musictab {
font-family:century gothic;text-shadow: 0 1px 0 #ffffff height:30px;padding: 0 0 8px 0;background:#ffffff;border-bottom-left-radius: 5px;-moz-border-radius-bottomleft: 5px;-webkit-border-bottom-left-radius: 5px;border-bottom-right-radius: 5px;-moz-border-radius-bottomright: 5px;-webkit-border-bottom-right-radius: 5px;width: 50px;}
#ffffff可以换背景颜色哦
4.Ctrl+F(Command+F用Mac的)找</body>
5.在</body>之前放
<div id="mp3"> <div id="music"> <center> MP3 Player Code</center> </div> <div id="musictab"> <br><img src="IMG URL"></div> </div>

MP3 Player Code=放你的mp3在那里
IMG URL=随意放什么可爱的贴图都可以哦
6.Save，成功的话就恭喜啦 ^-^





Labels:

#Tutorial: HTML Tester
Saturday, 14 May 2016 @ 02:21


大家好呀
现编要向大家介绍我在用着哪一款的HTML tester
我建议当大家要设计自己的部落格的时候
用HTML tester会比较好
你可以设计了立刻看效果
如果不成功也能立刻改
你旧的HTML code也会留在你的模板
超级方便的哦
我自己本身有用两款tester哦
来跟大家一一介绍吧


第一款
http://www.play-hookey.com/htmltest/
这一款呢我比较常用
我也不知道什么原因 xD

1. 白色text area就是放HTML code的地方，下面有一个show page button，按了过后效果就会出现在2.那边了
2.效果显示的地方啦 ^^

缺点
这款的缺点就是不能完全看到那个效果，因为上面有一个很碍眼的白色东东，我不懂为什么要有那一块东东 xD 可是还是蛮好用的啦


第二款
http://htmledit.squarefree.com

这一款是最近才发现的一款
小编本身觉得还蛮好用的

1.蓝色text area就是放HTML code的地方，html code效果会直接呈现在2.，不用按任何button
2.效果显示的地方

缺点
我本身用了过后觉得上下看眼睛不是很舒服，可是这个是个人的啦，大家都可以是两款再看哪一款会比较好用哦






Labels:

#Tutorial: Hidden ChatBox
Friday, 13 May 2016 @ 23:13


大家好啊
小编今天教大家做一个隐藏版的聊天室
   

大家都可以发挥自己的创意去做
这个只是一个简单的模版给大家哦
跟着步骤走吧


步骤
1. 开你的模版
2.Ctrl+F(Command+F用Mac的)找</head>
3.在</head>之前放
 (a)左边
.dreamer{
border-radius: 0px 15px 15px 0px;
width:10px;
padding:10px;
height:55px;
margin-top:20px;
margin-left:255px;
background: #faafbe;
color:white;
font-size:12px;
-webkit-transition: 1.0s;
-moz-transition: 1.0s;
}
#salty {
position:fixed;
border:5px solid #faafbe;
border-radius: 15px 15px 15px 15px;
width:250px;
left:-268px;
top:10px;
height:400px;
padding:4px;
text-align:left;
font-size:11px;
font-family:arial;
-webkit-transition: 1.0s;
-moz-transition: 1.0s;
}
#salty:hover {
left:1px;
}

(b)右边
.dreamer{
border-radius: 15px 0px 0px 15px;
width:10px;
padding:10px;
height:55px;
margin-top:20px;
margin-left:-35px;
background: #faafbe;
color:white;
font-size:12px;
-webkit-transition: 1.0s;
-moz-transition: 1.0s;
}
#salty {
position:fixed;
border:5px solid #faafbe;
border-radius: 15px 15px 15px 15px;
width:250px;
right:-269px;
top:10px;
height:400px;
padding:4px;
text-align:left;
font-size:11px;
font-family:arial;
-webkit-transition: 1.0s;
-moz-transition: 1.0s;
}
#salty:hover {
right:1px;
}
-#faafbe = 可以自行换颜色哦

4. Ctrl+F(Command+F用Mac的)找</body>
5.在</body>之前放
<div id="salty"><div class="dreamer">
C<br>h<br>a<br>t</div>
<div style="margin-top: -100px;"><br>
你的cbox code

- 你的cbox code = 放你的cbox code哦

6. save看看，如果success就恭喜你啦 >.<


希望大家会喜欢

Labels:

#Tutorial: How to put image on Cbox?
Saturday, 7 May 2016 @ 08:51


大家好啊
这篇文章要教大家怎样放照片在cbox上面
就像这样啦


步骤
1.开你的模板
2.Ctrl+F(Command+F用Mac的)找<!-- BEGIN CBOX - www.cbox.ws - v4.3 -->
3.在<!-- BEGIN CBOX - www.cbox.ws - v4.3 -->之后放
<center><img src="Image URL" width="463" height="105"> </a><br></center>
4.把自己要的照片URL代替Image URL
5. - <center>可以换成<left>或者是<right>
    - width="463" height="105"可以换自己想要的size


就大功告成啦～～




Labels:

#Tutorial: How to make a pixel speech bubble?
@ 05:19


大家好呀
今天介绍大家怎样做很可爱的Speech Bubble
有两种哦
一种是静态的，一种是动态的哟
小编来简单解释下吧

第一种静态的

1.在Enter your text here哪里写自己要的字哦，很可惜的是没得写华语，只能写英文哦
2.可以选Spike left或者是Spike right哦，意思是下面的勾勾在左边还是右边哦。另外Transparent PNG是可以选择放背景透明。如果要颜色的话就选Gif with background color哦，后面各自释放Colour Hex Number哦。
3.按Create就生成一个属于自己的Speech Bubble啦 。



第二种动态的

1.也是一样，在空白格子里面写自己要的字
2.也是一样，下面勾勾在左边还是右边。这个比较特别一点哦，可以选animated，代表动态哦。
3.按create，speech bubble就生成了哦。


Labels:

#Tutorial: Bubble Effect (Special)
Sunday, 1 May 2016 @ 05:51


又来到教程时间了
这个教程保证你们会喜欢
美化部落格绝对不能少了这个东西
往上漂浮的泡泡
把你的部落格美化到好像在享受泡泡浴
重点是泡泡还可以自己选颜色哦
事不宜迟，上教程


1.选三个自己要的泡泡颜色(本人是喜欢七彩啦), right click 开照片拿 image url

紫色 - 
黄色 - 
青色 - 
蓝色 - 
七彩 - 

2.把自己要的泡泡颜色image url代替dreamer

<script type="text/JavaScript">
<!--
var no = 10;                      
var speed = 10;                    var snow = new Array();
snow[0] = "dreamer"
snow[1] = "dreamer"
snow[2] = "dreamer"
snow[3] = "dreamer"
var ns4up = (document.layers) ? 1 : 0;
var ie4up = (document.all) ? 1 : 0;
var ns6up = (document.getElementById&&!document.all) ? 1 : 0;
var dx, xp, yp;
var am, stx, sty;
var i, doc_width = 800, doc_height = 1800;
if (ns4up||ns6up) {
doc_width = self.innerWidth;
doc_height = self.innerHeight;}
else if (ie4up) {
doc_width = document.body.clientWidth;
doc_height = document.body.clientHeight;}
dx = new Array();
xp = new Array();
yp = new Array();
am = new Array();
stx = new Array();
sty = new Array();
j = 0;
for (i = 0; i < no; ++ i) {
dx[i] = 0;
xp[i] = Math.random()*(doc_width-50);
yp[i] = Math.random()*doc_height;
am[i] = Math.random()*20;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
if (ns4up) {
if (i == 0) {
document.write("<layer name=\"dot"+ i +"\" left=\"15\" top=\"15\" visibility=\"show\"><img src=\""+ snow[j] + "\" border=\"0\"></layer>");}
else {document.write("<layer name=\"dot"+ i +"\" left=\"15\" top=\"15\" visibility=\"show\"><img src=\""+ snow[j] + "\" border=\"0\"></layer>");}}
else if (ie4up||ns6up) {if (i == 0) {
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"VISIBILITY: visible; TOP: 15px; LEFT: 15px; width:1;\"><img src=\"" + snow[j] + "\" border=\"0\"></div>");}
else {document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"VISIBILITY: visible; TOP: 15px; LEFT: 15px; width:1;\"><img src=\"" + snow[j] + "\" border=\"0\"></div>");}}
if (j == (snow.length-1)) { j = 0; }
else { j += 1; }}
function snowNS() {        
for (i = 0; i < no; ++ i) {     // iterate for every dot
yp[i] -= sty[i];
if (yp[i] < -50) {
xp[i] = Math.random()*(doc_width-am[i]-30);
yp[i] = doc_height;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
doc_width = self.innerWidth;
doc_height = self.innerHeight;}
dx[i] += stx[i];
document.layers["dot"+i].top = yp[i];
document.layers["dot"+i].left = xp[i] + am[i]*Math.sin(dx[i]);}
setTimeout("snowNS()", speed);}
function snowIE_NS6() {    
for (i = 0; i < no; ++ i) { // iterate for every dot
yp[i] -= sty[i];
if (yp[i] < -50) {
xp[i] = Math.random()*(doc_width-am[i]-30);
yp[i] = doc_height;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
doc_width = ns6up?window.innerWidth-5:document.body.clientWidth;
doc_height = ns6up?window.innerHeight-5:document.body.clientHeight;}
dx[i] += stx[i];
if (ie4up){
document.all["dot"+i].style.pixelTop = yp[i];
document.all["dot"+i].style.pixelLeft = xp[i] + am[i]*Math.sin(dx[i]);}
else if (ns6up){
document.getElementById("dot"+i).style.top=yp[i];
document.getElementById("dot"+i).style.left=xp[i] + am[i]*Math.sin(dx[i]);}}
setTimeout("snowIE_NS6()", speed);}
if (ns4up) {snowNS();}
else if (ie4up||ns6up) {snowIE_NS6();}
-->
</script>

3.好了以后，copy全部代码paste在你blogskin template的最前面
4.先preview看看成不成功，如果成功就save起来，就大功告成啦 

Labels:

#Tutorial: Colour Code (Hex) 颜色代码
Friday, 25 March 2016 @ 00:46



HTML Color Picker

















这是Color Picker提供的颜色代码生成器
什么是颜色代码呢？
颜色代码就是一种可以设定你部落格要用颜色的代码
颜色的代码实在是太多了
所以才会有颜色代码生成器
比较方便
这个代码生成器有点小，希望大家不要介意哦
代码会出现在HEX
copy代码，代码前面加 ＃ 就可以了

Labels:

#Tutorial: Unique Signature at bottom of Blog Post
Monday, 21 March 2016 @ 03:34


hihihihihi
好久没写教程了
这个教程很特别哦
我无意间在Google看到
所以就自己研究起来了 xD
可以放自己的专属签名在每个文章的底部
这就是我的专属签名啦









步骤：
1. 浏览 MyLifeSignature
2. 有很多款可以选哦，如下：
  a. 我会建议大家用这款哦，我的也是用这款哦
     因为比较容易，直接输入自己要的签名
     可以选字体的大小，歪斜度，颜色哦
     这款很方便哦
b. 这款呢就要用自己的方式去签名
    有一个画板给你签名
    可是会比较麻烦
    因为不是专业有专业的电子画板
    所以我手残，怎么签名也签不美
    这款也不能选颜色，大小和歪斜度哦
c. 相信没人会用这款吧
    最麻烦的一款
    要自己用Printer scan自己的签名

3. 设计完了download下来
4. 想办法得到照片的URL
5. 开自己的模板
6. Ctrl+F( Command+F for Mac User) 找 Blogitembody
7. 把 <div align='left'><img src='Image Url'></div> copy起来，paste在Blogitembody的后面，如下：
left＝可以换成right或者是center哦，看个人的喜欢
Image Url'＝把自己签名的照片Url放在这里

8.完成啦～～～

Labels: