教程 | 把sidebar小工具分开

此教程不支持新模板!!!




看我的blog。小工具那边每一个都分开的。
想不想弄呢?很简单。

1. 先去设计》修改Html ,按 Ctrl+F 找



2. 然后你会看到它下面那边有 .sidebar .widget, .main .widget {

3. 你把它分成2个。

比如:

原本是

.sidebar .widget, .main .widget {
margin:0 0 1.5em;
padding:0 0 1.5em;
}

把它改成


.sidebar .widget  {
margin:0 0 1.5em;
padding:0 0 1.5em;
}

.main .widget {
margin:0 0 1.5em;
padding:0 0 1.5em;
}

然后红色字的就不用管它了。

在蓝色字那边加这个:



如图:


4. 保存模板即可 =)

+++++++++++++++++++++++++++++++++++++

如果要把边框弄圆,可以在.sidebar .widget  { 那边加红字

.sidebar .widget  { 
-moz-border-radius: 10px;
margin:0 0 1.5em;
padding:0 0 1.5em;
}

( IE 和 Google Chrome 用者是看不到边框变圆效果的哦 )
+++++++++++++++++++++++++++++++++++++

115 条评论:

  1. 哈哈,现在才发现你的小工具栏是圆框的,
    我原本也有放,可是IE和Chrome还不能显示这类型的css3,
    所以就拿掉了 ><

    哈哈,
    我之前也收集了一些,
    因为玩Plurk时常用到,
    现在只是用狮子的罢了=P

    回复删除
  2. :最近感觉自己很奇怪 动不动就头痛
    而且头也有时晕晕昏昏的说
    老师写在黑板上的字 就算我坐在第一个也未必能看清楚
    眼睛很累很累 有时还会很痛 看了书头就感觉头很重
    这到底是为什么 谁可以告诉我?

    回复删除
  3. 嗯嗯 我告诉我爸妈了
    谢谢你啊啊啊 ^^

    回复删除
  4. sorry..在这问 ^^"
    请问你是怎么弄
    那个
    “Me|Like my blog|Apple say”

    回复删除
  5. 哇,你那三个按钮要如何弄?

    回复删除
  6. 迟点我会放教程。厚厚厚~

    回复删除
  7. 谢谢你啦(可是我好像用不着= =

    回复删除
  8. 是咯
    我最近才发现到
    和你的一样
    为什么你会这样问呢?

    回复删除
  9. 那个love 真的和你的一样吗?
    在哪?

    回复删除
  10. 我念diploma in computing & IT,
    已经第二年了~

    回复删除
  11. 我想弄圆框的页面啊 ><
    麻烦教我~好想你的“首页”那样的~

    回复删除
  12. 我就是找不到 .sidebar-widget 才問你的啊 T_T
    模板不同的壞處 囧

    回复删除
  13. 哈哈 开学过得还适应吗?

    回复删除
  14. 哈哈,我没把.sidebar .widget, .main .widget {分开,
    可是小工具也能分开 =P

    其实你这个问题也考倒我了,
    我觉得念这科需要时时刻刻update自己,
    因为需要很多技巧但学校没教的 >__<
    degree还可以分很多科出来,我还在烦恼接下来要选那一科呢~

    回复删除
  15. 你可以参考这里 =)
    http://www.ucti.edu.my/degree.htm

    回复删除
  16. 我找不到【/* Sidebar Content】..
    ><

    回复删除
  17. 可能你放的小工具太多了,
    再加上右边那个flash ><"

    回复删除
  18. 為何我找不到 /* Sidebar Content ? :O

    回复删除
  19. 去不到你的blog ><
    会不会是因为你用的是新模板?

    回复删除
  20. 不好意思 >__< 我鎖了 :))
    新模板 ? 那意思就. 我用的是sample的模板.. 有問題的喔? >_<

    回复删除
  21. 什么sample模板?
    如果是新模板就不能弄这个教程~

    回复删除
  22. 那我想問你用什麼模板的 >__<

    回复删除
  23. 我用的是2006年的旧模板——minima

    回复删除
  24. 怎么没有的TT..找不到那个/* Sidebar Content。。
    我的也是2006的啊==

    回复删除
  25. 我找不到.sidebar .widget, .main .widget {
    可以帮我弄吗?

    回复删除
  26. 可以跟你要msn吗?我有点问题~

    回复删除
  27. 我弄不到的 TT 可以帮我吗 ?

    回复删除
  28. 那我要怎么弄啊 ? 有办法吗 ?

    回复删除
  29. 请问,新的blogspot html都没有/* Sidebar Content?怎么弄?

    回复删除
  30. 不好意思哦~我没研究新模板...
    所以你们跟这教程是弄不到的><

    回复删除
  31. 蛤><
    我要弄這個叻~
    因為我的太亂了~

    回复删除
  32. 寬度不適合哦 ]=
    如何放讓它變寬一點點?

    回复删除
  33. 为什么我的找不到
    /* Sidebar Content
    ???

    回复删除
  34. 我找不到/* Sidebar Content
    T^T

    回复删除
  35. 我的找不到
    /* Sidebar Content
    怎么做?

    回复删除
  36. 怎么我找不到 /* Sidebar Content 呢 ><

    回复删除
  37. 请看上面的回答、
    我不想一直回答同样的问题了!

    回复删除
  38. 我找不到/* Sidebar Content

    回复删除
  39. 请看上面的回答、
    我不想一直回答同样的问题了!

    回复删除
  40. 请问边框的角是圆角~怎么弄啊???谢谢

    回复删除
  41. 新模板是弄不到的。
    圆角放这个:
    -moz-border-radius: 10px;

    回复删除
  42. 如果是新模板呢 ?
    新模版要怎样弄哦 ? 你懂得弄新模版的吗 ?

    回复删除
  43. apple 姐~ 我来探望你咯~~ x))


    请教下 要怎样放 sidebar 然后 再把它分开 弄圆框丫?

    拜托 帮帮我~~ /~\

    谢谢~ x))

    回复删除
  44. 怎样把sidebar的格放扩?

    回复删除
  45. kimiko
    抱歉啊,不会

    yamii yumiko
    圆角放这个:
    -moz-border-radius: 10px;

    回复删除
  46. chen chen
    sidebar wrapper那边改

    回复删除
  47. 你再试试看吧~
    可能哪里弄错呢,因为别人都做到:)

    回复删除
  48. 你用新模板吗?
    新模板找不到的

    回复删除
  49. 请问我弄了可是没反应要怎么办。可以帮我弄吗?
    给你密码和电子邮件我寄给你??

    回复删除
  50. 对不起啊,我没有负责帮人弄部落格的。

    回复删除
  51. 它是跟你sidebar的大小的~

    回复删除
  52. 我用的是 舊模板

    可是爲什麽還是找不到 這個



    .sidebar .widget, .main .widget {

    回复删除
  53. 找不到没关系
    你直接从那个红色和蓝色的代码那边开始就可以了~

    回复删除
  54. 我也是找不到
    怎么都没有><
    helppp
    thx =D

    回复删除
  55. 如何把sidebar和blogpost的寬度更換?

    回复删除
  56. Darlie:
    哈哈。好可爱的名字~
    这个教程很多朋友要了,我迟点再发好吗?
    最近有够忙的 ><

    回复删除
  57. 不好意思哦~如果我想恢复之前的不要分开的sidebar怎么弄啊???

    回复删除
  58. 那你把修改的代码换回原本的就好了啊^^

    回复删除
  59. 爲什麽我按 Ctrl+F 找那個字都沒有の??

    回复删除
  60. apple~我没有/* Sidebar Content叻~我改去就模板了吖~

    回复删除
  61. 我找不到叻~我用2006の~可以帮我吗??可以的话尽快回复我,aligatur~

    回复删除

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