..❀CaPPuccino❀..
❀❀
ღ Cappuccino Room ღ
biography favourite stuffies darlinks home entry






OLDER | NEWER
♥ 教程分享 - 特别的状态栏 ♥

POSTED ON 2/01/2013 | 0 TAG



喽亲们,我滚回来啦。哇,好久没有上部落格写贴文了,因为懒惰,哈哈。这次发布的是教程呢,是施惠亲要求的,所以就写了教程给亲啦。其实我还不是很清楚代码的问题,所以亲如果要问比较复杂的问题,我也未必能完完全全地帮亲解决问题。如果帮不到亲,就请亲请教比较厉害的代码高手唄,呵呵。好啦,进入正题吧,我要发布的教程就是特别的状态栏。这个教程是我从BS教程里改编成功的,有点儿复杂,请亲要耐心的看完和完成这教程。看看以下的范例吧。

- Elaine's -
>> 我的黑眼圈好深..惨~
updated in 02.22a.m
15/12/12


>> 部落格换新面貌了 ♥ ~评论吧。=)
updated in 01.00a.m
13/12/12
- End -
-这就是范例-

首先,登入博客
信息中心
佈局
添加小工具
HTML/JavaScript
⑥Paste代码
⑦保存
⑧预览

第一款(状态①会移动):
<center/><img src="名字前面的图标链接" /> 你的名字 </center><center><div style="border-top:1px dashed #FFD2D2; width: 200px; padding:3px;"><div id="status"><marquee direction="left"  scrollamount=3 onmouseover=this.stop() onmouseout=this.start()><div style="color: #FFB5B5;"><span class="icon"></span> >> 你的状态①</div></marquee></div><div style="float: left;margin-top:5px;color: #FFD2D2;"><span class="time">updated in 状态①的时间</span></div><div style="float: right;margin-top:5px;color: #FFD2D2;"><span class="date">状态①的日期</span></div><br/><br/><div style="color: #FFB5B5;"><span class="icon"></span> >> 你的状态②<br/><div style="float: left;margin-top:5px;color: #FFD2D2;"><span class="time">updated in 状态②的时间</span></div><div style="float: right;margin-top:5px;color: #FFD2D2;"><span class="date">状态②的日期</span></div></div></div><div style="border-bottom: 1px dashed #FFD2D2; width: 200px; padding:11px;"></div></center><center/><img src="图标链接" /> - End - </center>
第二款(状态①不会移动):
<center/><img src="名字前面的图标链接" /> 你的名字 </center><center><div style="border-top:1px dashed #FFD2D2; width: 200px; padding:3px;"><div id="status"><div style="color: #FFB5B5;"><span class="icon"></span> >> 你的状态①</div><div style="float: left;margin-top:5px;color: #FFD2D2;"><span class="time">updated in 状态①的时间</span></div><div style="float: right;margin-top:5px;color: #FFD2D2;"><span class="date">状态①的日期</span></div><br/><br/><div style="color: #FFB5B5;"><span class="icon"></span> >> 你的状态②<br/><div style="float: left;margin-top:5px;color: #FFD2D2;"><span class="time">updated in 状态②的时间</span></div><div style="float: right;margin-top:5px;color: #FFD2D2;"><span class="date">状态②的日期</span></div></div></div><div style="border-bottom: 1px dashed #FFD2D2; width: 200px; padding:11px;"></div></center><center/><img src="图标链接" /> - End - </center>
补充代码说明:

红色背景:border的厚度
橙色背景:border的款式
蓝色背景:border的颜色
紫色背景:状态的颜色
青色背景:icon图标
黑色背景:状态时间、日期的颜色

P.S:若亲想要添加更多的状态,请把以下的代码copy&paste在状态②的日期</span></div>之后就行了。
<div style="float: left;margin-top:5px;color: #FFD2D2;"><span class="time">updated in 状态时间</span></div><div style="float: right;margin-top:5px;color: #FFD2D2;"><span class="date">状态日期</span></div><br/><br/><div style="color: #FFB5B5;"><span class="icon"></span> >> 你的状态
颜色代码:
请按这 

边框款式:



呼(汗"'),教程终于结束了。感谢亲看完我的教程,亲要有耐心完成哦。祝亲们能成功完成啦。不明白的亲们可以在帖子下面或者在留言箱留言问我,我会回答亲们。谢谢。
虽然不是我自制的,可是是我很辛苦改编过来的。所以转载者请贴上我的部落格链接,感谢合作。


sticker


标签: ,

发表评论

♥--------------------------------------------------------------------------------------------♥
Welcome to my blog-Cappuccino..♥
I'm very appreciate for your visit and read my post~
Welcome dear leave the comment to me after read my post..or
Dear can leave comment in my tagboard..♥

Dear,please don't speaking rudely..
If dear is a trouble-maker,please GET OUT from my blog..
Thank you very much..~
Thanks for your cooperation~Welcome dear visit again next time~
♥--------------------------------------------------------------------------------------------♥

♥-POSTED BY *ELAINE*-♥
COPYRIGHTED © IN -CAPPUCCINO-