Blogger模板推荐
改造双栏blogger的版面為三栏式【Blogger技巧】
目前blogger提供的范本为双栏式,如果想把双栏变三栏,该怎么做呢?
首先要先了解blogger对栏位的定义.新增一个侧边栏,就不会那么困难了.
备分template后,把展开小装置范本打勾.
1.在blogger template中,基本上应有三种widget.在<head> </head>区,应可以看到如, outer-wrapper(整页), main-wrapper(文章区), side-wrapper(侧边栏)这三种.
程式码大致是长这样,如下图.
如果想新增一个侧边栏,可以在这程式码之后,新增一个newsidebar-wrapper.
程式码如下,
#newsidebar-wrapper {
width: 150px;
float: Right;
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 */
}
2. outer-wrapper的width,记得要放大哦!在此例中,可以放大到width: 750px;
3.如果想新增一个侧边栏在最左边,中间是文章,右边是原来的侧边栏.那么就要在这段程式码之前(如下)
<div id='newsidebar-wrapper'>
<b:section class='sidebar' id='newsidebar' preferred='yes'>
<b:widget id='NewProfile' locked='false' title='About Me' type='Profile'/>
</b:section>
</div>
整段程式码就会变成这样.
<div id='newsidebar-wrapper'>
<b:section class='sidebar' id='newsidebar' preferred='yes'>
<b:widget id='NewProfile' locked='false' title='About Me' type='Profile'/>
</b:section>
</div>
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'/>
</div>
所以,想把新增的sidebar放哪个位置,就在这边调顺序吧!
如果希望网页上呈现的顺序,由左到右,依次是sidebar --> newsidebar --> main,就在这步骤,把sidebar-wrapper ,其次放newsidebar-wrapper ,再来是main-wrapper.
