home
★
about
★
tutorials
★
freebies
★
html
★
一月062012

教程 | 调整帖子和小工具栏空间的宽度




很多刚换成旧模板的朋友一直问我，到底怎样把帖子和小工具栏的空间调宽。
因为原本模板设定的宽度很窄。

 [旧模板]

1. 去设计》修改HTML， 找
/* Outer-Wrapper
2. 它下面会有 #outer-wrapper { ， #main-wrapper { 和 #sidebar-wrapper { 三段代码。

3. 先看 #outer-wrapper { 的代码， 它下面会有 width: 多少px  的。
    把它改成  width: 70%;    
    (巴仙率越大，部落格旁边白色的地方就越少)

4. 把 #main-wrapper { 下面的 width 改成 width: 62%; 
    (巴仙率越大，帖子空间的宽度越大，不过 太大的话小工具栏会掉去下面喔~)

5. 再把 #sidebar-wrapper { 下面的width 改成 width: 30%;
    (巴仙率越小，小工具栏的空间越窄，不过最宽只能30%罢了，不然小工具栏会掉去下面)

大家可以先 预览 先再保存以避免发生任何差错。 :)

[新模板]

新模板的简单得多~这就是模板设计器的好处 :D

1. 去模板》按橙色按钮 自定义，调整宽度。

根据自己的喜好来调整就行了，下面可以浏览效果。



现在部落格是不是好看多了?
(^________^#)
#Tag：

22 条评论:

  1. Sica2012年1月6日 15:07

    谢谢哦，很有帮助 =）

    回复删除
  2. Unknown2012年1月7日 00:23

    謝謝你哦！！
    啊哈哈 這篇正好幫到我 =)

    回复删除
  3. じ☆ve AppLe2012年1月7日 12:54

    不用客气 :D

    回复删除
  4. xiinee here .2012年1月7日 13:33

    如何把小工具的背景换成白色 ? ;)

    回复删除
  5. Y'c2012年1月8日 19:46

    为什么你下面是这个的
    Copyright © 2011 yes-apple.blogspot.com. All Rights Reserved.
    Template designed by Love AppLe
    有些人没有的？

    回复删除
  6. 嗄-髦（xiaolveen）2012年1月8日 22:52

    请问怎样弄大小工具的标题嗄？><
    旧模板的

    回复删除
  7. 匿名2012年1月14日 20:21

    我跟着你做，看到我的宽度号码比你的大很多。
    我先预览，结果整个帖子和小工具栏挤在一起，变成一条直线了哈哈~~~

    回复删除
  8. 匿名2012年1月14日 20:22

    苹果，快快发怎样在连接后面有背景颜色+评论区的留言背景效果怎样弄~~我求你啦!!

    回复删除
  9. 匿名2012年1月14日 20:22

    按了Nuffang。:)

    回复删除
  10. Unknown2012年1月16日 09:15

    不好意思哦 想请问你 可以不可以换背景的照片啊？

    回复删除
  11. 匿名2012年1月16日 15:03

    请问下你sidebar有facebook,twitter和微博的怎样做的？？

    回复删除
  12. Joey2012年1月19日 17:50

    在你这里拿了很多东西～
    谢谢～

    回复删除
  13. Missy Lee2012年1月22日 00:13

    我找不到/* Outer-Wrapper叻 D:

    请问除了这个方法还有其他的吗? :(

    回复删除
  14. 简2012年1月25日 16:15

    谢谢，这个我找很久了！感激不尽！>.<
    对了，想问下，为什么我的Scorll Bar不能控制了呢？是不是被我不小心删掉什么代码了？@@

    回复删除
  15. じ☆ve AppLe2012年1月26日 21:14

    xiinee
    你部落格背景什么色？

    回复删除
  16. じ☆ve AppLe2012年1月26日 22:01

    Y'C
    哈哈~自己加的啊~

    xiaolveen
    去模板设计器也可以弄啊...

    Kuro兔
    谢谢~然后现在怎样了？
    我会尽快发的~

    zhutou
    当然可以啦~~^^

    匿名
    我得空发教程 :)

    Jimo
    你是不是用新模板？

    心琴
    给我你的部落格看看~

    回复删除
  17. Y'c2012年1月30日 18:41

    怎样加chatbox表情符号?

    回复删除
  18. ♥Amanda♥2012年2月2日 22:10

    我找不到/* Outer-Wrapper D:

    请问除了这个方法还有其他的吗? :/

    回复删除
  19. 匿名2012年5月1日 17:43

    OK了!!
    不过我的数目是要加大，弄小数目会更窄~

    回复删除
  20. 匿名2012年5月1日 17:44

    哦!又不能了TT
    怎么预览时可以，保存过后部落格还是这么窄？？

    回复删除
  21. 匿名2012年5月1日 17:45

    哦!!有了有了!!
    问题OK了!!解决了!!
    Pai Se打扰了:P

    回复删除
  22. 玉芬♥2012年9月1日 10:38

    我为什么找不到/* Outer-Wrapper这个字><

    回复删除

你的留言将在审核后发布。谢谢 ♥

订阅： 博文评论 (Atom)
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*