2007年1月31日星期三

blogger 3.0:为博客文章页 添加折叠式社会书签按钮

感谢原作者PurpleMoggy
这个hack的作用就是在你的博客文章页添加一个伸缩式菜单,以便于添加该文章页文章到各种社会书签上。
例子可以参考我的测试博客文章页

个人不是很喜欢社会书签,我认为如果读者正使用某社会书签,没有按钮也会添加你的文章(毕竟各大社会书签网站本身就有各种方便的添加方法)。如果读者根本没有使用什么社会书签,有了按钮也不会用……

另外我说点题外话,如果大家先我翻译了某篇hack文章的话(当然如果你自己理解了并测试修正再编译更好),请留言,尊重你的劳动,我会在开头链接你的相应文章并感谢您的工作。但是如果你只是先我介绍了某个hack/扩展,而且还是大家都知道的英文专业博客上的文章,不好意思,我要忽略你的文章……没有劳动而投机取巧是得不到我的尊重的。因此我会调整下我另外一篇文章的感谢名单,取消只是率先介绍的链接。

安装方法:
第一步,首先在你的css区域,即]]<>/b:skin>上边添加以下代码:

.anylinkcss{
position:absolute;
visibility: hidden;
border:1px solid black;
border-bottom-width: 0;
font:normal 12px Verdana;
line-height: 18px;
z-index: 100;
background-color: #E9FECB;
width: 205px;
}
.anylinkcss a{
width: 100%;
display: block;
text-indent: 3px;
border-bottom: 1px solid black;
padding: 1px 0;
text-decoration: none;
font-weight: bold;
text-indent: 5px;
}
.anylinkcss a:hover{ /*hover background color*/
background-color: black;
color: white;
}


你可以通过修改上面的代码改变hack的样式。

第二步,把下面的代码加入你的xml模板里的</head>上边,]]<>/b:skin>下边:
<script src='http://yggomelprup.googlepages.com/anylink.js' type='text/javascript'/>
这个脚本文件可以 点击这里下载.
你也可以使用下边的地址:http://ggpi.googlecode.com/files/anylink.js
http://ggpi.008.net/anylink.js

最后, 你只需要把下面的代码添加到你想显示这个hack的地方:
<b:if cond='data:blog.pageType == "item"'>
<a href="javascript:void(0);" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, 'anylinkmenu1')">[+] Recommend</a>
<div id="anylinkmenu1" class="anylinkcss">
<a expr:href='"http://digg.com/submit?phase=2&amp;url=" + data:post.url + "&amp;title=" + data:post.title' class='snap_nopreview' target='_blank'>Digg</a>
<a expr:href='"http://reddit.com/submit?url=" + data:post.url + "&amp;title=" + data:post.title' class='snap_nopreview' target='_blank'>Reddit</a>
<a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&amp;title=" + data:post.title' class='snap_nopreview' target='_blank'>del.icio.us</a>
<a expr:href='"http://furl.net/storeIt.jsp?u=" + data:post.url + "&amp;t=" + data:post.title' class='snap_nopreview' target='_blank'>Furl</a>
<a expr:href='"http://ma.gnolia.com/bookmarklet/add?url=" + data:post.url + "&amp;title=" + data:post.title' class='snap_nopreview' target='_blank'>Ma.gnolia.com</a>
<a expr:href='"http://www.sphere.com/search?q=" + data:post.url' class='snap_nopreview'>Sphere</a>
<a class='snap_nopreview' expr:href='"http://www.google.com/bookmarks/mark?op=add&bkmk=" + data:post.url + "&thetitle=" + data:post.title' target='_blank'>google</a>
<a expr:href='"http://www.ifeedreaders.com/bookmark.php?theurl=" + data:post.url + "&amp;thetitle=" + data:post.title' class='snap_nopreview' target='_blank'>More...</a>
</div>
</b:if>


我个人把上面这段代码添加到了

<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
</b:if>
</b:if>

正下面,效果就如我测试博客的页面效果。

3 评论:

发表评论: ☆欢迎灌水☆言论自由☆交流快乐☆