玩转博客园的心路总结

注册博客园快两年了，之前偶尔来这里看看一些大牛连载的技术文章或者发些问题求助帖。最近几个月空闲时间多了点，几乎每天都会来博客园看看，时不时写些自己的技术心得与总结。

在自己摸索博客园的过程中越来越觉得博客园的可扩展性还挺强大的。在这里代表所有博主，所有游客，感谢dudu站长一直以来的良苦用心。

我这里的可扩展性强大主要是针对后台的设置功能（添加QQ即时聊天、百度分享、博客流量统计等）。如图

1.自定义样式风格。可以选择博客园自带的风格，也可以自定义风格，看过一些园友自定义的效果很拉风，好生羡慕。由于本人前端水平有限，没有去刻意摆弄这个。

2.公告自定义编辑。这里可以放些关于自己的介绍信息，订阅地址，自己公司或个人的产品或服务地址等等。这里我推荐几个我正在用的功能，感觉挺有用，效果如下。

A.即时QQ消息（如果你像我一样喜欢广交技术朋友这个真心不错）代码如下，需要把红色的两处号码替换成你自己的qq号码：

<a style="padding-right:20px;" href="http://wpa.qq.com/msgrd?v=3&amp;uin=373810510&amp;site=qq&amp;menu=yes" target="_blank"><img style="vertical-align:bottom; border:0px" src="http://wpa.qq.com/pa?p=1:373810510:13" alt="点击这里给我发消息"></a>

 

B.今天看一个园友的博客，看他在公告的时间动画效果不错，就拿来了，如上图所示，代码如下：

<div id="myTime"><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="160" height="70" id="honehoneclock" align="middle"><param name="allowScriptAccess" value="always"><param name="movie" value="http://chabudai.sakura.ne.jp/blogparts/honehoneclock/honehone_clock_wh.swf"><param name="quality" value="high"><param name="bgcolor" value="#ffffff"><param name="wmode" value="transparent"><embed wmode="transparent" src="http://chabudai.sakura.ne.jp/blogparts/honehoneclock/honehone_clock_wh.swf" quality="high" bgcolor="#ffffff" width="160" height="70" name="honehoneclock" align="middle" allowscriptaccess="always" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"></object></div>

 

C.统计博客流量。比方说你是个大牛，对博客园贡献很大，甚至百度一下某个技术的关键词，你老人家就排在首页。对你经营好博客来说，统计无疑很有用。本人才疏学浅，现在加个统计功能只是打打酱油，装装比o(∩_∩)o 哈哈。我用的51.la统计，你可以注册51.la，然后给你博客地址加入统计ID，获取统计代码，放在公告部分即可。有了这个以后，你可以知道最近有多少人来看你博客，看了你的哪篇博客，从哪个网站过来的。

 

3.百度分享按钮。这个为什么单独拿出来介绍，如果用的好，可以让你的博客更有影响力，不仅仅是在博客园的影响力，乃至全网的排名。它具有如下功能：

• 分享数据与搜索引擎深度结合
• 部署多种风格的分享按钮 
• 查看详尽的数据统计分析
  
  代码如下，放在页首Html里面，加上之后每一篇博客页都悬浮着分享按钮：
  
  

  <!-- Baidu Button BEGIN -->
  <script type="text/javascript" id="bdshare_js" data="type=slide&amp;img=0&amp;pos=right&amp;uid=6507240" ></script> <script type="text/javascript" id="bdshell_js"></script> <script type="text/javascript"> document.getElementById("bdshell_js").src = "http://bdimg.share.baidu.com/static/js/shell_v2.js?cdnversion=" + Math.ceil(new Date()/3600000); </script> <!-- Baidu Button END -->

  

   

以上是我目前的一些发现，园子里玩这个比我牛逼的估计多如牛毛，我最大的缺点就是有什么好东西我一般都会拿出来与大家分享。

我最近看到一个园友的文章评论加入了气泡效果，挺拉轰的，我今天研究了下，想拿过来，未果。在这里把地址贴出来，有兴趣一起研究研究：http://www.cnblogs.com/heyuquan/archive/2012/12/31/2840214.html，谁开放教程了，别忘记了艾特（@）我哦。:-)

 

---

可能是人品爆发，被我研究的气泡效果博主 @滴答的雨，无偿把技术传授给我了，具体效果请欣赏下面的评论效果，可以评论下试试:-D，对我们屌丝群体是巨大的福利啊~~~感激之余我把代码贴出来：

通过css定制页面风格：

View Code

 1 /*评论*/
 2 #tbCommentBody{  3 width:500px;  4 }  5 #btn_comment_submit{  6 width: 80px; height: 28px;  7 }  8 .feedbackListSubtitle div{  9 margin:5px 10px 5px 10px; 10 } 11 12 .blog_comment_body fieldset.comment_quote 13 { 14 border-color:#1a8bc8; 15 } 16 /*美化一下评论，增加气泡效果*/ 17 18 .feedbackListSubtitle{ 19 border:0px none; 20 border-bottom-style:none; 21 } 22 .list {width:90%; } 23 .list .out,.list .inc{margin:6px 0;width:90%;} 24 .list .out .icon,.list .inc .icon{width:48px;height:48px;} 25 .list .icontd {width:48px;} 26 .list .out .icontd{display:none;} 27 .list .out .topleft,.list .out .topright,.list .out .bottomleft,.list .out .bottomright,.list .inc .topleft,.list .inc .topright,.list .inc .bottomleft,.list .inc .bottomright{background: url(http://www.cnblogs.com/images/cnblogs_com/heyuquan/406488/t_o_bubbles.png) no-repeat;} 28 .list .out .top,.list .out .bottom,.list .inc .top,.list .inc .bottom{background:transparent url(http://www.cnblogs.com/images/cnblogs_com/heyuquan/406488/t_o_horizontal.png) repeat-x;} 29 .list .out .left,.list .out .right,.list .inc .left,.list .inc .right{background:transparent url(http://www.cnblogs.com/images/cnblogs_com/heyuquan/406488/t_o_vertical.png) repeat-y;} 30 31 .list .out .topleft{background-position:left top;height:9px;width:18px;} 32 .list .out .topright{background-position:-18px top;height:9px;width:11px;} 33 .list .out .bottomleft{background-position:left -9px;width:18px;height:12px;} 34 .list .out .bottomright{background-position:right -9px;width:11px;height:12px;} 35 .list .out .top{background-position:top;font-size:1px;height:9px;} 36 .list .out .bottom{background-position:0 -9px;height:12px;} 37 .list .out .left{background-position:left;width:18px;} 38 .list .out .right{background-position:-18px 0;width:11px;} 39 40 .list .inc .topleft{background-position:0 -21px;height:9px;width:18px;} 41 .list .inc .topright{background-position:-18px -21px;height:9px;width:11px;} 42 .list .inc .bottomleft{background-position:0 bottom;width:18px;height:12px;} 43 .list .inc .bottomright{background-position:right bottom;width:11px;height:12px;} 44 .list .inc .top{background-position:0 -21px;font-size:1px;height:9px;} 45 .list .inc .bottom{background-position:bottom;height:12px;} 46 .list .inc .left{background-position:-29px 0;width:18px;} 47 .list .inc .right{background-position:right;width:11px;} 48 49 .list .inc .conmts{font-size:12px;color:#000;} 50 .list .out .conmts{background:#dcdcdc;/*text-shadow:0 1px 0 #eee;*/} 51 .list .inc .conmts{background:#c0e668;/*text-shadow:0 1px 0 #dfa;*/} 

 页脚Html代码（注：代码里面有个显示头像的图片地址，需要替换成你自己的博客头像地址）

View Code

 1 <!--评论，生成气泡效果标签代码-->
 2 <script type="text/javascript" language="javascript">  3  $(document).ready(function() {  4 var commentTime = setInterval(function(){if($("#comments_pager_bottom").length>0){CommentBubble();clearTimeout(commentTime);}},50);  5  });  6  function CommentBubble()  7  {  8 var w1 = '<div class="list">' +  9 '<table class="out" border="0" cellspacing="0" cellpadding="0"> ' + 10 '<tr>' + 11 '<td class="icontd" align="right" valign="bottom">' + 12 '<img src="http://images.cnblogs.com/cnblogs_com/heyuquan/406488/t_op.png" width="70px" height="57px"/>' + 13 '</td>' + 14 '<td align="left" valign="bottom" class="q">' + 15 '<table border="0" cellpadding="0" cellspacing="0" style=""> ' + 16 '<tr><td class="topleft"></td><td class="top"></td><td class="topright"></td></tr> ' + 17 '<tr><td class="left"></td> <td align="left" class="conmts"><p>'; 18 19 20 var w2 = '</p> </td> <td class="right"></td></tr> ' + 21 '<tr><td class="bottomleft"></td><td class="bottom"></td><td class="bottomright"></td></tr> ' + 22 '</table>' + 23 '</td> ' + 24 '</tr> ' + 25 '</table> ' + 26 '</div>'; 27 28 $.each($(".blog_comment_body"), function(i, t) { 29 $(t).html(w1 + $(t).html() + w2); 30  }); 31 $(".louzhu").closest(".feedbackItem").find(".out").removeClass("out").addClass("inc"); 32 /*.find(".q").attr("align","right");*/ 33  } 34 </script>