打造个性CSDN博客之JS篇

虽然CSDN博客提供模版少，但它开放了CSS样式自定义和公告HTML的解析，这里我们利用公告来添加一些CSS和JS代码。方法如下：

一、进入“http://hi.csdn.net/home.html”，点击“我的博客”后的配置按钮。在公告栏处填入你自己的脚本代码，此处以jquery举例。需要特别说明的是。CSDN博客中会引用到“http://blog.csdn.net/js/LoadFeedbackCount.js"这个JS文件，我们打开此文件发现在文件第一行已定义了这样一个函数：

function $(id) {
      return document.getElementById(id);
}

此函数与jquery产生了冲突，因些，在我们的脚本的时候就要将"$"改为jQuery了。下面是我我的BLOG，就当示例代码吧。

如果你还不了解jQuery的话，可以到"http://wiki.jquery.org.cn/doku.php"这里去了解。

 

<link type="text/css" href="http://61.139.77.143:8086/scripts/jquery1.3.1/theme/ui.all.css"
rel="Stylesheet" />   

<link href="http://jquery.com/demo/thickbox/thickbox-code/thickbox.css" type="text/css" rel="stylesheet" media="all" />
        <script type="text/javascript" src="http://61.139.77.143:8086/scripts/jquery1.3.1/jquery-1.3.1.js"></script>
        <script type="text/javascript" src="http://61.139.77.143:8086/scripts/jquery1.3.1/jquery-ui-personalized-1.6rc6.js"></script>
<script type="text/javascript" src="http://61.139.77.143:8086/scripts/jquery1.3.1/thickbox.js"></script>
        <script type="text/javascript">
           
            jQuery(document).ready(function(){
                jQuery(".aboutauthor").css("width","97%");
                /*jQuery(".aboutauthor").each(function(i){
                    jQuery(this).css("padding-left","40px");
                });*/
                jQuery(".aboutauthor>dl>dt").css("text-align","center");
                jQuery("h6").css("padding-left","50px");
                jQuery(".aboutauthor").accordion({ header: "dt" });
                jQuery(".gutter").accordion({ header: "h6" });
              
            });
        </script>

<p><a href="http://jquery.com/demo/thickbox/images/single.jpg" title="add a caption to title attribute / or leave blank" class="thickbox"><img src="http://jquery.com/demo/thickbox/images/single_t.jpg" alt="Image 2"/></a></p>

 

以上代码仅供参考，演示用，当然你可以做得更加炫