关于博客栏目的自定义

今天看到别人CSDN博客空间里有自定义博客栏，还不错，又涉及到一点web 网页的代码知识，学着自己也DIY。
例：csdn进入博客栏目自定义：

 

进行代码编辑：

 我的“更好了解我”自定义栏目代码：

<UL class=panel_head><SPAN>更好的了解我</SPAN></UL>
<UL class=panel_body sizcache="0" sizset="34">
<DIV style="TEXT-ALIGN: center; FONT-SIZE: 15px" sizcache="0" sizset="34">
<HR>
<A href="http://weibo.com/zhangzewancheng">
<IMG title=我的新浪微博 src="http://img.my.csdn.net/uploads/201208/27/1346035342_1200.png"></A> 
<HR>
<A href="http://zhangzewangcheng.blog.163.com/">
<IMG title=我的网易 src="http://hi.csdn.net/attachment/201201/2/2924112_1325493956aa18.jpg"></A> 
<HR>
<A href="http://sighttp.qq.com/authd?IDKEY=3b58c3cc08ca4ea4f47c2a292e6f08516617941c45645114" target=_blank>
<IMG title=QQ联系我 border=0 alt=QQ联系我 src="http://hi.csdn.net/attachment/201201/2/2924112_13254907541jin.jpg"></A> 
<HR>
<A style="TEXT-DECORATION: none" href="http://hi.baidu.com/new/zhang_ze1">
<IMG src="http://img.my.csdn.net/uploads/201208/27/1346035914_8378.png"></A> 
<HR>
<A style="TEXT-DECORATION: none" href="http://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&[email protected]" target=_blank>
<IMG src="http://hi.csdn.net/attachment/201201/29/2924112_1327796963CFIl.gif"></A>
 </DIV></UL>
<DIV></DIV>

“论坛和技术网站”自定义栏目代码：

<div id="c_996126" class="panel">
    <ul class="panel_head"><span>论坛和技术网站</span></ul>
    <ul class="panel_body">
	<ul><li><a href="http://tech.ccidnet.com/zt/fuzhi/" target=_blank>赛迪网IT技术</a></li><li><a href="http://wiki.mbalib.com/wiki/Portal:%E6%B3%95%E5%BE%8B" target=_blank>全球最大的中文经管百科</a></li><li><a href="http://se.csai.cn/" target=_blank>csai</a></li><li><a href="http://cn.bing.com/search?q=vs.net+%E7%9A%84row%E6%9C%BA%E5%88%B6&form=QBRE&filt=all" target=_blank>Microsoft bing</a></li><li><a href="http://learning.artech.cn/" target=_blank>CSS学习</a></li><li><a href="http://www.itcast.net/" target=_blank>Jquery学习</a></li><li><a href="http://www.tg029.com/" target=_blank>众志教程网</a> (<a href="http://www.tg029.com/rss.php?auth=0" target=_blank>RSS</a>)</li><li><a href="http://www.w3cn.org/article/step/2004/26.html" target=_blank>网页设计</a></li><li><a href="http://www.zhinangtuan.net.cn/" target=_blank>智囊团</a></li><li><a href="http://www.chinacloud.cn/" target=_blank>中国云计算</a></li><li><a href="http://www.codeproject.com/KB/webforms/Horizontal-Menu-Control.aspx" target=_blank>code project </a></li><li><a href="http://forum.codecall.net/" target=_blank>codecall</a></li><li><a href="http://www.youngcoders.com/" target=_blank>YOUNG CODERS _programming forum</a></li><li><a href="http://www.programmingforums.org/" target=_blank>programmingforums.org</a></li><li><a href="http://www.daniweb.com/" target=_blank>DANIWEB</a></li><li><a href="http://it.toolbox.com/home/" target=_blank>toolbox </a></li><li><a href="http://msdn.microsoft.com/zh-cn/netframework/default.aspx" target=_blank>dot net framework</a></li><li><a href="http://www.eclipse.org/" target=_blank>eclipse</a></li><li><a href="http://www.sdn.sap.com/irj/scn/index?language=en" target=_blank>SAP(CrystalReport)</a></li><li><a href="http://www.javaeye.com/" target=_blank>java eye</a></li><li><a href="http://jcp.org/en/press/news" target=_blank>java community process</a></li></ul>
    </ul>
</div>

“资源/教程/组织”自定义栏目代码：

<div id="custom_column_996136" class="panel">
    <ul class="panel_head"><span>资源/教程/组织</span></ul>
    <ul class="panel_body">
        <ul><li><a href="http://download.chinaitlab.com/index.htm" target=_blank>电子书，视频下载频道——中国IT实验室</a></li><li><a href="http://www.cnshu.cn/glxxh/58500.html" target=_blank>精品资料网</a></li><li><a href="http://www.xhsmb.com/html/Article/" target=_blank>新华书目报</a></li><li><a href="http://iask.sina.com.cn/" target=_blank>爱问知识人，资料共享</a></li><li><a href="http://www.uml.org.cn/index.asp" target=_blank>UMl</a></li><li><a href=" http://www.865171.cn/" target=_blank>模板网站</a></li><li><a href="http://bbs.langsin.com/" target=_blank>浪曦视频在线</a></li><li><a href="http://www.microsoft.com/china/msdn/events/webcasts/shared/webcast/Series.aspx" target=_blank>msdn webCast</a></li><li><a href="http://technet.microsoft.com/zh-cn/default.aspx" target=_blank>microsoft techNet</a></li><li><a href="http://www.w3school.com.cn" target=_blank>.w3school</a></li><li><a href="http://www.51zxw.net/" target=_blank>我要自学网</a></li><li><a href="http://www.fengfly.com/plus/view-192976-1.html" target=_blank>雨枫教程资源网</a></li><li><a href="http://www.vim.org/download.php" target=_blank>vim文本编辑器</a></li><li><a href="http://www.gnu.org/software/emacs/" target=_blank>gnu</a></li><li><a href="http://research.google.com/pubs/papers.html" target=_blank>google publications</a></li><li><a href="http://www.manning.com/" target=_blank>manning publications co</a></li></ul>

PS:
csdn不允许外站的图片，需要自己搜索logo图片，然后上传到自己的csdn相册里。

参考：

QQ在线状态：http://wp.qq.com/index.html

问题 ：
1、logo图片的大小把握、设置。
2、复杂的应用
eg:新浪秀（webo动态关注块）的代码编辑，参考网易等博客自定义栏目块代码；看别人的行，我的还没搞定

 <div id="custom_column_996139" class="panel">
    <ul class="panel_head"><span>新浪微博</span></ul>
    <ul class="panel_body">
       <iframe width="100%" height="550" class="share_self"  frameborder="0" scrolling="no" src="http://widget.weibo.com/weiboshow/index.php?language=&width=0&height=550&fansRow=2&ptype=1&speed=0&skin=1&isTitle=1&noborder=1&isWeibo=1&isFans=1&uid=1966788330&verifier=5097aa8e&dpc=1"></iframe>
    </ul>
</div>

3、为这个应用，查看了很多网页源代码遇到的问题：(查看遨游浏览器的“审查元素”功能)
logo元素在哪？style设置？QQ的idkey是什么东东？
嗯，多看看源代码找灵感……