看到这个标题,我想童鞋们大概都猜测到了本文的内容了。对,就是侧边栏的。

首先要声明一下:该样式并非奚少原创,原创为liveme(liveme童鞋的主题做的也灰常的给力,而且他的文章也很美,推荐大家去他那里坐坐哦~),我只是抄袭过来,然后自己又PS了两张图片。本来是自己喜欢拿来玩玩的,没想到童鞋们都比较喜欢,那么独乐乐不如众乐乐,本着分享的精神贴出来,喜欢的童鞋也不用麻烦的firebug了。

首先,贴上效果图,万一哪一天我换主题就无图无真相了。不过我相信我还会继续保留的。

为你的博客添加各种订阅

这个订阅并不单单适用于Wordpress,一般的博客都能用的。我这样分成了两部分:邮箱订阅(将更新按时以邮件的形式发送到订阅的邮箱中),阅读器订阅(订阅到热门的在线阅读器中);

邮箱订阅:

这个订阅的方法由万戈锅锅分享,我在这里再简单的说一下:

首先登录http://list.qq.com/,创建一个新栏目 —— 收集订户—— 获取订阅插件 —— 其他博客或网站。这些都是基本操作,都很简单,不多赘述。

然后,我们会看到图片和代码两个选项,我们当然是选择代码。代码提供了类似于如下一串东东:

<!--QQ邮件列表订阅嵌入代码-->
<script >
var nId ="cd0796722c6d47aeed01fc5c1c64d450e342888b42595aa7",nWidth="auto",sColor="light",sText="填写您的邮件地址,订阅我们的精彩内容:" ;;
</script>
<script src="http://list.qq.com/zh_CN/htmledition/js/qf/page/qfcode.js" charset="gb18030"></script>

这里面的红色字体的IDcd0796722c6d47aeed01fc5c1c64d450e342888b42595aa7才是我们需要的,复制下来,其他可以不看。

接下来复制下面代码到你的主题的相关位置(侧边栏),注意:<form>...</form>这些代码才是关键,前边的<ul><h3>等仅供参考使用:

<h3><?php _e('欢迎订阅'); ?></h3>
<ul style="list-style:none; overflow:hidden; padding:10px 8px 5px 10px;">
<form style="height:26px;" method="post" target="_blank" action="http://list.qq.com/cgi-bin/qf_compose_send">
<input type="hidden" value="qf_booked_feedback" name="t" />
<input type="hidden" value="cd0796722c6d47aeed01fc5c1c64d450e342888b42595aa7" name="id" />
<input type="text" onblur="if (this.value == '') {this.value = '请输入您的邮箱';}" onfocus="if (this.value == '请输入您的邮箱') {this.value = '';}" value="请输入您的邮箱" value="" style="border: 1px solid #999999; border-radius: 2px 2px 2px 2px;float: left;font-size: 12px; font-family:'Courier New',Arial; height: 20px;  line-height: 20px; margin-bottom:5px; padding: 3px 3px 0px 3px;width: 65%;" name="to" id="to" />
<input type="submit" style=" margin:0 0 0 10px; border:1px solid #999999;border-radius: 2px 2px 2px 2px; cursor: pointer; font-size: 12px; padding-bottom:4px;font-weight: 700; height: 26px; line-height: 26px;  width: 60px;" value="确认订阅" />
</form>
</ul>

当时调试完成后我比较懒,直接在没有把代码中的CSS分离到style中,请大家按需选择、调整相关样式。如果只调整位置,不外乎margin,padding 的参数值。注意把红色的ID替换成上边得到的ID,还有这个ID值是随机的,可能你刷新一次就会变一个,不要觉得奇怪,任意一次复制的都可以。

阅读器订阅:

阅读器订阅liveme童鞋用了四个,我这里又加了QQ邮箱和有道。至于其他的,如果大家需要可以自己添加。代码如下:

<div id="feed_rss">
<li class="feed_google"><a id="feed_google" href="http://www.google.com/ig/add?feedurl=http://feed.xishao.net/" target="_blank" title="订阅到google"></a></li>
<li class="feed_xianguo"><a id="feed_xianguo" href="http://www.xianguo.com/subscribe.php?url=http://feed.xishao.net/" target="_blank" title="订阅到鲜果"></a></li>
<li class="feed_yahoo"><a id="feed_yahoo" href="http://add.my.yahoo.com/rss?url=http://feed.xishao.net/" target="_blank" title="订阅到雅虎"></a></li>
<li class="feed_zhuaxia"><a id="feed_zhuaxia" href="http://www.zhuaxia.com/add_channel.php?url=http://feed.xishao.net/" target="_blank" title="订阅到抓虾"></a></li>
<li class="feed_youdao"><a id="feed_youdao" href="http://reader.youdao.com/b.do?url=http://feed.xishao.net" target="_blank" title="订阅到有道"></a></li>
<li class="feed_qqmail"><a id="feed_qqmail" href="http://mail.qq.com/cgi-bin/feed?u=http://feed.xishao.net/" target="_blank" title="订阅到QQ邮箱"></a></li>
</div>

将上边代码中的订阅地址http://feed.xishao.net/改成你的订阅地址即可。然后可以放在一个你比较喜欢的位置,比如我放在了邮件订阅代码</form>后边,接下来用CSS美化一下:

#feed_rss a{display:block;width:110px;height:16px;text-indent:-9999em;cursor:pointer;background:url(images/rss.png) no-repeat;}
#feed_rss a#feed_google{background-position:0px 0px;}
#feed_rss .feed_google{list-style:none; overflow:hidden; float:left;line-height:20px;height:16px;margin:5px 0 3px 1px;padding:0px;}
#feed_rss a#feed_xianguo{background-position: 0px -19px;}
#feed_rss .feed_xianguo{list-style:none; overflow:hidden; float:right;line-height:20px;height:16px;margin:5px 1px 3px 0;padding:0px;}
#feed_rss a#feed_yahoo{background-position: 0px -39px;}
#feed_rss .feed_yahoo{list-style:none; overflow:hidden; float:left;line-height:20px;height:16px;margin:5px 0 3px 1px;padding:0px;}
#feed_rss a#feed_zhuaxia{background-position:0px -59px;}
#feed_rss .feed_zhuaxia{list-style:none; overflow:hidden; float:right;line-height:20px;height:16px;margin:5px 1px 3px 0;padding:0px;}
#feed_rss a#feed_youdao{background-position:0px -79px;}
#feed_rss .feed_youdao{list-style:none; overflow:hidden; float:right;line-height:20px;height:16px;margin:5px 1px 3px 0;padding:0px;}
#feed_rss a#feed_qqmail{background-position: 0px -99px;}
#feed_rss .feed_qqmail{list-style:none; overflow:hidden; float:left;line-height:20px;height:16px;margin:5px 0 3px 1px;padding:0px;}

以上CSS都是我自己写的,可能会存在一些不严谨的地方,不足之处希望各位高手指导。

还有就是背景图片,你可以自己保存我的图片,或者点击这里下载。

接下来就是等待朋友们来尽情的订阅你的博客了,同时也欢迎没有订阅奚少小窝的童鞋们订阅哦~http://feed.xishao.net/。写到这里订阅部分也就完成了,不过很多朋友对我的那个漂浮比较有兴趣,其实一段JQuery就可以了,将下边的JQuery扔到你的js文件中,将红色的piaofu改成对应的div的id即可:

$(function() {
var $sidebar = $("#piaofu"),
$window = $(window),
offset = $sidebar.offset(),
topPadding = 15;
$window.scroll(function() {
if ($window.scrollTop() > offset.top) {
$sidebar.stop().animate({
marginTop: $window.scrollTop() - offset.top + topPadding
});
} else {
$sidebar.stop().animate({
marginTop: 0
});
}
});
});

即将进入暑假了,愿能享受暑假的朋友们暑假玩的开心。当然,我就不能享受了,o(︶︿︶)o 唉...

76,504
更新日期: 2011-06-26
文章标签: ,
文章链接: http://www.xishao.net/wp/671.html
站方声明: 除特别标注, 本站所有文章均为原创, 互联分享, 尊重版权, 转载请注明.