Homepage
About Me
Leave Words
Table of ContentsChat Room
Photo Album
Web LiveMusic Box

发现一个很棒的书签及订阅Widget

现在书签在博客里非常流行,什么美味书签Digg等等。以前我的博客里也放置了一个书签,是从beautifulbeta那里学到的,这个博客的作者是HANS,是个牛人,制作了非常多的Widget,都非常实用。这个书签的widget就像这样:

但后来我嫌这个太大了,影响博客的打开速度,就把它去了。

今天我访问一个英文网站,发现一个书签非常棒,十分适合放到博客里。我找到了提供这个书签的网站,叫做Add This,它不仅提供书签,还有Feed订阅的widget,使用方法也非常简单。点击网站上的“Get Your Button”,进入配置界面,可以选择书签或Feed,还有各种样式,支持很多博客和网站,设置方法比较简单,就不多说了。点击下面的“Get Your Free Button”,就可以得到代码了。你可以把它放到博客上的任何位置。

由于我的博客的文章下面已经有了一排widget,把书签放到下面不好看,就决定把它放到文章标题的右边,这样看起来效果很不错。我找了半天代码,实验了一气,终于成功了。现在看如何实现吧!

1、比如你得到的是这样的一段代码:
<div><script type="text/javascript">addthis_url='<data:post.url/>';
addthis_title='<data:post.title/>';addthis_pub='bryant0315';</script>
<script src="http://s7.addthis.com/js/addthis_widget.php?v=12" type="text/javascript">
</script></div>

2、在模板里搜索下面的代码:
<b:includable id='post' var='post'>
<div class='post uncustomized-post-template' expr:id='"post-" + data:post.id'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title'>

<b:includable id='post' var='post'>的下面添加你刚才得到的那段代码

但此时你不能控制这个widget的位置,它可能不会按你的意愿放置,所以要加一个ID,用CSS来控制它。只要在<div>里加上id='bookmark',这个名字你可以随便取。修改后的代码就像这样:
<div id='bookmark'><script type='text/javascript'>
addthis_url='<data:post.url/>'; addthis_title='
<data:post.title/>'; addthis_pub='bryant0315';
</script><script src='http://s7.addthis.com/js/addthis_widget.php?v=12'
type='text/javascript'/></div>

3、接着在CSS里添加一段代码来控制书签的位置。
#bookmark{
float:right;
margin:27px 40px 0 0;
}
这个你可以按你的实际情况进行修改。

好,保存模板,看看效果如何,应该还不错吧。要想先试试效果,就在我的博客上点点看。

除了书签,还有Feed,这个我也把它加到侧边栏的订阅里了,它是个综合的订阅widget,点击图标后,会打开一个网页,里面有很多Feed订阅网站,选一个你最常用的就行了。

享受这个美妙的widget吧,有什么错误,欢迎各位批评指正。

0 评论:

相关文章