备注一下下 : 这个效果不仅可以拿来当页面
也可以用来作为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 . }}
