Sepia2.gif

【教程】如何让图标不再飞起来?Say no to floating icon in blog post

3/15/2012 12:16:00 PM wawalicious小歪 1 Comments

这次的部落格教程是小歪自己研究出来,所以现在就与大家分享啦!

这绝对是独家的一遍教程哦,文章的每一张照片都是小歪辛辛苦苦弄出来的,
所以别在我不允许的情况下转发或占为己有,这样的做法实在是不道德的哟。

因为之前部落格一直都会有图标“飞起来”的困扰,可以参考这篇文章。
小歪找了很多网上的教程,从中文到英文的教程都找遍,还是找不到解决的办法。

所以我还是下定决心自己研究部落格的代码,然后一个一个地改,
当然还是很感谢之前中学电脑课所学习的html课程,所以很快就能找到问题所在了!

其实有很多博友们都不会放小图标的习惯,
所以我相信不是全部朋友都觉得这篇文章帮助很大。

但我还是相信这世界上是有人和我一样,觉得在文章里放图标来表示自己的心情是件很巧妙的技巧,因为有时候乏味的文字是带不出博主真正的感觉/心情。

所以每当聊天时,或打文章都可以运用这些小图标,让自己的文章更加有趣,更加可爱!
同样拥有这问题的朋友们,来到这篇教程实在是太有福啦!

因为从今以后文章的地心引力又回来了,图标也会踏踏实实地在文章旁边,再也不会飞起来鲁。

在这里给大家小小的tips:通常我们的部落格的照片都会自动上传自picasa album,户口帐号和密码和部落格的帐号密码是一样的,所以如果大家有喜欢的小图标,都可以上传去picasa album,这样写部落格的时候可以很方便的从相簿里找到哦!

通常,基本上部落格里的default html会让小图标没有地心引力地飞起来:





只要简简单单的一步骤,就能让部落格的地心引力回来啦!


。。。。。。

【教程开始】
english version updated 6/4/12

按Blogger 的 【Dashboard】, 然后 【Design】--> 【Edit HTML】
在键盘(keyboard)上同时按下 Ctrl + F 的符号,在下方会出现一排东西
在【Find:】隔壁的空格打 --> Post img , 系统会自动找到这一段代码
.post img {
padding: 0px;

此刻您的部落格里这段代码的红色数字会是别的数字,把它改成 0
按【preview】, 前提是部落格里的文章必须要有小图标,否则看不出效果哦!如果看到图标“稳重”地在文字旁边,就代表成功啦!
最后别忘了【save template】,就算大功告成

。。。

【 English Version - No more floating icon in blog post tutorial 】

First click into Blogger 【Dashboard】, and next proceed to 【Design】and 【Edit HTML】
Type Ctrl + F on the same time to display the search box under your webpage
On the blank space type --> Post img , the system will lead you and you can see this
.post img {
padding: 0px;

The no. on red'll be another figure, eg, 10. Please change it to 0.
Preview to find out if this works. You must at least have a post with emoticon to see the result. With correct steps now the emoticons should be no more "floating".
Lastly don't forget to 【save template】,happy blogging everyone

Note : Please take note that this tutorial is written by myself with the purpose of sharing my knowledge with you all. Please do not modify and repost this tutorial and claim as yours. You may repost this article under my site name wawa-licious.blogspot.com. Thanks

.... ....

简简单单的几秒钟,就能把问题解决啦!

最后小歪再此注明,此教程是原创的,
如有任何人未经过我的同意就转发此文章,必会追究到底。

要知道教程是一字一字用心打出来,为得只是把我所知道的知识分享给大家,
如果就这样无礼地把文章转走或占为己有,是很让人难过的事情哦!

小歪陆续会把自己所知道的教程在部落格与大家分享,敬请期待!

祝大家 Happy Blogging


1 comments:

小旻 said...

西西~

好教材!

但,
我很少用圖例!
通常都是用呼號來代替啦。。。

圖畫這東東。。。haiz~
又要網回來再 copy & paste 上去。。。。
懶蟲上身勒!

除非 copy the img from u ..haha!!