越努力越幸运。
不管如何,我比你努力,比你好,比你更问心无愧。

2017.02.22

教程 | Click To Enter (BT)


亲爱的博友们 :D 你们想要的教程来料 ^ ^
之前很多使用 blog template 的博友们都因为那个代码导致不能编辑你们的 HTML, 现在这个不会了。这个是改良过的 Click To Enter, blog template 使用者可以使用哦!

1. 设计 → 修改 HTML

2. 在 Expand Widget Template 打 √

3. Ctrl +  F 寻找代码 ]]></b:skin>

4. 在 ]]></b:skin> 上面添加以下代码:

/* to top */
#toTop { width:100px;background:none;border:0px solid #ccc;text-
align:center;padding:5px;position:fixed;bottom:10px;right:10px;cursor:pointer;color:#666;text-
decoration:none; }
</style></head>
<script language="javascript" type="text/javascript">
/* toggle() checks to see if the images has already been faded
or not and sends the appropriate variables to opacity(); */
function toggle(el,milli) {
// Get the opacity style parameter from the image
var currOpacity = document.getElementById(el).style.opacity;
if(currOpacity != 0) { // if not faded
fade(el, milli, 100, 0);
} else { // else the images is already faded
fade(el, milli, 0, 100);
}
}
/* changeOpacity() uses three different opacity settings to
achieve a cross-browser opacity changing function. This
function can also be used to directly change the opacity
of an element. */
function changeOpacity(el,opacity) {
var image = document.getElementById(el);
// For Mozilla
image.style.MozOpacity = (opacity / 100);
// For IE
image.style.filter = "alpha(opacity=" + opacity + ")";
// For others
image.style.opacity = (opacity / 100);
}
/* fade() will fade the image in or out based on the starting
and ending opacity settings. The speed of the fade is
determined by the variable milli (total time of the fade
in milliseconds)*/
function fade(el,milli,start,end) {
var fadeTime = Math.round(milli/100);
var i = 0; // Fade Timer
// Fade in
if(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' milliseconds
setTimeout(expr,timeout);
i++;
}
}
// Fade out
else if(start > end) {
for(j = start; j >= end; j--) {
var expr = "changeOpacity('" + el + "'," + j + ")";
var timeout = i * fadeTime;
setTimeout(expr,timeout);
i++;
}
}
}
</script>
<div class="input" onClick="javascript:toggle('wise', 3000); this.style.display='none';
document.getElementById('june').style.display=''">
<center><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"/></center>
</div>
<div id="wise" style="filter : alpha(opacity=0); -moz-opacity : 0; opacity : 0;">
<div id="june" style="display : none;">
<body>
5. 先按 preview 看看,看有没有问题,没有问题再按 保存 即可。

小解释
图片网址:将你的 click to enter 的图片 direct link 加上去就好了。

更新
有人跟我讲,这个还是不可以,因为 followers 会看不见,没关系,我找到办法解决辽。

= 将你的 follower gadget 删除掉,使用另一种的 follower gadget,这样就看得见你的 followers 了。虽然偶尔会看不见,不过 refresh 几次就看到了。

另类 follower gadget → Click Here

素材
提供两张自制的 click to enter 素材,大家可以拿去使用哦 ^.^



http://i1198.photobucket.com/albums/aa448/shehjing/1.gif



http://i1198.photobucket.com/albums/aa448/shehjing/2.gif

相关文章:

12 comments:

  1. 我去布局那里 , 我要 customize 可是却出现 Whoops ? that's an error .

    ReplyDelete
    Replies
    1. 应该是你之前添加过了 又或者 是你的代码没加好 :)

      - replied by Bii.

      Delete
  2. 抱歉打扰了 =)
    请问为什么我一直做不到那个东东滴?
    是哪里出问题了吗?
    谢谢!!=)

    ReplyDelete
    Replies
    1. 我在我的实验室试过了, 教程没有问题啊 :)
      再看清楚所有的步骤, 试多一次、

      - replied by Bii.

      Delete
  3. 請問你的圖片怎麼做的啊 >.<

    ReplyDelete
    Replies
    1. 我是使用 UGA 制作的

      -replied by Bii.

      Delete
  4. 弄到了 :) 謝謝哦 可是爲什麽一直出現 "-->" 在左上角呢? /-\

    ReplyDelete
    Replies
    1. 这应该是代码的关系 :)
      到【修改HTML】里,Ctrl+F 寻找 "-->" 这个代码,然后删除掉,保存之前预览一下,确定没有问题再保存 :)

      -replied by Bii.

      Delete
  5. 不好意思,为什么新版的做不到 ? ><

    ReplyDelete
    Replies
    1. 一样做的到哟 ^^ 已经试验了 :) 或许是代码添加错了 ? ^^

      -replied by Bii.

      Delete
  6. 现在最新版本的都弄不到 ): 怎么办呢

    ReplyDelete
    Replies
    1. 亲,弄得到哦 :) 新版本已经试过了 :)

      - replied by Bii.

      Delete

っ 谢谢你耐心的看完这篇帖子 ♥
っ 评论将在博主审核后发布,如有不便,敬请原谅哦 :)
っ 除了评论之外,亲也可以选择在 Cbox 留言或 PM 我的部落格专页信箱

ベ 请用词确切,勿使用脏字哟
ベ 部落格不接受匿名评论,评论前请确保你拥有 Google Account 哦
ベ 请仔细列明你的问题好方便我回答哦 :)

* 感谢你的留言,欢迎下次再来。