美化underline

你们好啊！
将将~这样的underline是不是很漂亮？不用死板板的，而且还能放自己喜欢的颜色。
你自己爽的话，可以加字体周围的影子。

今天啊，晓彤就要和大家分享如何美化。其实晓彤是刚才才弄到的。原来影子的添加只要加一个code就好撩~anywhere，多谢kuro兔的部落格啦~

旧界面到Design → Edit HTML。
新界面到Template → Edit HTML → proceed。

勾一勾 Expand  Widget Template。按 Ctrl 找 ]]></b:skin>。在它的上面 copy and paste 以下的code。
u {
text-shadow: 2px 2px 2px#711291;
text-decoration:none;
border-bottom: 2px solid#711291;
padding: 0px;
-webkit-transition-duration: .30s;
}

u:hover {
text-shadow: 2px 2px 2px#FF7CFD;
text-decoration:none;
border-bottom: 3px solid#FF7CFD;
padding: 0px;
}
 像这样：

接下来，就要解说code啦~
(⊙o⊙)…这篇的解说就依照丰丰三❤之记的美化underline好了~
我直接copy n paste，不过我有注明哪里来的啊！（我懒惰写……）（众人：哪有这么懒的部落格教学者啊？
不要将我随便拿别人的东西！
据淑慧的解释：

u:hover 的 hover 意思是鼠标经过时的变化。你们可以在里面改变那些颜色啊框框啊等等。

border 是框框，border-bottom 的意思是只有下面有框框。可以换成 border-left, border right, border-top, border。solid 是框框类型，其他还包括了 dashed（------）, dotted（......）。而最后一个 #F489AD 就是颜色代码啦，可以更换去你喜欢的颜色的颜色代码。

忘了这个。-webkit-transition-duration: .30s; 这个是渐渐变化的 code。也就是说加了这个代码之后，hover 的效果会渐渐转变出现而不是马上出现。那个号码是可以改的。

当你要使用的时候，就 highlight，然后直接按写帖子那边的  就可以了，很简单方便吧？
（我也只有用其中四个……）

那篇是最原始的，不过有一个部分是我自己加的。
就是两个highlight粉红色的时候就是字体被underline的时候字周围出现的影子，你可以放，也可以delete。颜色建议和那个border-bottom一样，看起来会比较美观。

~~~~~~~~~~~~~~~晓彤专用分割线~~~~~~~~~~~~~~~~

呃……话说昨天晓彤过了一个很充实的生日哦！
而且也收到了很多的祝福~
谢谢各位给晓彤的祝福！
晓彤全收下了！ ^^
也谢谢昨天在晓彤facebook timeline 留言的朋友~
谢谢你们啊~\(≧▽≦)/~啦啦啦
晓彤会努力加油的！
至于昨天帮晓彤庆生，在blogger留言祝晓彤生日快乐的朋友~
aligatokozaimas~
今天写到这里~
再次跟大家说，由于功课渐渐繁重，所以晓彤上网时间没有假期来得频繁，
所以……
下次的更新要等到下个星期咯！
拜拜！

把highlight颜色换掉

看到没有？这就是它的effect啦~
蓝色的highlight略显死板，而有颜色的highlight会比较吸引人！（众人：你哪来的外星道理？！）
所以咯，这也是晓彤的装修经验。
首先，到Design → Edit HTML。
如果你是新界面，到：

然后你会进入这样的界面：

按Edit HTML → Proceed。
按 Expand Widget Template，按 Ctrl + F 找 a:link
在a:link 上面 Copy and Paste 以下的code：
::-moz-selection {
background:#F6CEE3;
color:#000000;
}
::selection {
background:#F6CEE3;
color:#000000;
}

像这样：

Background 是 highlight时候的颜色， color 是字的颜色，可以到Code（ colour ）这边拿。
就是这么简单，
save，完成！XD！
~~~~~~~~~~~~~~晓彤专用分割线~~~~~~~~~~~~~
今天是晓彤的14岁生日捏~~
晓彤的facebook也爆满了！@@
好啦~今天写到这~
希望你们会喜欢这篇！

7000大关！

有木有看到啊！晓彤部落格的部落格已经突破7000的关卡！~\(≧▽≦)/~啦啦啦
而且晓彤的部落格的读者来自世界各地捏~

没有错！那个连我都不知道的地方都有人来看我的blog~（汗颜）
我的地理老师啊~麻烦下~如果你有看到这篇可以跟我讲下，
我用箭头指着的地方是哪里吗？
非常谢谢啊！

等下……（刹车）
民都鲁的PMR成绩关我什么事？
奇怪了！
不过我想应该是我的民都鲁游记才不小心被这个有太多美国时间的人看到吧？
最重要的是：

 谢谢排在前3名的网站啦~
还有有放置晓彤部落格连接图案的部落格，
链接晓彤的部落格，
aligatokozaimas~

看来淑慧的部落格蛮不错的~看，她帮了我很多呢！真的是非常谢谢淑慧啦~

有木有啊~看到这个我真的吓了一跳，原来我的blog是这么多人看的！
感谢每一位读者在我blog留下的每一个脚印，
感谢你们给予的支持！
谢谢你们~
晓彤会努力的！
也谢谢所有博友的留言&踩踩哦！
（众博友：还以为你忘了我们诶……）

隐藏cbox

如上图所示，按了click me的图案，就会出现cbox。
所以呢，晓彤就来分享这简单的方法啦~
如果你是用旧界面，到Design → Page Element → Add A Gadget → HTML/Java Script  copy and paste 以下的code。
如果你是用新界面，像晓彤这样，就到：

按了那个黑黑色的箭头，你会看到：

选Layout，后面就是 Add A Gadget → HTML/Java Script了。
以下是这个的code：

<style type="text/css">

#gb{
position:fixed;
top:150px;
z-index:+1000;
}
* html #gb{position:relative;}

.gbtab{
height:600px;
width:150px;
float:left;
cursor:pointer;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiY2ob-P6IeCfT4LYSrrqbWdk8D2F4yQ4RJUHqjGDM0baFA4Uwpo8hwJIlWk6s_XyVef5EmRJWDQMZQt2sjHUKXOJpdI_DE4dd3gDzQL83uyD208CZTbzJvzta9qkof-aYuWrAvCZ9FDitX/s1600/click+me_%25E5%2589%25AF%25E6%259C%25AC.png') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #666666;
background:#F5F5F5;
padding:0px;
}
</style>

<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 150-w) : moveGB(170-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>
<div id="gb">
<div class="gbtab" onclick="showHideGB()"> </div>
<div class="gbcontent">

你的Cbox code

<div style="text-align:right">
<a href="javascript:showHideGB()">
[close]
</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (90-gb.offsetWidth).toString() + "px";
</script>

height=600px 是高度，width=150px是宽度，可以自己改。至于粉红色的字是图画网址，你可以到
这一篇或者是这一篇拿图。
好啦~其实最原始&完整的，鼓励大家参阅淑慧的部落格，因为啊~我是看她的blog弄得，很怕自己的code乱乱~（别介意啊~~~）

~~~~~~~~~~~~~~晓彤专用分割线~~~~~~~~~~~~~~~~

话说，晓彤今年过年蛮开心的~
一方面是可以吃到好吃的curry~（流口水了）
一方面是可以拿红包~
一方面是可以吃一堆有的没有的年货+喝汽水
最重要的是：
可以熬夜~
结果昨晚1点多才睡的我，
今天居然睡到10点才起身……（中骂了，讲要去拜年）
现在的晓彤就是拜完年回来的！
你们呢？
不妨分享下你们的过年吧！

新年快乐！

各位读者，大家好呀！
今天就是大年初一了，心里总是特别期待~ ^^
汽水+一堆有的没有的年货，我来啦~~~~~~~~~~~~
昨晚，晓彤家可是特别热闹呢！
爸爸放了4条炮竹，叔叔放了4盒烟火，
很热闹呢！
话说，今天浏览Facebook，
就发现很多的贺词哦！
连晓彤也参一脚，发了贺词，

呵呵~别怪晓彤鸡婆啊！晓彤也借此向大家拜个年，祝大家新年快乐啊~
话说昨晚晓彤住的地方很热闹诶！
又是炮竹又是烟花的，
把美里其中一片叫山顶花园的夜空点缀的漂漂亮亮的，
我想晓彤住的这条路应该是我们家最厉害了，
刚我跑去看，整个地板红红的……（(⊙o⊙)…聪明的读者应该猜到是什么了吧？）
不过……
这样才有新年的feel！
相信读者们会认同的！
还有，我蛮佩服我妹妹的……
烟花很吵，又可以睡到~~~~~~~
对了，大家有木有注意到，
我开始写教程了也~OH yEAh!
总之一句话：

记得啦！年要过得快快乐乐的哦！
最令晓彤怕怕的是，
离PMR和初中统考又更近了！
晓彤担心自己没有考到理想的成绩……
（突然响起炮竹声）
好啦，祝大家新年快乐，万事如意……
红包记得分我一半！哈哈~

如何自己制作back to top 按钮

基本上，白痴的我也是今天才研究到的……
所以这篇，纯粹和大家分享~~
希望有意要用这个素材的朋友，这篇可以帮带你们~
~~~~~~~~~~~~~~~~~~晓彤专用分割线~~~~~~~~~~~~~~~
首先，打开 Paint。

然后上面会有一个shape的框框。

选箭头指去上面的图案，如图。

然后在画纸上画出来。就像这样：

当然，你也可以按自己喜欢设计它的outline，fill，晓彤就放了粉红色的。

过后，按，点选。
在画纸上把大概的形状裁剪出来，就像这样：

然后按，图画就会被裁剪，像这样↓

 按，就好了。可是这样的话，背景就会白白的，对于一些有颜色背景的部落格来说，这并不美观，所以接下来要把它变透明。
打开美图秀秀，点选新建，就会有一个弹窗：

点选以后，会看到这样的界面：

按右键，插入一张图片：

然后打开你save好的图片，接着点选，选择自动抠图。

按把白白的地方弄掉。过后按，就会出现这样的界面：

 然后按，就会看到：

 接着按，把多余的地方去掉，好了就可以啦~
切记，在出现这样的界面是：

记得按png，不然背景会白白的。
好了就像这样：

想知道如何使用？浏览：这里吧~
希望大家会明白！

如何制作dashboard&follow按钮

想知道如何使用，请看此篇教程。
其实白痴的我是昨天才研究到的~（好好……好失败！）
所以就想和大家分享这个喜悦……
决定……
教大家制作~~~
希望你们明白晓彤的白话文（白痴废话文）

首先~~~
打开美图秀秀，如果你家里没有这个软件，可以下载！

注意！

下载前记得要先scan你要download的美图有没有问题，以免中virus。

我先提醒，如果你有Photoshop、Ulead GIF animator 5也可以用啦！不过美图是华文的，操作起来比较方便。而且Photoshop是要钱买的！至于Ulead GIF animator 5，我没有……所以我也不知道……


打开过后按 。这个图案是在右上角的~

接着，会有一个弹窗像这样：

如图，选透明，按应用。

按了应用过后，就会看到这样的界面：

过后，在透明的画布上按右键，选 。到libraries选你save好的图片（logo底图，小的）打开，在上面写字（用文字），裁剪，保存，完成！

小提醒：（图画来源：丰丰三❤之记——如何自制鼠标）（sorry，我相机拍不到！）

记得要选png，不然背景就会白白的！
使用方法： Design → Add A Gadget → HTML/ Java Script
code是：（从丰丰三❤之记—— 用自己喜欢的图画制作 Follow 和 Dashboard 按钮取得）
Dashboard
<a style="display:scroll;position:fixed;top:15px;left:15px;" href="http://www.blogger.com/home" title="Dashboard"><img src="图片 Direct Link" /></a>

蓝色的字是鼠标指向他会出现的字，两个highlight的是显示位置，可以换~

follow
<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>
一样的东西我就不多加解释了，至于 Blog ID 就是：
http://www.blogger.com/blogger.g?blogID=4794771460205346696#pageelements

这个你可以在page element 上面看到，把=后面的数字抄起来就可以了~

有一些我自制的，按右键→Copy Link Location 就可以获取图片网址了！
 

还有，这是晓彤新的连接图案↓

记得啦~有放的朋友，虽然之前那个可以到我的blog，但希望你们能更新一下~谢谢你们的配合！

还有哦，明天是晓彤的农历生日，希望大家在庆祝除夕之际，也可以在心里默念：晓彤生日快乐！