加载中…
个人资料
  • 博客等级:
  • 博客积分:
  • 博客访问:
  • 关注人气:
  • 获赠金笔:0支
  • 赠出金笔:0支
  • 荣誉徽章:
正文 字体大小:

乐乐教您制作个性化宝宝成长进度条

(2010-09-07 20:34:03)
标签:

新浪

育儿博客

宝宝成长进度条

育儿

分类: 柠檬成长记

 

打竹板,响叮当,
新浪博客不一般。
推出了全新育儿博客实在妙,
亲们用了都夸好。

 

要说那宝宝成长进度条,
用着方便确实想得很周到。
只不过成长条的模板有点儿少,
咱还得把新意思多搞搞。

 

新意思,怎么搞?
您问乐乐那是问着了。
看乐乐偶再来支一招,
您看看它是高呀还是不高。


今儿接到新浪的通知:
新浪为育儿博主推出了全新的育儿博客,新功能包括:四套育儿模板、宝宝资料组件、育儿要闻组件、实用工具组件、育儿话题和插入宝宝成长进度条。

 

乐乐偶心中甚是欢喜,赶紧试用一下,发现还是很不错的。


尤其是这宝宝成长进度条,以往亲们都是要去别的育儿类网站注册、建立成长条,然后再复制到博客里来用。如今,新浪有了自己的宝宝成长条,就更加方便啦。可以在发布每一篇博文的时候,都插入一个,一目了然哈。

 

不过乐乐偶觉得成长条只有四套模板,少了点儿选择。而且不能像其他网站那样能上传一张宝宝的头像。而且乐乐偶还有更大胆的想法:成长条能不能最大程度地个性化呢?

 

答案是:Yes!且听乐乐偶慢慢道来。

 

第一步

进入发博文页面,点击编辑框右侧“常用功能>宝宝生日”,会弹出小窗口,显示4个成长条模板,选择一个(以第4个为例),点击“插入成长进度条”后,您会发现成长条已经在编辑框中显示出来了。

http://s4/middle/63f73fa8t74c3e28b3593&690

 

http://s11/middle/63f73fa8t74c3e26fa07a&690

 

勾选编辑框底部左侧的“显示源代码”,您能看到编辑框里显示出了一段代码,如下:
<IMG height=87 src=http://simg.sinajs.cn/blog7style/images/common/baby/banner4.png width=502 type="face"

imgType="yuer" yuermsg="listCfg=textType=type4;name=乐乐_檬小

帅;y=0;m=8;d=0;bgURL=http://simg.sinajs.cn/blog7style/images/bring/baby_flashResource/babyBar/bg4.png;cursor

URL=http://simg.sinajs.cn/blog7style/images/bring/baby_flashResource/babyBar/cursor4.png;cursorX=152;cursorY=

58;dltX=30;tX=155;tY=18;tOffsetY=-6;font=幼圆;color=0xCD00AB;size=16;">
<P>&nbsp;</P>

 

http://s7/middle/63f73fa8t74c3e272aee6&690

 

看着好像是天书似的哈,没关系,咱们找到里面有用的信息就行。代码里有三个png图片地址,分别是:


第一个:http://simg.sinajs.cn/blog7style/images/common/baby/banner4.png
就在第一行。您在新窗口里打开这个图片地址,可以看倒上面带有“宝宝昵称已经2岁2月28天了”的字样。这只是模板的示意图。

http://s14/middle/63f73fa8t74c3e278ca2d&690

 

第二个:http://simg.sinajs.cn/blog7style/images/bring/baby_flashResource/babyBar/bg4.png
宝宝昵称后面那个就是。这个图片是成长条的背景图,您在新窗口里打开这个图片地址,就可以看出来不带任何文字的背景图。

http://s11/middle/63f73fa8t74c3e2744b5a&690

 

第三个:http://simg.sinajs.cn/blog7style/images/bring/baby_flashResource/babyBar/cursor4.png
这个是一个小图标,您也可以在新窗口里打开查看。它是随着月份进度而移动滴,有点像时针。

http://s8/middle/63f73fa8t74c3e275c4e7&690

 

其中第一、三个png图,咱们都可以不管它。偶们的重点是第二个png图,就是成长条的背景图。

 

在新窗口打开第二个png图后,点击鼠标右键“图片另存为”会发现无法保存到本机。别急,您可以用迅雷来下载。

 

第二步

然后我们在photoshop里打开这个png图片,就可以按照自己的想法进行个性化的设计了。

 

打开后如下图所示:

http://s13/middle/63f73fa8t74c3e27ee9bc&690


由于月份刻度的图标是会动滴,所以偶们在修改这个背景图模板的时候,需要保留月份刻度。其他的则可以保留,额外增加需要的东西,比如宝宝的头像、文字等等;也可以不保留,重新设计。

 

不管怎样,记住图片尺寸不用去修改。

 

下面这个就是偶的新设计的成长条,保留了原来的底色块和月份刻度,将左边原来的图案变成了偶的头像,还加了一个戴墨镜的柠檬。

http://s9/middle/63f73fa8t74c3e2850ea8&690

 

在photoshop里设计完了后,选择“文件>存储为Web所用格式”,保存为png24格式,文件名可以不改。

 

第三步

接下来,咱们在发布博文的编辑框里上传这个png图片,待图片插入显示后,点击编辑框底部左侧的“查看源代码”,找到这张图片的地址:
<A href="http://s11/orignal/63f73fa8t8fa6c148d44a" target=_blank><IMG

src="http://s11/middle/63f73fa8t8fa6c148d44a&amp;690"></A><BR><BR>

 

就是第一行的:http://s11/orignal/63f73fa8t8fa6c148d44a
复制这个地址,然后编辑框里的这张图片就可以删掉了,不用保存。

http://s12/middle/63f73fa8t74c3e280733b&690

 

偶不知道新浪会不会永久保存这张上传了但是没有在博文里发布的图片,如果亲不放心,可以在相册里上传这张背景图,保存在相册里,然后获取图片的地址。

 

最后,我们只要在“源代码”里用这个图片地址去替换成长条原来的那第二个png背景图的地址就ok了。

 

发布这篇博文,您看,最终的效果就出来啦!

http://s8/middle/63f73fa8t74c3e2820b07&690

 

大功告成咯!亲,您会了吗?

 

如果您以后发别的博文还要用,就可以从这篇博文的源代码里复制这段粘贴过去就可以啦。

 

本文开头的成长条是另一个设计。

 

友情提醒:

新浪的宝宝成长进度条不是一劳永逸的,您不能做一个放在置顶的博文里,因为它的日子不能自己更新。只有在当天博文里添加后,根据当天的日期生成。所以如果换了个性背景图,就要每次替换一下背景图的地址。

 

—————————————————————————————————————————————————

 

感谢管理员豆芽妈推荐本文到育儿博客:

http://s6/middle/63f73fa8t8fb70317af15&690

 
您觉得偶这个宝宝成长条个性化的制作方法怎么样?最多可选1项
发起时间:2010-09-07 20:00    截止时间:2010-11-07 20:00    投票人数:0人
  • 0(0%)
  • 0(0%)
  • 0(0%)
投票已截止
最后投票

    0

    阅读 收藏 喜欢 打印举报/Report
    后一篇:剃头歌
      

    新浪BLOG意见反馈留言板 欢迎批评指正

    新浪简介 | About Sina | 广告服务 | 联系我们 | 招聘信息 | 网站律师 | SINA English | 产品答疑

    新浪公司 版权所有