扩展Blogger版面宽度的方法
在剛建立好Blogger時，會發現顯示頁面不夠寬，預設顯示頁面只有660的寬度而已(根據所選原始模版不同，各別可能的預設值也會不同)。如果想要加寬頁面顯示寬度的話，就得動手改一改了。
按下Blogger的『版面配置』頁籤
再按下其下的『修改HTML』頁籤
若對HTML語言及CSS語法沒有把握，可以按下『下載完整模版』，先將現有模版儲存在自己電腦中，以便將來處理錯誤要復原時使用。
要復原模版，可以在『從硬碟的檔案裡上載模版』右方文字格中輸入自己電腦中的完整模版儲存路徑，或按右方『瀏覽…』鈕進入挑選。最後，再按『上載』鈕即可。
『展開小裝置範本』 核取盒，現在用不著，故，可以暫不理它。
在下方HTML碼中，找到下面段落，並將紅色字處改掉(以下內容，可能會因原始所選模版不同，而有所差異，找到大致類似位置修改之即可)。
下面者，原預設是660，視所需顯示頁面大小將之更改：（当前版本已不存在这一宽度定义）
/* Header
———————————————–
*/
#header-wrapper {
width:1000px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
下面者，預設為700，此處可不改。：（当前版本已不存在这一宽度定义）
#header .description {
margin:0 5px 5px;
padding:0 20px 15px;
max-width:1040px;
text-transform:uppercase;
letter-spacing:.2em;
line-height: 1.4em;
font: $descriptionfont;
color: $descriptioncolor;
}
下面者，預設為660。
/* Outer-Wrapper
———————————————– */
#outer-wrapper {
width: 1000px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}
下面為文章內容的寬度設定，預設為410。
#main-wrapper {
width: 750px;
float: $startSide;
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 */
}
當然，你也可以改Sidebar的寬度，預設為220。我沒改，要改的話，要注意與上方main-wrapper者之加總，不可超過Outer-Wrapper之寬度設定。
#sidebar-wrapper {
width: 220px;
float: $endSide;
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』連結，即可發現顯示頁面加寬了。
Related posts:
- 扩展Blogger版面宽度的方法 擴展Blogger版面寬度－－转载自kevin1566.blogspot.com在剛建立好Blogger時，會發現顯示頁面不夠寬，預設顯示頁面只有660的寬度而已(根據所選原始模版不同，各別可能的預設值也會不同)。如果想要加寬頁面顯示寬度的話，就得動手改一改了。按下Blogger的『版面配置』頁籤再按下其下的『修改HTML』頁籤若對HTML語言及CSS語法沒有把握，可以按下『下載完整模版』，先將現有模版儲存在自己電腦中，以便將來處理錯誤要復原時使用。要復原模版，可以在『從硬碟的檔案裡上載模版』右方文字格中輸入自己電腦中的完整模版儲存路徑，或按右方『瀏覽…』鈕進入挑選。最後，再按『上載』鈕即可。『展開小裝置範本』 核取盒，現在用不著，故，可以暫不理它。在下方HTML碼中，找到下面段落，並將紅色字處改掉(以下內容，可能會因原始所選模版不同，而有所差異，找到大致類似位置修改之即可)。下面者，原預設是660，視所需顯示頁面大小將之更改：（当前版本已不存在这一宽度定义） /* Header———————————————–*/ #header-wrapper { width:1000px; margin:0 auto 10px;...
- 删除默认的Blogspot顶部导航条的方法 关于此问题，我搜索了很久，发现有以下几种解决办法：1、编辑模版，将下面代码放到＆lt;style type=”text/css”＆gt;后面即可。#b-navbar { height:0px; visibility:hidden; display:none}但我进入模板里找了半天，竟然未找到＆lt;style type=”text/css”＆gt;这部分代码，看来这一方案只有放弃了。 2、在”布局”中“页面元素”那里加入一个”HTML/JavaScript” Element，写入代码 ＆lt;style＆gt;#navbar-iframe...
- 在blogger文章中显示源代码 在html模式下,将所有的替换成＆gt;(注意&是半角符号),然后再发表，用这种方法不仅可以在 Blogger里正常输出文件，而且COPY后不用再去替换全角，很是方便。如果要像本BLOG那样显示代码,可以在CSS样式表中加入下面代码。模版 html(head之前)CODE {display: block; /* fixes a strange ie...
- 5G/10G/PHP/CGI/MYSQL/Domain/NoAD/FTP/免费空间 描述：免费主机计划图片：描述：简单确认图片： 描述：订单确认图片： 图文教程，美国高速经典空间，发扬网络共享精神，分享给需要的人！ 空间管理面板图片：注册地址：http://hdesk.us/cart.php需要提醒：必须先注册网站帐号，最后一个步骤为用户验证，可选电话或者短信验证 ...
- google site使用教程 google site使用教程 如果你不知道使用是google site,那先看一下我使用google site临时做的一个班级小站，用于班级交换文件与平时的沟通。点击时入。 如果文章不能正常浏览，请访问：sites.google.com/a/qiexing.com/bestlife/Home/faq 以前也介绍过： [利用google site建立个人主页] [google...
以上关联文章由 Yet Another Related Posts Plugin 提供支持。
