今天早上一起床，就很想捣鼓一下blogbus的这个blog。于是逛了逛牛人们blog，望其项背，终于望出了些东西。
首先，我的目标是把日志的侧边栏全部通过自定义HTML来实现。
其次，blogbus为有更高要求和有米的用户提供有偿服务，虽然我也属于有更高要求，但是不属于有米的一类。不过有些牛人的blog使用了模板，但跟模板相比又有很多改进的地方，这种牛人的页面便是我的学习榜样！
最后，blogbus为用户提供了很好的自定义HTML功能，以及很强大的自定义模板的功能。按我目前肤浅的理解，使用很好的HTML自定义功能就能把原有的模板改的很有特色，使用很强大的自定义模板功能就完全可以自己搞套模板出来。
由于blogbus的个人档案很难看，所以就先弄▶INTRO◀。把别人页面的代码拷过来之后，发现所有的文字和图片都向右偏移，看了眼自己的代码，比拷来的那人多了行<div
id="custom">，很显然custom控制着一些格式，可在哪里修改呢？新建一个自定义模板，然后把想要修改的模板加载进去，就能看到很多代码，在css里搜索一下，就能看到custom，代码是这样写的：
#custom {
margin-bottom: 20px;
padding: 0 20px;
overflow: hidden;
}
百度之，得知margin-bottom和padding都是控制边距的，有一张详细的图解释到底是咋控制的，不过我懒得看了，就分别把两个代码分别注释掉，看看效果了。最后发现没有padding，▶INTRO◀和图片的位置就正常了，不过底下的文字会向左偏移……两个解决方案：最先发现的是<pre></pre>代码，在里面加上空格就可以了；后来发现只要把<div
id="modBody">加进来，自动就会缩进了。
弄完第一个，后面很多东西就容易搞定了，谁说万事开头难来着？！▶MURMURING◀、▶TIC-TOC◀、▶RECOMMEND◀和▶SEARCH◀都是通过自定义HTML弄出来的，当然内容都是别的网站搞来的，我只处理了下格式问题。同样，有两种方法：一种是<div
id="custom">结合<pre></pre>，也是我首先想到的；第二种就是<div
id="modTop">用<div
id="modBody">来处理。第二种方法的出现主要是由于豆瓣的那个表无论我如何用<pre></pre>都无法搞定。
这些标签下的内容都是些很有意思的东东！饭否，一个类似twitter的东东，很流行的微博客，可以通过Gtalk、MSN、QQ甚至手机来发布自己的murmurs，而且手机发送通过短息完成，只收取短信的钱。▶TIC-TOC◀中的表来自一个有大量可选的表的网站，品种之多，种类之盛，实属罕见，适宜收藏！后面的豆瓣就在收藏秀里，不过我自己列的东西好像比较空虚……最后，为这个blog去申请了个google的站内搜索和ClustrMaps。
到这里，我的自定就全部完成了，后面都是使用现成的，虽然我很想也通过自己把他们搞定。因为有几处不尽如人意：第一，Tags大小一致，那种有大有小的看起来才炫酷！第二，很想把ClustrMaps放在comments之前，这样好像比较符合逻辑。第三，像跟日志有关的内容好像放在▶RECOMMEND◀这种东西之前更合理，毕竟应该更注重日志本身……之所以没弄成，是因为直接拷贝生成的HTML代码无法实现动态的修改，至于如何实现，俺还不知道，有待高人指点，或者俺哪天情绪高涨再慢慢摸索……
不过无论如何，充实而有趣的内容才是王道！有待于继续努力！！！
对了 email 和 msn 那块的字体调小些吧 :p
已经挤到背景图片的边框外面了
Reply
最开始是因为 #custom 和 .modBody 的两侧都设了 20px 的 padding，而你整个 #sidebar 的 width 是固定的，所以挤的里面的文字图片就显得偏右了。而在 #sidebar 里面，跟 #custom 同级的 #tags .module 都没设 padding，鬼知道当时写 CSS 的家伙想什么呢。
最好还是全部统一套一个 .modBody 的 div 吧，用 pre 标签里面加空格调这个感觉怪怪的。
另外，这代码还是有点诡异
#sidebar 里存放这几块：INTRO, MURMURING, RECOMMEND, SEARCH的 div 似乎嵌套得有问题。它们先被全部放到一个 #custom 里面，然后从 MURMURING 开始的每块被放到 #custom 里面。
与 130 行的 div opening tag 配对的 closing tag 跑到 229 行去了。
我觉得可能是 139 行少了个 </div>，然后 144，149，155 行的 </div> 分别要挪到 148， 154， 161 行，这样每块都属于一个 #custom 。但这么好几个 div 都叫一个 id， 还是别扭，改成 class 好了。
也还有可能是这几个 div 分别赋给一个独特的 id，比如就跟 h2 一样好了，然后它们全部再放到一个 #custom 里面，不过这样每块的 margin-buttom 就得重新再设，也还得再加个 class。
总之 不知为啥他那代码里面为啥多个 div 要给同一个 id，再加上 144 149 155 这三行奇怪的 <div id=\’custom\’></div>
博主 对 小眼8X@基本输入输出 的回复: 2008-02-15 22:35:36
俺好生修改了一番，应该差不多了……
就是像分类、TagCloud这样的东西不知道咋整了，慢慢学习吧@@
路漫漫，其修远，……
Reply
很漂亮嘛 继续努力哈
Reply