自己动手增加blogspot的宽度

        一直想增加blogspot的宽度，不过因为需要考虑到需要html以及xml相关知识，故拖到现在才终于肯动手，虽然现在依然不会相关语法知识。偷偷告诉你，自己修改并不难。

        昨天下午半天主要是预备知识，看怎么修改blogspot的html，晚上主要是在各大网站上寻找中意的模版，要是能省事就省点事好了，不过好不容易找到几个满意的，结果发现，模版里面的图片都被删除了，遂作罢，决定自己修改模版，加宽blogspot。

        现行的blogspot大部分为两栏、三栏和四栏，其中三栏的居多，不过个人还是喜欢两栏的简约。修改前要是能先看看下面这张图，整个过程就简单多了：



        我选择的系统模版是老式的，不过代码以及样式差异不大，修改起来并不困难。我们需要做的就是把outer-wrapper、main-wrap1、main和body#layout #outer-wrapper的宽度均增加即可(sidebar觉得很合适，就不改动了)：

/* Page Structure
----------------------------------------------- */
/* The images which help create rounded corners depend on the
following widths and measurements. If you want to change
these measurements, the images will also need to change.
*/
#outer-wrapper {
width:740px;
margin:0 auto;
text-align:$startSide;
font: $bodyFont;
}
#main-wrap1 {
width:485px;
float:$startSide;
background:$mainBgColor url("http://www1.blogblog.com/rounders4/corners_main_bot.gif") no-repeat $startSide bottom;
margin:15px 0 0;
padding:0 0 10px;
color:$mainTextColor;
font-size:97%;
line-height:1.5em;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#main-wrap2 {
float:$startSide;
width:100%;
background:url("http://www1.blogblog.com/rounders4/corners_main_top.gif") no-repeat $startSide top;
padding:10px 0 0;
}
#main {
background:url("http://www.blogblog.com/rounders4/rails_main.gif") repeat-y $startSide;
padding:0;
width:485px;
}
#sidebar-wrap {
width:240px;
float:$endSide;
margin:15px 0 0;
font-size:97%;
line-height:1.5em;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

... ...

body#layout #outer-wrapper {
width: 730px;
}

        关键是上面的几个width，我把这些width(除了sidebar)都增加了200，就是除了sidebar外的其他组件都向左扩展了200px，看起来就舒服多了。不过从html上可以看出，由于使用了背景图片和边角的处理，里面引用的图片和背景都是固定大小的，如果只是更改上面的几个width，那么背景图片会出现不能完全覆盖的情形，所以我把上面那些用到的需要更改的背景图片下载下来自己加宽了长度，然后放到了自己的picasa网络相册上面，最后更改一下html的引用即可。更改的部分代码如下：

/* Page Structure
----------------------------------------------- */
/* The images which help create rounded corners depend on the
following widths and measurements. If you want to change
these measurements, the images will also need to change.
*/
#outer-wrapper {
width:940px;
margin:0 auto;
text-align:$startSide;
font: $bodyFont;
}
#main-wrap1 {
width:685px;
float:$startSide;
background:$mainBgColor url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh307F5XCBNnAJzphJSlYc0yzET5bF98Li5f7mEncb6BmhyjmyagLie8ivBlz9cbeX-COxm81Sv4T4qF6_LPVMNkkFFGUpNF-ddDjYfFJSnDj5mvGgj9PrIPkIZqT0-qyeuiotN1w/") no-repeat $startSide bottom;
margin:15px 0 0;
padding:0 0 10px;
color:$mainTextColor;
font-size:97%;
line-height:1.5em;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#main-wrap2 {
float:$startSide;
width:100%;
background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTZcKWpBhq6B9QM7BTywSXZR6cVs1bw6S9P2NVrYZS3BjrhgJJqzW7RXqU1763V4vZK0c6N3ZJ_CeLhEbmxMZ5SILKrBDP9euMjwWN5WMnKzQ1flzNyFHw-Dn48_ytASg5lPwfSg/") no-repeat $startSide top;
padding:10px 0 0;
}
#main {
background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_aqtNJLecEurkbQer8fxXGBkLwkzJIXH4mHk0IY5lAcGl0xho-d9zfQcGf6ODZ0H0zx3SoLJM7SnH192iGxIyZLJY_NWy51p6HCgSZ-gaEBE3hw_bYg_joGb_MKMP4qfJzJyCWg/") repeat-y $startSide;
padding:0;
width:685px;
}
#sidebar-wrap {
width:240px;
float:$endSide;
margin:15px 0 0;
font-size:97%;
line-height:1.5em;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

... ...

/* Blog Header
----------------------------------------------- */
#header-wrapper {
background: #476 url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjJhRpktlrlPvHKDRPs6H5MCx4NBnYw1bFCdXPLhXOazOWr5wk80Uv-WI9ocOYFeTD_kDjB4tmOz_V0LmNh9S6nWOjd9Q2tYlI52-MPNwDvGNyBu0v5p5KY_dagoH4Lv4LUvj51g/") no-repeat $startSide top;
margin-top:22px;
margin-$endSide:0;
margin-bottom:0;
margin-$startSide:0;
padding-top:8px;
padding-$endSide:0;
padding-bottom:0;
padding-$startSide:0;
color:$titleTextColor;
}
#header {
background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglJoUOAf_I7FtSgGe_c5ASB4tYllsIgngLYVodCSB2VbaBxBthk_yXANylMX0PyY4lpP0jKap1j1L498VExtuQLIDG_rwRt5XXn8BCB7Oe6BqnCcsnnx3AEO5A9o53QLP7TpozmQ/") no-repeat $startSide bottom;
padding:0 15px 8px;
}

... ...

/* Footer
----------------------------------------------- */
#footer-wrap1 {
clear:both;
margin:0 0 10px;
padding:15px 0 0;
}
#footer-wrap2 {
background:#447766 url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjJhRpktlrlPvHKDRPs6H5MCx4NBnYw1bFCdXPLhXOazOWr5wk80Uv-WI9ocOYFeTD_kDjB4tmOz_V0LmNh9S6nWOjd9Q2tYlI52-MPNwDvGNyBu0v5p5KY_dagoH4Lv4LUvj51g/") no-repeat $startSide top; color:$titleTextColor;
}
#footer {
background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0lghOIw8iA0tHWLIror5BJNMsB0KUs9KrkQloRcwabKRXr6vMZevSzlVtI1LItmAGQ_GTku-bINJB2oDMaS57ymfmVS9C9yiZjinZC7IAOGbXMaOZIc4cHWZAvjVFfDpBE2FdwQ/") no-repeat $startSide bottom;
padding:8px 15px;
}

... ...

body#layout #outer-wrapper {
width: 930px;
}

        加宽过后的背景图片在这里：加宽后的背景图片，(需要说明一下的是，在浏览器中查看picasa相册的时候，图片的呈现区域可以往右扩展的，隐藏右边栏的相关区域，如果我们这里的940宽度的图片不扩展开的话，查看的时候将只会是720左右的宽度并成比例缩小，这样在blogspot上引用的时候会是缩小后的，因此如果自己把图片放到picasa的话，最好把图片区域扩展开)。其中header部分包括：
        corners_cap_top.gif， bg_hdr_bot.jpg;
        main部分包括：
        corners_main_bot.gif, corners_main_top.gif, rails_main.gif;
        footer部分包括：
        corners_cap_top.gif， corners_cap_bot.gif;
        修改了相关的4个width和7个background后，基本就大功告成了！

        另外，我们也可以修改blogspot的宽度为自适应，不过因为自适应的时候，宽度是可变的，因此这些固定长度的那些圆滑的边角的美化，就只能直接去掉，也就是这些corners_*.gif背景了。相关说明可以看这里：自己搞定了blogspot页面宽度自适应。

        最后祝各位也能称心如意的更改自己的blogspot!