- Tutorial requested by Janice -
1. 登入部落格 → 修改 HTML
2. Ctrl+F 寻找代码 </style>
3. 在 </style> 下面添加以下代码：
<script language="javascript" type="text/javascript">/* toggle() checks to see if the images has already been fadedor not and sends the appropriate variables to opacity(); */function toggle(el,milli) {// Get the opacity style parameter from the imagevar currOpacity = document.getElementById(el).style.opacity;if(currOpacity != 0) { // if not fadedfade(el, milli, 100, 0);} else { // else the images is already fadedfade(el, milli, 0, 100);}}/* changeOpacity() uses three different opacity settings toachieve a cross-browser opacity changing function. Thisfunction can also be used to directly change the opacityof an element. */function changeOpacity(el,opacity) {var image = document.getElementById(el);// For Mozillaimage.style.MozOpacity = (opacity / 100);// For IEimage.style.filter = "alpha(opacity=" + opacity + ")";// For othersimage.style.opacity = (opacity / 100);}/* fade() will fade the image in or out based on the startingand ending opacity settings. The speed of the fade isdetermined by the variable milli (total time of the fadein milliseconds)*/function fade(el,milli,start,end) {var fadeTime = Math.round(milli/100);var i = 0; // Fade Timer// Fade inif(start < end) {for(j = start; j <= end; j++) {// define the expression to be called in setTimeout()var expr = "changeOpacity('" + el + "'," + j + ")";var timeout = i * fadeTime;// setTimeout will call 'expr' after 'timeout' millisecondssetTimeout(expr,timeout);i++;}}// Fade outelse if(start > end) {for(j = start; j >= end; j--) {var expr = "changeOpacity('" + el + "'," + j + ")";var timeout = i * fadeTime;setTimeout(expr,timeout);i++;}}}</script>
4. 然后，在 <head> 上面添加以下代码：
<div class="enter" onClick="javascript:toggle('wise', 3000); this.style.display='none';document.getElementById('june').style.display=''"><img src="图片网址"style="opacity:0.4;filter:alpha(opacity=40)"onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"onmouseout="this.style.opacity=0.7;this.filters.alpha.opacity=40"/></div><div id="wise" style="filter : alpha(opacity=0); -moz-opacity : 0; opacity : 0;"><div id="june" style="display : none;">
5. Ctrl+F 寻找代码 <style type="text/css">，然后在下面添加以下代码：
.enter {text-align: center;margin-top: 200px;}
6. 预览看看你的 Click 图片有没有出现，即可保存。
小解释
蓝色代码：你的 Click To Enter 图片网址
有助素材：
Categories: Bii の語法筆記, BS 教程
感谢不尽~ :D
ReplyDelete第5個step過不了 T3T
ReplyDelete能幫幫我不? 謝謝你... :)
- Replied ♥ -
Delete嗨^^ BS = BlogSkin ? 我不知道BS是什么耶...有没有BlogSpot的呢?
ReplyDelete有的 =]
Delete教程：http://angelbii.blogspot.com/2011/12/click-to-enterblog-template.html
只是呢，Blog Template 使用了此教程可能会出现发效果哦 ^^
好的...谢谢你哦 :)
ReplyDelete过不到step5 ：（
ReplyDelete这个是给 BS 的使用者的 ^^
Delete-replied by Bii.
不好意思~如果我是新手呢？
ReplyDelete我不明白你全部全部在写什么耶...有更容易的吗？
hmm.. 怎么说呢。这只是其中一项美化效果而已。就是在进入你的部落格之前，会先停留在一个图片的页面，要点击图片才能正式进入你的部落格 =] 如果你要使用此效果的话，需是 BS 模板哟。
Delete- 怎么说更容易的? 或许你可以留言告诉我你想要的效果，我可以帮你找找 ^^
-replied by Bii.