Tuesday, August 17, 2010

把《继续阅读》换成图片 Change "read more" feature into an icon

刚才由于CINDY说喜欢我的无精打采的上课天,所以我就去加了Facebook的like按钮,这样下次就可以直接like了。结果手还痒,就把“继续阅读//read more”稍微改一改美化一下,哈哈!

之前。 Before.

之后。After.


其实这个一点都不难,只有几个步骤而已。
Only few steps needed for this.

第一个步骤。
First step.
登陆,然后点击“Design//设计”。
Sign in then click "Design".

然后点击“Edit HTML//修改HTML”。
Click "Edit HTML" then.

第二步骤。
Second Step.
① 记得先把模板下载储存起来以防万一。
① Always remember to download full template for backup!!

② 在“Expand Widget Templates//扩展窗口小部件模板”前的小空格打钩。
② Tick the "Expand Widget Templates".

③ 按Ctrl+F以搜索代码。
③Press Ctrl+F to search the code below.
<div class='jump-link'>
**那是我们需要用到的代码,这很重要哦!
**This is the code we want to find, it's important!

接下来。
After this.
红色框框里的代码将被下面的代码取代。
Replace the code in the red box by the code given at below.

<img border='0' src='你喜欢的图片代码贴这边//Your icon's direct link here'/>
##如果你希望你的图片出现在右边就用以下的代码取代。
##If you prefer your icon shows at the right, replace by the code below.
<p align="right"><img border="0" src="你喜欢的图片代码贴这边//Your icon's direct link here"/></p>

##如果你希望你的图片出现在中间就用以下的代码取代。
##If you prefer your icon shows at centre, replace by the code below.
<p align="center"><img border="0" src="你喜欢的图片代码贴这边//Your icon's direct link here"/></p>

##如果你希望你的图片出现在左边就用以下的代码取代。
##If you prefer your icon shows at the left, replace by the code below.
<p align="left"><img border="0" src="你喜欢的图片代码贴这边//Your icon's direct link here"/></p>

看到了吗?把之前的代码取代就可以了。
Just replace the original code with the code shows at above.

“保存”,就完成了!超简单的 =)
Save it, and done! How easy =)

这是刚才自己做的,要说不满意的话我觉得已经不错了,要说满意的话又还有进步的空间。希望有时间的话慢慢研究做个gif格式的。
I made this myself just now. Not fully satisfied since still can make a better one but actually i feel that it's not bad also. Next time gonna make a gif format icon for my blog =)

当鼠标在图片上面停下来时,会显示帖子标题哦!
When your cursor is on the icon, the post's title will be shown! X)

No comments:

Post a Comment

Your comment is able to make the blogger to keep it up.