; Elaine0211
HOME TUTORIALS MATERIALS LINKS FOLLOW CHATBOX

# 课程 ; 往下滑落的页面
2013/03/27 16:44 ♥ 1 SARANG(s)

Tutorials Require By Hue Peng



备注一下下 : 这个效果不仅可以拿来当页面
也可以用来作为follow & dashboard 的效果图

> 此课程乃博主亲手操刀、不允许转帖!
> 抄袭此课程者必定在部落格公开.
> 请勿盗图!

----------------------------------------------------------------------------------------------

BT / BS 皆可使用

BT 使用者 ;

⒈ 模板 >> 修改HTML >> Ctrl+F 寻找 ]]></b:skin>
⒉ 在 ]]></b:skin> 的上面添加代码*1*
⒊ 浏览、确定没有出现乱码,,保存.
⒋ 然后在 布局 >> 添加小工具 >> HTML/JavaScript 添加代码*2*
⒌ 保存

BS 使用者 ;

⒈ 模板 >> Ctrl+F 寻找 </style>
⒉ 在 </style> 的上面添加以下的代码*1*
⒊ 然后在任何你想要的地方添加代码*3*
⒋ 保存.

代码*1*

#navig {
position:fixed;
text-align: center;
top:150px;
left:30px;
width:100px;
padding:3px;
background:#fff;
opacity:0.2;
margin-top:-10px;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
#navig:hover {
position:fixed;
top:160px;
opacity:0.9;
margin-top:0px;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}

Explain ;
橙色字体 ; 由顶端开始计算的距离
黄色字体 ; 由左 / 右开始计算的距离 [ 可换去left / right ]
青色字体 ; 宽度
水蓝字体 ; 背景颜色
蓝色字体 ; hover 过后 由顶端开始计算的距离 [ 增加10 -- 12px 为佳 ]
红色字体 ; 透明度

----------------------------------------------------------------------------------------------

代码*2*

<div style="background:#fff; width:100px; position:fixed; top:100px; left:30px; border-radius:2px; padding:10px; -moz-box-shadow: 0px 0px 5px #eee;-webkit-box-shadow: 0px 0px 5px #eee;box-shadow: 0px 0px 5px #eee;"><img src="图案direct link" width="100"/></a><br/></div>
<div id="navig"><a href="网址">显示字体</a></div>

Explain ;
青色字体 ; 宽度 [ 建议与代码*1* 的宽一样 ]
黄色字体 ; 由左 / 右开始计算的距离 [ 可换去left / right ]
橙色字体 ; shadow 代码 [ 可选择不要 ]

----------------------------------------------------------------------------------------------

代码*3*

<div style="background:#fff; width:100px; position:fixed; top:100px; left:30px; border-radius:2px; padding:10px; -moz-box-shadow: 0px 0px 5px #eee;-webkit-box-shadow: 0px 0px 5px #eee;box-shadow: 0px 0px 5px #eee;"><img src="图案direct link" width="100"/></a><br/></div>
<div id="navig"><a class="" onClick="document.getElementById('main').innerHTML=document.getElementById(' 页面ID ').innerHTML">显示字体</a></div>

Explain ;
青色字体 ; 宽度 [ 建议与代码*1* 的宽一样 ]
黄色字体 ; 由左 / 右开始计算的距离 [ 可换去left / right ]
橙色字体 ; shadow 代码 [ 可选择不要 ]
紫色字体 ; 页面ID [ BS的每个页面都有专属的代码 如: about ,, entry ,, post 等等 ]

{ highlight 处 的 <div id=" xxxx "> ,, 通常都在post title 的上面 }

Extra ;
注意 <a class=" HERE "..............</a> 你可以自己添加美化页面内容的代码
然后把HERE 换去页面内容的代表代码

----------------------------------------------------------------------------------------------

Extra ;
- <a href=" ... ">XXX</a> 可代替成关注 / 主页
// For Follow :
<a href="http://www.blogger.com/follow-blog.g?blogID=部落格ID">Follow</a>
// For Dashboard :
<a href="http://www.blogger.com">Dashboard</a>
- 如果要鼠标指着页面时是另一个鼠标的话,,可以在 navig {...} 里面添加这个代码
cursor:url( 鼠标url );

----------------------------------------------------------------------------------------------

课程完毕、
如果有哪里不明白可以再此帖子留言询问
Cbox 询问将不回复哦 :)
就这样,,祝你们成功 ;)

{{ Tutorial writed by BabeX eling ,, 2013 / 03 / 27 . }}

标签: , , , ,

◁ NEWER
OLDER ▷
© 2017 Designed By Elaine0211.