嗯……改版了,发到这儿行么?
看到一些博客里面有可伸缩的滑动订阅按钮(就是把鼠标放到大按钮上就能自动滑出小按钮,鼠标离开的时候再自动滑进),感觉这样既有趣又能节约侧边栏空间,就想把它拿来。看了看代码,很简单,就是用了java script。当然并非只是zblog能用,按理说wordpress、oblog、boblog、pjblog、xblog等等博客系统都能用,其他 BSP的博客系统如果支持js就可以用。
代码如下:
复制内容到剪贴板
代码:
<script type="text/javascript">
function popMenu(objId) {
var obj = document.getElementById(objId);
if (obj.style.display == 'none') {
obj.style.display = 'block';
} else {
obj.style.display = 'none';
}
}
</script>
<!--上面这是滑动效果所需要的js代码,如果浏览器仅用了js,效果就没了!-->
<div class="function" id="menuCaption" onmouseover="popMenu('menuLists');" onmouseout="popMenu('menuLists');" align="center">
<!--上面这句的意思是说,被这个div框起来的东西就是一直露在外面的那玩意儿 ->
<a href="http://feed.feedsky.com/butwho" rel="nofollow"><img style="padding:10px 2px 2px 10px;" alt="RSS Feed" title="rss订阅" src="http://www.butwho.net/image/logo/rss01.gif" /></a>
<!--上面这是大号的订阅按钮,大家在用的时候可以自己挑张好看的图片-->
<div id="menuLists" style="display:none;" align="center">
<!--上面这句的意思是说,被这个div框起来的东西就是收缩进去的那玩意儿 ->
<!-- Feedsky FEED发布代码开始 -->
<!-- #######这儿放上feedsky或者其他feed什么的发布代码######-->
<!-- Feedsky FEED发布代码结束 -->
</div>
</div>效果演示到[url]http//www.butwho.net[/url] 看。
使用的时候,把上面一段代码放到合适的地方即可。
**啥是合适的地方?对于俺用的zblog 1.7来说,就是TEMPLATE模版文件夹下default.html或者single.html文件中的一个地方,比如<div id="divSidebar">这一行的后面。
插入的订阅代码后面,可以再加上“添加到收藏夹”代码和邮件订阅代码,这样虽然多了一个收藏按钮和邮件订阅按钮,但由于这些按钮平时都是收缩状态,并不用担心他们会占用太多地方。
其实这件事情俺以前说过,不过这次公布的是技术细节。也没啥技术含量,放到这儿只是为了显摆罢了。俺的侧边拦就用了这个效果,好事者可以去点击几下看看。
另外,俺在一些地方见到过一个不用javascript只用CSS就能完成的滑动效果,但是俺基本上是个代码盲,没有能力(或者说是没有精力)把那些代码改成俺所需要的形式。好事者可以下载附件的css滑动效果代码,然后改成俺的rss订阅按钮那种形式送给俺。不胜感激!
本文链接地址:
http://www.butwho.net/2008/01/zb ... _Effect_button.html
ps:今天网通访问zblogbbs异常地快……
[
本帖最后由 butwho 于 2008-1-6 19:41 编辑 ]