当前不在线

【模版分享】Polaroid - On The Road

本主题由隐藏人物创建于 2009-3-13 19:00:16

DEMO：http://1d1c.blogbus.com/

注意：使用这款模板的朋友，希望能留言贴上你的blog网址。

如果同时提出你的意见建议，在下不胜感激。

一款窄屏的单栏模版，利用一些ajax特效。

宝丽来主题。粉色系。

适合短小文字。比如散文诗，或生活随笔。

可是因为blogbus模版自定义方式的一些限制，让这个设计存在一点可用性方面地bug。

比如点击tags的“more”链接，出来的页面（如：http://1d1c.blogbus.com/tags/）出现的还是首页，这个时候就得点击以下链接：

或者点页首的第二个标签。（默认为“街道”）

这样就能看到正确的内容。

这是单篇日志页面：

以下是代码

head:

css：

/*
Style: Polaroid - On The Road
Style No: 1
Version: 1.0a, 20020313
Author: Quasimo
Author eMail: linuximo@gmail.com
*/

* {
margin: 0;
padding: 0;
}
body {
padding: 0;
font-family: "Trebuchet MS", Arial, Verdana, sans-serif;
font-size: 75%;
text-align: left;
color: #5A5A5A;
background: #fff url(http://dl.getdropbox.com/u/226571/webdesign/rwb2.png) center bottom repeat-y fixed;
}
li {
list-style: none;
}
a {
text-decoration: none;
color: #3ecdff;
}
a:hover {
text-decoration: none;
color: #5A5A5A;
}
img {
border: none;
}
input {
padding: 1px;
font-family: "Trebuchet MS", Arial, Verdana, sans-serif;
font-size: 100%;
color: #5A5A5A;
border: 1px solid #D9D9D9;
background: none;
}
textarea {
padding: 2px 3px;
font-family: "Trebuchet MS", Arial, Verdana, sans-serif;
font-size: 100%;
color: #5A5A5A;
border: 1px solid #D9D9D9;
background: none;
overflow: auto;
}
.button {
width: 48px;
height: 22px;
padding: 0 0 2px 7px;
*padding: 3px 0 2px 3px;
font-size: 100%;
font-weight: bold;
letter-spacing: 0.5em;
text-align: center;
color: #5A5A5A;
border: 1px solid #D9D9D9;
border-right: 1px solid #BBB;
border-bottom: 1px solid #BBB;
background: #C9D3BD;
cursor: pointer;
}
.time {
font-size: 90%;
}
.clear {
clear: both;
}
/*#index {
width: 100%;
background: url(http://public.blogbus.com/blogbus/skin/5149/bg_l.jpg) left top no-repeat fixed;
} quasimo delete */
#detail {
width: 100%;
background: url(http://public.blogbus.com/blogbus/skin/5149/bg_l.jpg) left top no-repeat fixed;
}
#container {
width: 500px;
padding: 35px 0;
margin: 0 auto;
background: white;
}
/*#containerTop {
width: 600px;
padding: 4px 5px 0;
background: url(http://public.blogbus.com/blogbus/skin/5149/containerTop.png) center top no-repeat;
} quasimo delete */
#header {
width: 370px;
padding: 30px 35px;
text-align: center;
background: url(http://lh6.ggpht.com/_Qqajn3ngk3U/SaOVlwsjZMI/AAAAAAAAAo0/xKpClNUXlwk/s800/the-road.jpg) center top no-repeat;
height:400px;
margin: auto;
}
.blogName {
font-size: 20px;
line-height: 150%;
color: #C0C3BA;
margin-top: 320px;
margin-left: 24px;
text-align: left;
}
.blogName a {
text-decoration: none;
color: #333;
}
.blogName a:hover {
color: #000;
}

.bloggerName {
font-size: 14px;
line-height: 150%;
margin-top: 0;
margin-right: 24px;
text-align: right;
}
.bloggerName a {
text-decoration: none;
color: #444;
}
.bloggerName a:hover {
color: #000;
}

.description {
margin-left: 0;
display: block;
font-size: 14px;
color: #999;
}

#posts {
padding-top: 24px;
letter-spacing: 0.03em;
}

#posts li {
margin-bottom: 25px;
}
.postHeader {
}
.postHeader h2 {
font-size: 16px;
font-weight: bold;
font-family: "Microsoft Yahei", "Trebuchet MS", Verdana;
text-decoration: none;
text-align: left;
line-height: 140%;
overflow: hidden;
}

.postHeader h2 .date {
margin-right: 10px;
font-family: "Trebuchet MS", Arial, Verdana, sans-serif;
font-size: 12px;
font-weight: bold;
text-align: left;
color: #ff007f;
background: url(http://lh6.ggpht.com/_Qqajn3ngk3U/SbtU5ShJriI/AAAAAAAAA5Y/mYe-hoLgJq0/s800/dateback.png) no-repeat top left;
padding: 5px 8px;
}
.postHeader .category {
display: none;
}
.postBody {
margin: 20px 5px 0;
line-height: 175%;
}
.postBody p {
margin: 0 auto 18px;
}
.postBody table {
margin: 0 auto;
}
.postBody table a:hover {
border: none;
}
.postFooter {
padding-bottom: 2px;
line-height: 160%;
color: #333;
background: url(http://lh4.ggpht.com/_Qqajn3ngk3U/SbtYgSpbA_I/AAAAAAAAA5o/hroj-DUPOEQ/s800/polabottom.png) right bottom no-repeat;
padding-top: 10px;
}
.postFooter a {
color: #3ecdff;
background: transparent;
}
.postFooter a:hover {
}
.tags {
}
.tags a {
margin: 0 2px;
}
.tags a:hover {
}

.menubar {
}
.menubar .time {
margin-left: 3px;
}
.pageNavi {
margin-bottom: 40px;
}
.pageNavi a {
}
.pageNavi a:hover {
}

.module {
width: 460px;
padding: 6px 0;
margin: 20px;
}

#profile img {
width: 96px;
height: 96px;
margin-bottom: 5px;
padding: 2px;
border: 1px solid #D9D9D9;
overflow: hidden;
}
#profile h3 {
font-size: 100%;
}
#profile .about {
}
#calendar table {
width: 100%;
padding: 0;
}
#calendar a {
border: none;
}
#calendar td {
padding: 1px 0;
font-size: 90%;
text-align: center;
line-height: 150%;
word-break: keep-all;
text-transform: lowercase;
}
#calendar td a {
font-weight: bold;
text-decoration: none;
background: none;
}
#calendar td a:hover {
border: none;
}
#calendar .calendarHead td {
padding-bottom: 5px;
font-size: 100%;
font-weight: bold;
}
#calendar .week {
padding: 2px;
font-size: 100%;
#font-size: 80%;
text-align: center;
white-space: nowrap;
}
.day {
text-align: center;
white-space: nowrap;
}
#calendar td.today {
background: #E4ECD9;
}
#calendar td.today a {
background: #E4ECD9;
}
#cats .modBody,#cats .modBody ul,#cats .modBody ul li {
display: inline;
}
#cats li {
margin-right: 10px;
}
#search {
padding: 8px 0 9px;
}
#search .textField {
width: 205px;
}
#nPosts li {
}
#nComments li {
}
#nComments .author {
}
#tags {
}
#tags .count {
display: none;
}
#tags li {
display: inline;
margin: 0 5px 0 5px;
}
#tags .more {
margin: 5px 5px 0 0;
}
#login li span {
margin-right: 10px;
}
#custom {
clear: left;
padding: 10px 0 20px;
}
#meta .modBody {
}
#meta li {
}
.statistics {
margin-bottom: 20px;
}
.subscribe {
margin-bottom: 20px;
}
.poweredBy {
font-size: 80%;
}
#footer {
height: 70px;
margin: 0 auto;
text-align: center;
background: #fff;
}

#footer div.signimg {
float: right;
}
.copyright {
height: 43px;
margin: 0 5px;
padding-top: 15px;
text-align: left;
color: #888;
background: #fff
}

.copyright li{
margin: 0 10px 5px 10px;
}

.copyright a {
/*color: #C0C3BA;*/
}

.copyright a sup{
color: #ff7b00;
}

.cc-lisence br {
display: none;
}
.tb_url {
margin: 2px 0;
}
.tb_url input {
width: 220px;
color: #AAA;
border: 1px dashed #D9D9D9;
background: none;
}
.context {
margin: 0 0 13px;
font-size: 100%;
text-align: left;
}
.relpost h3 {
font-family: "Microsoft Yahei", "Trebuchet MS", Verdana;
font-size: 100%;
margin-bottom: 15px;
}
#comments {
margin: 0 20px 20px;
}
#comments h2 {
font-family: "Microsoft Yahei", "Trebuchet MS", Verdana;
font-size: 100%;
margin-bottom: 15px;
}
#comments li {
margin: 0 0 25px;
background: url(http://public.blogbus.com/blogbus/skin/5149/dot3.gif) left bottom repeat-x;
}
#comments .menubar {
margin: 10px 0 0;
padding: 0 0 3px;
}
.reCmtBody {
margin: 5px 0;
padding: 5px;
border: 1px solid #E5E5E5;
background: #E4ECD9;
}
.cmtBody p {
margin: 10px 0;
}
.reply {
}
#commentForm {
margin: 0 0 10px;
}
#commentForm h2 {
font-family: "Microsoft Yahei", "Trebuchet MS", Verdana;
font-size: 100%;
margin-bottom: 15px;
}
#commentForm form {
}
#commentForm label {
display: block;
}
#commentForm textarea {
width: 380px;
margin: 5px 0;
border: 1px dashed #999;
}

/* 标签特效 */

.tabbed_area {
border:none;
background-color:#fff;
padding:8px;
}

ul.tabs {
margin:0px; padding:0px;
margin-top:5px;
margin-bottom:6px;
}
ul.tabs li {
list-style:none;
display:inline;
}
ul.tabs li a {
background-color:transparent;
color:#fff;
padding:6px 18px 6px 18px;
text-decoration:none;
font-size:12px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-weight:bold;
text-transform:uppercase;
border:none;
background-image:url(http://lh4.ggpht.com/_Qqajn3ngk3U/SbjLEXaKNWI/AAAAAAAAA28/FjWQWvZ_bGA/s800/tabback2.png);
background-repeat:no-repeat;
background-position:bottom;
}
ul.tabs li a:hover {
background-image:url(http://lh3.ggpht.com/_Qqajn3ngk3U/SbjMBcQtUpI/AAAAAAAAA3Y/V9AQ7k3zAQM/s800/tabback3.png);
border-color:#2f343a;
}
ul.tabs li a.active {
background-color:transparent;
color:#282e32;
padding:6px 18px 6px 18px;
text-decoration:none;
font-size:12px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-weight:bold;
text-transform:uppercase;
border:none;
background-image:url(http://lh5.ggpht.com/_Qqajn3ngk3U/Sbsvvdn0qGI/AAAAAAAAA5Q/Nw7uiamnQAo/s800/tabback0.png);
background-repeat:no-repeat;
}
.content {
background-color:#ffffff;
padding:10px;
/*border:1px solid #cca;*/
font-family:Arial, Helvetica, sans-serif;
background-image:url(images/content_bottom.jpg);
background-repeat:repeat-x;
background-position:top;
}
#content_2, #content_3, #content_4, #content_5 { display:none; }

.content ul {
margin:0px;
padding:0px 20px 0px 20px;
}
.content ul li {
list-style:none;
border-bottom:1px solid #d6dde0;
padding-top:15px;
padding-bottom:15px;
font-size:13px;
}
.content ul li:last-child {
border-bottom:none;
}
.content ul li a {
text-decoration:none;
color: #a59c83;
background: #fff;
border-bottom: 1px dashed #a59c83;
}
.content ul li a small {
color:#8b959c;
font-size:9px;
text-transform:uppercase;
font-family:Verdana, Arial, Helvetica, sans-serif;
position:relative;
left:4px;
top:0px;
}
.content ul li a:hover {
color: #3ecdff;
border-bottom: 1px solid #3ecdff;
}
.content ul li a:hover small {
color:#baae8e;
}

.hometab a{
background: url(http://lh6.ggpht.com/_Qqajn3ngk3U/SbjEGxtK3CI/AAAAAAAAA2c/8ZVTE_0OMvs/s800/lzztitpanl.gif) no-repeat fixed;
}

.readmore{
margin-top:0;
}

.author {margin-top:10px}

#guanggao*{
margin-left: -10px;
}

#tags h2{
margin-bottom: 10px;
}

.module ul li{
border-bottom: none;
padding-top:5px;
padding-bottom:5px;
}

.guidehack{font-size:14px;background:#ffc; padding:10px; width:365px; margin:auto}

#footer{margin-top:30px}

.postHeader h2 a:link {
color: #000;
border-bottom: none;
}

.postHeader h2 a:visited {
color: #000;
border-bottom: none;
}

.postHeader h2 a:hover {
color: #fff;
}

.postHeader h2 a:active {
color: #f30;
}

index：

<div id="container">

<div class="tabbed_area">

<ul class="tabs">
<li><a href="#" title="content_1" class="tab active">牌坊</a></li>
<li><a href="#" title="content_2" class="tab">街道</a></li>
<li><a href="#" title="content_3" class="tab">路标</a></li>
<li><a href="#" title="content_4" class="tab">广场</a></li>
<li><a href="#" title="content_5" class="tab">后山</a></li>
</ul>

<div id="content_1" class="content">

<div id="header">
<h1 class="blogName"><a href="http://{#domain}" title="http://{#domain}">{#blog_name}</a><span class="description">{#blog_desc}</span></h1>
<div class="bloggerName">—— 编号：{#blog_id}</div>
</div>

{c:2}

<div class="guidehack">>>有什么没找着？<a href="#" title="content_2" class="tab">你要看的风景在街道。。。</a></div>

</div>

<div id="content_2" class="content">
{c:0}
</div>
<div id="content_3" class="content">
{c:3}
</div>
<div id="content_4" class="content">
{c:1}
</div>
<div id="content_5" class="content">
{c:4}
</div>
</div>

<div id="footer">
<div class="signimg"><a href="http://bbs.geekaa.com/topic/view/3708.html"><img src="http://lh6.ggpht.com/_Qqajn3ngk3U/SbjgK9uaT1I/AAAAAAAAA4Y/SAGkepONMpk/s800/polaroidlogo1.png" alt="Polaroid - On The Road" /></a></div>
<div class="copyright">
<ul>
<li>模板：<a href="http://bbs.geekaa.com/topic/view/3708.html">Polaroid - On The Road v.01<sup>使用说明</sup></a></li>
<li>作者： <a href="http://www.google.com/s2/profiles/104801323700331232869" title="my google profile">隐藏人物</a></li>
</ul>
</div>

</div>
</div>

index-posts：

<ul id="posts">


<li>
<div class="postHeader">
<h2><span class="date">{#date}</span><a href="{#url}">{#title}</a></h2>
</div>
<div class="postBody">
{#content}
<div class="clear"></div>
</div>
<span class="readmore">请 <a href="{#url}" title="{#title}">详细阅读...</a></span> | <span class="author">由 <a href="{#profile_url}">{#author}</a> 发表</span>
<div class="space"></div>
</li>


</ul>
<div class="pageNavi">{#pagenav}</div>

detail：

<div id="container">
<div class="content">

<div id="header">
<h1 class="blogName"><a href="http://{#domain}" title="http://{#domain}">{#blog_name}</a><span class="description">{#blog_desc}</span></h1>
<div class="bloggerName">—— 编号：{#blog_id}</div>
</div>

{c:2}

</div>

<div class="content">
{c:0}
</div>

<div class="content">
{c:1}
</div>

<div id="footer">
<div class="signimg"><a href="http://bbs.geekaa.com/topic/view/3708.html"><img src="http://lh6.ggpht.com/_Qqajn3ngk3U/SbjgK9uaT1I/AAAAAAAAA4Y/SAGkepONMpk/s800/polaroidlogo1.png" alt="Polaroid - On The Road" /></a></div>
<div class="copyright">
<ul>
<li>模板：<a href="http://bbs.geekaa.com/topic/view/3708.html">Polaroid - On The Road v0.1 <sup>使用说明</sup></a></li>
<li>作者： <a href="http://www.google.com/s2/profiles/104801323700331232869" title="my google profile">隐藏人物</a></li>
</ul>
</div>

</div>

</div>

detail-post：

<ul id="posts">
<div class="postsTop"></div>
<div class="context"><span class="pre">{#pre}</span> | <span class="contextTop"><a href="http://{#domain}">首页</a></span> | <span class="next">{#next}</span></div>

<li>
<div class="postHeader">
<h2><span class="date">{#date}</span>{#title_cat}</h2>
</div>
<div class="postBody">
{#content}
<div class="clear"></div>
</div>
<div class="postFooter">
<div class="category">分类: {#cat}</div>
<div class="tags">Tag: {#tags}</div>
<div class="tb_url">引用地址: <input type="text" value="{#tb_url}"/></div>
<div class="menubar"><span class="author"><a href="{#profile_url}">{#author}</a></span> 发表于<span class="time">{#time}</span> | {#menubar}</div>
</div>
<div class="space"></div>
</li>

<div class="postsBottom"></div>
</ul>

大家可以通过blogbus的自定义模版功能

复制上面的代码，替换掉你的自定义模版各个文件的代码。

大家也可以下载模版包再进行导入：

下载地址1：http://cn.ziddu.com/download/282618/.html

下载地址2：http://www.box.net/shared/jl9g7sgi1k

下吧，免费哦！

导入保存后也许要稍等才能看到效果。

注意事项

建议将head模版代码里的：

http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js

下下来再传到合适的地方，比如你的blog，然后当然就会得到这个js文件的新地址，将这个新地址替换到你的模版里。或许会更好。

同理，css里的图片文件也一样。

关于这款模版的修改技巧，比如如何换背景等。我以后会抽空回帖介绍。
喜欢这款模版的朋友请关注这个帖。

也欢迎大家留言反馈或者发出提问，我会尽我所能解答。

如果在设计上有什么意见建议，当然也要告诉我。

模版使用修改协议：

模版名称：Blogbus Theme - Polaroid On The Road v0.1

作者：Lin Zhizhao

你可以随意修改本模版，如果你修改模版，请说明修改自：“Blogbus Theme - Polaroid On The Road v0.1” 并给出链接指向原设计的地址：http://bbs.geekaa.com/topic/view/3708.html

放心注册，GeeKaa不会虚耗你半点时间，你只会发现更多乐趣。

立即注册

< 我差点害死两条人命 | 【英文经典】Reality - Richard Sanderson >

标签： Polaroid The Road 模版

23 篇回复 | 回到顶部 | 登录后回复主题

2009-3-16 11:18 1楼

hgta 广州

顶我用上了

2009-3-18 11:50 2楼

LeeSan 景德镇

好详细

2009-3-19 9:58 3楼

田六一中国

广场，后山，什么的怎么用？

2009-3-19 11:19 4楼

隐藏人物楼主惠州

田六一你好，

如果你已经启用这款模版，那么，

登陆你的blogbus，点击导航上的“博客” -> 点击“模版” -> 点击模版截图旁边的“首页布局设置”

这个时候会出现首页布局界面，侧栏那里有几个栏目，其中“副栏1”和“副栏4”分别代表的是广场和后山。

你只需要将“副栏3”或者其他副栏里的那些项目，如“最新评论”等，拖过“副栏1”和“副栏4”就可以了。

也可以点击“副栏1”或者“副栏4”标题旁边的“添加模块”，然后进行设置。

最后记得点击整个界面下方的“保存当前布局”。

明白吗？

2009-3-19 21:43 5楼

田六一中国

恩，明白了！大谢ing

2009-4-18 12:53 6楼

trista0317 上海

用上了，谢谢！
但详细阅读日志那栏里，怎么下面有些“随机文章”，都是些小广告类的，还蛮多的，太煞风景了，这有办法解决吗？

2009-4-18 12:55 7楼

trista0317 上海

我的BLOG地址是：http://trista0317.blogbus.com

2009-4-18 13:57 8楼

隐藏人物楼主惠州

Miss M你好！

那是blogbus的默认设置。

你可以登录你的blogbus，然后点“博客”，然后点“博客设置”，里面有“随机日志”这一项，默认是显示，你点“隐藏”，然后“保存设置”即可。

2009-4-22 12:18 9楼

trista0317 上海

谢谢啦！

2009-5-9 10:54 10楼

xec 香港

这块板子很有新意。

2009-5-29 13:13 11楼

achE酱中国

可以搞音乐盒么……

想要。

http://lemonache.blogbus.com

2009-5-29 15:24 12楼

隐藏人物楼主惠州

可以啊。你把联系方式发给我，我教你。

2009-5-29 15:26 13楼

隐藏人物楼主惠州

我会再推出一系列的关于polaroid的模板的。

2009-5-29 17:11 14楼

achE酱中国

很喜欢的饿~~
什么时候会再出呢？

呵呵谢谢楼主了，

已经搞到8box 音乐盒了，虽然不太会用饿...

2009-5-29 17:19 15楼

隐藏人物楼主惠州

最快要大概一周后才能开始动手，不过已经有构思。

最近在忙着geekaa的新功能。很快会出的，欢迎来体验。

2009-5-29 17:25 16楼

achE酱中国

好饿~~

呵呵加油！

2009-6-27 14:53 17楼

yukiwa 广州

代码拿走回去慢慢学习

顺便问知不知道大巴这样的页面效果可以怎么做，就是一页横排可以显示3篇blog的缩略图的
http://birdkid.blogbus.com/

2009-6-27 16:24 18楼

隐藏人物楼主惠州

ls提供的这个demo再safari下是显示错误的。

但是他那个点了图片出幻灯的特效我知道是怎么回事。

用了一个ajax特效，很多地方都在用这个特效。

其实这类特效你可以来这里看看：

http://bbs.geekaa.com/go/ajax

2009-9-26 12:45 19楼

淡迷离加拿大

这板子好喜欢！拿回家挂上啦！颜色很香，不闹。
继续研究。
http://mazystar.blogbus.com/

2009-9-26 16:44 20楼

淡迷离加拿大

我改了一些名称和图片，还保留着你的署名和连接。你不介意的喔？
能不能告诉我怎么改首页那5个小按钮的长度呢？（例如content_1,原来每个按钮是两个字，现在字数多了，变得不够长。。。）

另外通常需要把修改模板的说明加在哪里呢？

麻烦指点一下！谢谢！

2009-9-26 22:58 21楼

隐藏人物楼主惠州

5个小按钮，需要修改小按钮的底图。其实可以用一种叫css滑动门的技术完美地实现按钮地随意大小，但是我并没有这么做，你可以修改底图来实现。

不介意，你改得很漂亮，那个图我也好喜欢。

“另外通常需要把修改模板的说明加在哪里呢？”

这句不明白。

你也可以在我地名字之上署上“重设计：淡迷离”然后在我地署名那里标明原设计就行了或者在我地署名旁加上你的信息啊。都行。

太久没有碰这个模板，有些技术细节也忘了。最近全力做一个伟大的设计，很多东西顾不过来。

如果还有其他疑问可以给我写邮件

linuximo@gmail.com

当然最好还是回来这边问，因为可能其他人也有同样的疑问，回答你就是回答别人。

很高兴你能喜欢我做的东西。

另外我很像了解你是怎么知道这款模板的？

2009-9-27 4:17 22楼

淡迷离加拿大

谢谢你的回答！

“另外我很想了解你是怎么知道这款模板的？”
就在blogbus的模板分享里面，有你的这一款样式，然后顺着署名点过来的。

其实我本来也想找有屏风或者滑动门的设计，因为自己完全不会写代码，又喜欢那种样式，没办法只能改别人的分享咯。

如果写出了滑动门的代码能不能也发出来咧？就是比如头图部分可以显示四幅可以滑动的图片，并且各自有四个连接页面。最近好像很热门的样子。

期待您的新作！

2009-9-27 10:53 23楼

隐藏人物楼主惠州

Sliding Door:
http://www.alistapart.com/articles/slidingdoors/

我说的滑动门是针对导航的一种技术。

不过你说的我也会考虑做。

我的下下款模板就按你的说法设计吧。

要等一阵子。

不回帖对不起楼主。那就帮楼主加盖一层吧！

在回复之前你需要先进行登录

电子邮件或昵称
密码
	找回密码
还没有账号？	现在就注册一个

GeeKaa

【模版分享】Polaroid - On The Road

更多主题：

搜索更多主题

GeeKaa 2009