Posts filed under 'blogger模版'
Blogger: 怎样实现三栏的Blogger 模板
11月30日在8个圈圈的Blogger上做了一个有关三栏模板和两栏模板的民意测验，结果如上。看来喜欢三栏模板的还是多数，那就介绍一下怎样实现三栏的blogger模板。
基础知识：
beta的模版编辑分为layout和html两种。
在layout中模板分成：标题、博客文章、侧边栏、页脚4个部分。
同样在html中对应有
<body>
<div id=’outer-wrapper’>…外层
<div id=’header-wrapper’>…标题
<div id=’content-wrapper’>…内容
<div id=’main-wrapper’>…帖子
<div id=’sidebar-wrapper’>…侧边栏
<div id=’footer-wrapper’>…页脚
</body>
这些模块对应的CSS样式信息为
#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
……
#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}
#main-wrapper {
width: 410px;
float: left;
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-wrapper {
width: 220px;
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 */
}
……
因为o们要做的就是在原有模板的基础上增加一个侧边栏，因此不需要太在意footer-wrapper。差不多可以开始了：
养成好习惯，给模板动手术前要记得备份！！！
1. 复制以下代码：
<div id=’sidebar-wrapper’>
<b:section class=’sidebar’ id=’sidebar’ preferred=’yes’/>
……
</div>
将其粘贴到<div id=’main-wrapper’>…前；
2. 删除其中的……部分，并将作如下修改：
<div id=’l-sidebar-wrapper’>
<b:section class=’sidebar’ id=’l-sidebar’ preferred=’yes’/>
</div>
3. 如果觉得有必要，可以将原来的
<div id=’sidebar-wrapper’>
<b:section class=’sidebar’ id=’sidebar’ preferred=’yes’/>
……
</div>
改为
<div id=’r-sidebar-wrapper’>
<b:section class=’sidebar’ id=’r-sidebar’ preferred=’yes’/>
……
</div>
4. 回到CSS部分，将
#sidebar-wrapper {
width: 220px;
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 */
}
改为
#l-sidebar-wrapper {
width: 220px;
float: left;
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 */
}
#r-sidebar-wrapper {
width: 220px;
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 */
}
5. 最后一步啦，因为增加了一个侧边栏，需要将原来的out-wrapper的长度从660px改为880px。
保存，看看结果还满意吗？
Power by WOW派™
Add comment 六月 25, 2007
blogger:哈利波特的博客模板
非常漂亮的模板，感谢作者blogger-templates
本模板最关键的地方在于运用了黑色透明的png图片。所以只有在火狐和IE7浏览器里才能看到最好的效果。而在IE6里因为不支持透明的png图片，所以浏览效果要差不少。
安装方法，点击打开此链接复制全部代码到你的html模板里即可。
或者下载我修改的xml模板直接上传即可。
Power by WOW派™
Add comment 六月 25, 2007
TOP1:十个不容错过的Blogger模版
Blogger恐怕是目前中国博客轻量级小虾们的主要选择，去年blogger反反复复折腾了几次，几乎是国人博主们失去了信心，但是终究blogger还是回来，目前是稳定的，我们也祈祷它能够永久稳定，不要再次被封被杀。一年前我是一直用blogger的，因此直到现在我还是对blogger的相关资讯很关注，很多博主苦于找不到合适的模版，我根据我以往的经验和收集的最新第一手资料，总结了以下十大blogger不能不看的精品模版。如果大家有更多更好的补充，请大家在评论中提出给大家分享。
A two hours work gave the following Ten incredible Fantastic Blogger Templates. I cannot expect more just enjoy your blogging. If you have any cool template which is not included in this post please reply and let me know. Thanks.
Continue Reading Add comment 六月 25, 2007
再次更新：推荐29个漂亮的 Blogger模板提供下载！
Google Blogger 的大名我就不多说了。本来挺不错的，可惜隔三差五被 GFWed 。
WordPress 主题就满街都是啦，想要找个好看点的，免费的 Blogger 模板就难了。下面这些漂亮至极的模板来自 hongkiat.com 的辛苦收集。有一些是从 WordPress 主题修改过来的。
- andreaas02 [ download ]
- emire [ download ]
- k2 [ download ]
- kubrick [ download ]
- minimalist [ download ]
- onecolumn [ download ]
- k2 ( Single column )[ Download ]
- Firefox [ Download ]
- Forest Green [ Download ]
- Ambiru [ Download ]
- Binary Bonsai [ Download ]
- Green Bubbles [ Download ]
- Coffee n Cream [ download ]
- Free Indigo [ download ]
- Transparentia [ download ]
- Beautiful Day [ download ]
- The Hobbit [ Download ]
- Top Secret [ Download ]
- Foliage [ Download ]
- & nbsp; Rounded v2 [ Download ] [ More Rounded v2 for WordPress ]
- Artica [ Download ]
- Green Lush [ Download ]
- NewZen [ Download ]
- Kiss [ Download ]
- Red Christmas [ Download ]
- Skiing [ Download ]
- Snow Time [ Download ]
- Snow Time [ Download ]
- A Rose A Love [ Download ]
Power by WOW派™
Add comment 六月 25, 2007
Blogger模板下载资源共享
大家知道，Blogger的模板是非常少的，而且还简陋难看，显然不能满足大家的要求。我就不是很喜欢现在使用的这个模板，虽然这个在少数Blogger可选的模板中是看起来舒服点，但是还是有很多的不足。 前几天有一个网友lao6在水木上给我发了站内消息，说我的这个模板看起来太窄了，正说到我的心坎上，我也不喜欢这么狭小的风格，浪费的空间多，显示的内容少，看个什么还得疯狂滚动滑轮，严重加速了鼠标的损坏和手腕的损伤和眼镜的疲劳。
于是想着改一改，琢磨了很久，尝试了很多方法，还是不能找到一个合意的模板。也尝试着自己改模板的Html代码，但是改来改去之后还是不满意，本来就是个很懒的人，最后还是放弃了。心想：凑合着用吧，也许读者在乎的是内容呢(yy一下哈)，阿Q一下也不错。
但是花了不少时间也是没有百花，虽然没有换成模板，但是也发现了很多模板不错的站点，同时也基本熟悉了Blogger模板的代码布局方式。如果您对Blogger的模板感兴趣，并且想花一点时间进行改善，你不妨可以看看以下的内容：
如果您还使用Blogger旧版本的模板， 那网上的资源会比较多，也有朋友在收集了许多不错的资源，比如分享几个下载blogspot/blogger模板的网站，通过这里还可以找到更多其他的模板资源。
如果您使用的是Blogger Beta的模板(现已把Beta去掉)，网上的资源稍微少一些但是也有不少hacker在贡献着，Gecko & Fly做了几个清新的模板，其中还有一个是我比较喜欢的3列内容的模板。在8个圈圈的Blogger上也有不少模板下载和模板分析和hack的介绍。色彩斑斓上也有很多blogger模板的下载和模板讲解。
如果您还不满足，想进一步地对blogger模板进行hacking，我想你大概会喜欢看看Blogger Beta hack。
如果你把模板弄得很满意，别忘了回来和我交流和分享一下，我也很想换个更好看实用的模板。;)
Power by WOW派™
Add comment 六月 25, 2007
blogger 3.0:新的三款blogger beta模板（基于Minima系列原始模板）
作者说了，他觉得最基本的模板比较干净，好用。所以他就做了三个基于此模板的三个模板。
感谢作者protesto，英文文章参看这里。
你能选着5种颜色，首先在这里下载压缩的xml文档：右键点击这里另存到你磁盘。解压缩，然后选择一个xml文件上传到你的测试博客看看效果是否使用吧。
点击这里预览作者的一个黑色测试博客的样子。
作者增加了以下hack：
1. 更改了模板的格式，变成三栏
2. 增加了使用google翻译来翻译你的文章的hack
3. 用 Socializer提供了一键社会书签hack.
4. 提供了展开收缩文章的hack，更多这个hack的信息看咖啡鱼博客这里。
5.标题形式显示所有文章的hack，详情请看这里
6.显示单页文章所在位置导航，详情请看这里
7. 让你的标签页也有RSS，具体参考这里。
8. 使你博客链接在新窗口打开
9. 隐藏博客的 Blogger Navbar
10. 增加了Technorati Link计数功能
11. 为博客增加了图标，即翻博客老帖子新帖子的按钮示意图标
Add comment 十二月 13, 2006
