Tutorials Require By Hue Peng .
原本想要连Blog Template 的方法一起放出来
不过我还没研究出语法 @@
加上考试时期没啥时间研究 ><
不过待考试完毕我一定更新 Blog Template的语法给你们 /.\
前提; 要我研究到了才能更新哦 >3<
---------------------------------------
效果 ::
Blogskin
在 </style> 的上面添加以下的code
#side{
position:absolute;
top:300px;
border-radius:10px;
left:150px;
opacity:0;
width:100px;
height:100px;
padding:3px;
-webkit-transition:0.4s;
-moz-transition: 0.4s;}
#side:hover {
position:absolute;
top:300px;
border-radius:10px;
left:50px;
opacity:10;
width:200px;
height:100px;
padding:3px;
-webkit-transition:0.4s;
-moz-transition: 0.4s;}
.navi {
font-size: 11px;
background:#fff;
color:#000;
opacity:0.4;
border:1px solid #C9C9C9;
padding: 3px;
margin:1px;
width:80px;
display:inline-block;
text-align:center;
-webkit-transition: 0.4s;
-moz-transition: 0.4s;}
.navi:hover{
background: #fff;
color: #000;
-webkit-transition: 0.4s;
-moz-transition: 0.4s;}
Explain ;
side :
紫色代码 - 数字越小,navigation 就越高
深紫色代码 - 数字越小,navigation 就离图片越远 [view ↓]
数字大
数字小
Width & Height - 宽度 & 高度,可自行更改
navi :
橙色代码 - 背景颜色
黄色代码 - 字体的颜色
粉橘色代码 - 框框线条粗细,样式,颜色
width - 宽度,可自行更改
浏览看看有没有出现乱码,
没有的话就save 起来.
然后在 </style> 的下面添加以下的code
<img src="图案 Direct link/ URL" style="border:1px solid #000; padding:2px; background:#fff; position:absolute; left:150px; top:280px;" width="130" />
<div id="side" style="float:left;padding:3px; ">
<a class="navi" onClick="document.getElementById('main').innerHTML=document.getElementById('页面 ID').innerHTML" title="">显示字体</a> <br/>
<a class="navi" onClick="document.getElementById('main').innerHTML=document.getElementById('页面 ID').innerHTML" title="">显示字体</a> <br/>
<a class="navi" onClick="document.getElementById('main').innerHTML=document.getElementById('页面 ID').innerHTML" title="">显示字体</a> <br/>
</div>
Explain ;
浅青色代码 - 框框线条粗细,样式,颜色
青色代码 - 数字越小, 图片越靠近左边
深青代码 - 数字越小, 图片越高
width - 图片的宽度
页面ID - 页面的"认证码"
在页面都找得到[view ↓]
如果要点击的时候是进入网站的话
就把以下的代码放进去
<a class="navi"href="Website">显示字体</a>
- 如果要页面漂浮在右边, 就把left 改去right
- top 和 left 根据自己的blog 来调
---------------------------------------
Extra ;
如果你的Bs 已经有了美化navigation 的代码
可以选择把.navi {.....} 删掉 :)
---------------------------------------
成功要说,
不成功也要说
好让我知道有没有弄错代码 @@
感谢您的收看 [电视节目咩=-=]
下次记得来看我 ! :P
