泪划痕
Best viewed in Google Chrome

2011年11月6日星期日

鼠标指向Header 标题有图案滑过

 
如上图,就是鼠标指向header标题的时候会有小熊图案滑过。
第一步骤
登入博客 - 信息中心 - 设计 - 修改HTML

CTRL+F 找 .Header h1 {
第二步骤
.Header h1 { 上面 paste以下代码。


#header { 
padding: 0px 0px 0px 100px;
background: url(图片网址)no-repeat; 
}

#header:hover { 
padding: 0px 0px 0px 100px;
background: url(图片网址)no-repeat; 

background-position:top right; 
-webkit-transition-duration: .5s; 
}

小提示:
青色字体 = header标题的位置,像我这样标题调去中间,数目,标题越向右边
红色字体 = 图案的图片网址
图片例子:

图片网址:
http://i1227.photobucket.com/albums/ee428/xiaolei123123/th_basya2.gif


预览+保存模板

45 道泪痕:

=叶诗= 说...

很赞很赞~~~
去弄弄看~~>w<

独泪 说...

哈哈,好的,谢谢啦 xDD

傻猪 说...

找不到.Header h1 { ><

独泪 说...

你的是找 #header h1 {

然后

.Header h1:hover { 改成 #header h1:hover {

傻猪 说...

ok

这里paste .Header h1 { 里的代码

不明白这什么意思?@@

独泪 说...

http://4.bp.blogspot.com/-yZINZ1woucM/TrWXL_Yme5I/AAAAAAAAEyA/ngO1h1KLk3M/s1600/1_%25E5%2589%25AF%25E6%259C%25AC.jpg

就是 .Header h1 { 里面的代码

你的是 #header h1 { 里面的代码

Kristy JU 说...
此评论已被作者删除。
Ms.Jiaqing♥ 说...

谢谢独泪的教程 =D

等我换回blogger template 就使用

=DD

傻猪 说...

弄了..做么图案不会飞过去的?@@

сlαíяě lαì 说...

弄到图案..
可是不会动啊 ><"

独泪 说...

Kristy JU
嗯,一边空白是指预览的时候一边空白么,是不是load着的关系

Ms.Jiaqing♥
哈哈,好的,你现在的blogskin很好看的说~

傻猪
要保存模板先,然后去指着他才会飞的

сlαíяě lαì
要保存模板先,才有效果的 =)

独泪 说...

傻猪 & сlαíяě lαì
唔,我已经更改了代码,看看这教程 用新的方法 =)

сlαíяě lαì 说...

谢谢你^^
弄到了 :)
感激万分 :DD

ϰιиɢʏɛɛ♡ 说...

我的弄不料 /.\
它出了很多代码字给我 @@

elaine 说...

能改图案的位置吗??因为离标题太远和太高了....

Ms.Jiaqing♥ 说...

哈哈 . 谢谢独泪的说 =D

傻猪 说...

可以了谢谢呀蛤 :D

独泪 说...

сlαíяě lαì
不客气,恭喜弄到了 ^^

ϰιиɢʏɛɛ♡
或许是你的click to enter 反效果,你试一试修改其他地方会不会出现很多字体
例如:小工具标题那里
h2 {

elaine
图案的位置只能改左右
你可以在 header h1 { 下面添加
width: 700px;
根绝自己博客调号码。

不过比较建议你博客整体宽度能小一点,因为太宽,图案才会隔得那么远

Ms.Jiaqing♥
哈哈,不客气 Ms.Jiaqing♥ =D

傻猪
恭喜成功,不客气 :DD

欣欣 说...

泪姐姐、请问一下腰怎样才能让别人在页面里留言呐?我研究很久了、还是研究不到。。我知道我很笨,但是你有教学吗?或者能教我怎样做吗?

独泪 说...

唔,那要看看你的页面是什么类型的,你用的页面时 blogger提供的么,blogger 提供的页面 评论不到地说 =)

其他的才能 :)

kєllч 说...

找不到.Header h1 {
怎样办><

αн ϰιи 说...

为什么不可以的,它写各式错误

欣欣 说...

那要怎样才能让别人在页面里评论?

=叶诗= 说...

刚刚研究到,
原来可以调那个图片滑过的速度到涅~XD

曉倩 说...

弄不到/.\
不懂是不是我部落格有问题啊/.\
每次弄一些你的教程都是弄不到=-=
很多教程也是弄不到:((
独泪姐可以教下我吗/.\
THx`

㊣寂寞天使® 说...

为什么找不到.Header h1 { ??

独泪 说...

kєllч
CTRL+F 找 /* header

在 /* header
---------------------------------** 下面
paste这个教程的代码 :)

αн ϰιи
有些模板并不适合这代码的
试试把 # 都换成句号 .

欣欣
用另外一种的页面,(图片页面)

=叶诗=
哈哈,是啊~能够调的 ^^

曉倩
是不是只要是 修改HTML那里修改东西都保存不到?
你的博客有没有 click to enter 这个东西

㊣寂寞天使®
找 /* header

在 /* header
---------------------------------** 下面
paste这个教程的代码

kєllч 说...

謝謝!你......

ゞмιcнιʏσ夏唲♥ 说...

弄到了 , 謝謝你獨淚 =D

独泪 说...

kєllч
不客气^^

ゞмιcнιʏσ夏唲♥
恭喜成功,不客气 =D

QiuYI 说...

拿了.thanks:))

笨蛋AmA 说...
此评论已被作者删除。
笨蛋AmA 说...

要怎样更改图案的位置?我的图案太靠近了,我想要把它移去左边一点..而且要怎样把图案滑动的距离拉长?><

http://aboutmecelinegan.blogspot.com/

Charlene♥ 说...

用了.谢谢:)

ZqinG 说...

咳、
我想请问下哦,之前我使用了是ok的
但是我一换了名之后就用不到了
能告诉我是什么问题吗?

jia jia 说...

我弄不到耶,为什么呢?
www.chewjiajia.blogspot.com

xcioyi bII ♥ 说...

弄到了 谢谢 :-)

夏郡 说...

呼呼~成功了~谢谢你吖~^^

YεзΗυeγ 说...

抱走啦啦啦啦 :DD

Elaine Teoh 说...
此评论已被作者删除。
Elaine Teoh 说...

为什么我弄不到的?
可以教我吗?

http://xiinya.blogspot.com

Tingting Voon 说...

為什麼我找不到/* header??可以教教我嗎??我每次都找不到你說的東西T T

小靖靖 说...

take =)))

BII LING 说...
此评论已被作者删除。
BII LING 说...

为什么我的在上面的 @@ 被我更改过的navbar挡着了><
是图片的问题吗 所以我暂时先删除不放了 :'(

发表评论