溫柔對待部落格:SIMPLE部落格樣版下載

<< 玩弄色彩部落格樣版下載 | 回blog首頁 | 玩弄色彩調色盤(明亮色系一) >>

2005年11月24日

SIMPLE部落格樣版下載

SIMPLE 簡單，蠻不錯的感覺，五花八門的世界，繽紛色彩，有時也會讓人頭昏眼花吧。偶而來個簡單一點樣式的部落格版面，應該可以讓訪客有另一種安靜舒適的感覺。簡單、希望可以和自然畫上等號，讓訪客好好的靜靜的，慢慢欣賞你的部落格文章。

在你的網頁樣式設定中選擇自定樣式後，把以下的CSS全部拷貝回去，蓋過原有的．另外記得把以下背景圖檔利用滑鼠右鍵存回你的電腦，然後上傳到你的部落格圖片檔案中．然後將下面檔中的網址做修正以便抓到你的圖檔．有疑問的話歡迎發問，喜歡的朋友不妨留言鼓勵一下！

將滑鼠移上圖案後按下右鍵以作拷背儲存到你的電腦中。請勿直接連結圖案網址，主因是有可能會因空間限制而被清除掉。

背景用圖

請拷貝以下的CSS :(記得將修正圖案網址)

BODY {
	Font-Family: Arial, Helvetica, sans-serif;
	MARGIN: 10px 0px;
	WIDTH: 100%;
	COLOR: #333333;
	HEIGHT: 100%;
	TEXT-ALIGN: center;
	background-color: #FFFFCC;
	font-size: 12px;
}

A {COLOR: #996600; TEXT-DECORATION: underline}
A:link {COLOR: #996600; TEXT-DECORATION: underline}
A:visited {COLOR: #996600; TEXT-DECORATION: underline}
A:active {}
A:hover {COLOR: #000000; TEXT-DECORATION: none}

A.acalendar {COLOR: #996600; TEXT-DECORATION: NONE}
A.acalendar:link {COLOR: #996600; TEXT-DECORATION: NONE}
A.acalendar:visited {COLOR: #996600F; TEXT-DECORATION: NONE}
A.acalendar:active {COLOR: #996600; TEXT-DECORATION: NONE}
A.acalendar:hover {COLOR: #996600; TEXT-DECORATION: UNDERLINE}

A.acontinues {COLOR: #996600; TEXT-DECORATION: underline}
A.acontinues:link {COLOR: #996600; TEXT-DECORATION: underline}
A.acontinues:visited {COLOR: #996600;TEXT-DECORATION: underline}
A.acontinues:active {}
A.acontinues:hover {COLOR: #000000; TEXT-DECORATION: none}

A.amenu {COLOR: #333333; TEXT-DECORATION: underline}
A.amenu:link {COLOR: #333333; TEXT-DECORATION: underline}
A.amenu:visited {
	TEXT-DECORATION: underline;
	color: #333333;
}
A.amenu:active {}
A.amenu:hover {COLOR: #666666; TEXT-DECORATION: none}

#container {
	WIDTH: 740px;
	TEXT-ALIGN: left;
	margin-right: auto;
	margin-left: auto;
	padding: 0px;
}
#banner {
	HEIGHT: 60px;
	background-color:#FFCC00;
	background-image:url(http://背景用圖);
	border:1px #999933 solid;
}
#subbanner {}
#banner A {COLOR: #000000; TEXT-DECORATION: none}
#banner A:link {COLOR: #000000;	TEXT-DECORATION: none;}
#banner A:visited {TEXT-DECORATION: none;color: #000000;}
#banner A:active {TEXT-DECORATION: none;color: #000000;}
#banner A:hover {COLOR: #000000;TEXT-DECORATION: underline;}

#subbanner A {COLOR: #999933; TEXT-DECORATION: none}
#subbanner A:link {COLOR: #999933; TEXT-DECORATION: none}
#subbanner A:visited {COLOR: #999933; TEXT-DECORATION: nonee}
#subbanner A:active {COLOR: #999933; TEXT-DECORATION: none}
#subbanner A:hover {COLOR: #999933; TEXT-DECORATION: underline}

H1 {PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px}
H2 {
	PADDING-RIGHT: 0px;
	PADDING-LEFT: 0px;
	PADDING-BOTTOM: 0px;
	MARGIN: 0px;
	PADDING-TOP: 0px;
	font-size: 12px;
	font-style: normal;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}
H3 {PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px}

.blogtitle {
	FONT-SIZE: 18px;
	TEXT-ALIGN: center;
	font-weight: BOLD;
	padding-top: 10px;
}
.description {
	FONT-SIZE: 12px;
	COLOR: #666666;
	TEXT-ALIGN: center;
	font-weight: normal;
	PADDING-TOP:3PX;
	PADDING-LEFT:20PX;
}
#content {
	width: 420px;
	float: right;
	padding-right: 160px;
}
.blog {
	MARGIN: 0px 10px 0px 10px;
}
.date {
	FONT-SIZE: 11px;
	COLOR: #000000;
	font-weight: normal;
	padding-RIGHT: 5px;
	TEXT-ALIGN:RIGHT;
}
.blogbody {
	PADDING-RIGHT: 10px;
	PADDING-LEFT: 10px;
	MARGIN-BOTTOM: 10px;
	PADDING-BOTTOM: 10px;
	PADDING-TOP: 10px;
	border:1px #999933 solid;
}
.title {
	PADDING: 5px;
	PADDING-LEFT:10PX;
	FONT-SIZE: 12px;
	COLOR: #000000;
	height: 20px;
	font-weight: normal;
	background-color:#FFCC00;
}
.main {
	FONT-SIZE: 12px;
	MARGIN: 15px 10px;
	COLOR: #000000;
	font-family: Arial, Helvetica, sans-serif;
	line-height: 150%;
}
.main-continues {FONT-SIZE: 12px}

.posted {font-size: 11px;
	MARGIN: 0px 10px 5px;
	COLOR: #996600;
	TEXT-ALIGN: right;
}
A.aposted {COLOR: #333333; TEXT-DECORATION: underline}
A.aposted:link {COLOR: #333333; TEXT-DECORATION: underline}
A.aposted:visited {COLOR: #333333; TEXT-DECORATION: underline}
A.aposted:active {}
A.aposted:hover {
	COLOR: #666666;
	TEXT-DECORATION: none;
}

.menu {FONT-SIZE: 12px; COLOR: #666666; TEXT-ALIGN: right}
.comments-head {
	PADDING: 5px;
	PADDING-LEFT:10PX;
	FONT-SIZE: 12px;
	COLOR: #000000;
	HEIGHT: 20px;
	font-weight: normal;
	background-color:#FFCC00;
}
.comments-body {
	FONT-SIZE: 12px;
	MARGIN: 20px 0px 0px 70px;
	LINE-HEIGHT: 150%;
	color: #000000;
	padding: 10px;
	border: #999933 1px DOTTED;
}
.comments-post {FONT-SIZE: 12px; MARGIN: 0px 10px 25px; COLOR: #996600; TEXT-ALIGN: right}
.trackback-url {
	FONT-SIZE: 13px;
	MARGIN: 20px 0px 15px 13px;
	COLOR: #000000;
	padding-right: 5px;
	padding-left: 5px;
}
.trackback-body {
	FONT-SIZE: 12px;
	MARGIN: 10px 0px 15px 13px;
	LINE-HEIGHT: 150%;
	color: #000000;
}
.trackback-post {FONT-SIZE: 12px; MARGIN: 0px 0px 25px; COLOR: #996600; TEXT-ALIGN: right}

A.atrackback-post {COLOR: #333333; TEXT-DECORATION: none}
A.atrackback-post:link {COLOR: #333333; TEXT-DECORATION: nonee}
A.atrackback-post:visited {COLOR: #333333; TEXT-DECORATION: none}
A.atrackback-post:active {}
A.atrackback-post:hover {COLOR: #333333; TEXT-DECORATION: UNDERLINE}

TABLE.form {MARGIN: 25px 0px 0px 20px}
LABEL {
	FONT-SIZE: 12px;
	color: #333333;
}
#author {
	WIDTH: 200px;
	border: #999933 1px DOTTED;
	color: #666666;
	background-color: #FFFFCC;
}
#email {
	WIDTH: 200px;
	border: #999933 1px DOTTED;
	color: #666666;
	background-color: #FFFFCC;
}
#url {
	WIDTH: 200px;
	border: #999933 1px DOTTED;
	color: #666666;
	background-color: #FFFFCC;
}
#text {
	WIDTH: 550px;
	HEIGHT: 150px;
	border: #999933 1px DOTTED;
	color: #666666;
	background-color: #FFFFCC;
}

.pagetop {
	FONT-SIZE: 12px;
	MARGIN: 5px 0px;
	TEXT-ALIGN: left;
}
#links {
	FLOAT: right;
	OVERFLOW: hidden;
	WIDTH: 160px;
	color: #CCFFFF;
	position: absolute;
}
#links-more {
	FLOAT: right; 
	OVERFLOW: hidden; 
	WIDTH: 160px; 
	margin-left: 600px;
	PADDING-TOP:20PX;
	position: absolute;
}
.calendarhead {
	FONT-SIZE: 12px;
	PADDING-BOTTOM: 2px;
	COLOR: #000000;
	TEXT-ALIGN: CENTER;
	font-family: Arial, Helvetica, sans-serif;
	width: 90%;
}
.calendartable {
	WIDTH: 90%;
	TEXT-ALIGN: center;
	float: none;
	margin-bottom: 10px;
	height: 100px;
	border: #999933 1px solid;
}
.calendarweek {FONT-SIZE: 10px; COLOR: #000000;TEXT-ALIGN: center}
.calendarwd {
	background-color:#99cc66;
	border-bottom: #999933 1px solid;
}
.calendard {
	empty-cells: show;
}
.calendardbg {
	background-color:#FFCC00;
}
.calendar {
	FONT-SIZE: 11px;
	color: #666666;
	font-family: Arial, Helvetica, sans-serif;
}

.sidetitle {
	FONT-SIZE: 11px;
	PADDING-TOP: 2px;
	PADDING-BOTTOM: 2px;
	COLOR: #000000;
	TEXT-ALIGN: CENTER;
	background-color:#99cc66;
	WIDTH:90%;
	BORDER-LEFT:1PX #999933 SOLID;
	BORDER-RIGHT:1PX #999933 SOLID;
	BORDER-TOP:1PX #999933 SOLID;
}
.side {
	FONT-SIZE: 12px;
	PADDING-BOTTOM: 5px;
	MARGIN: 0px 0px 10px;
	TEXT-ALIGN: LEFT;
	width: 90%;
	color: #996600;
	border: 1PX #999933 SOLID;
}
.sidebody{padding-left:4px;padding-top:2px;padding-right:2px;padding-bottom:3px;}
A.aside {COLOR: #333333; TEXT-DECORATION: none}
A.aside:link {COLOR: #333333; TEXT-DECORATION: none}
A.aside:visited {
	TEXT-DECORATION: none;
	color: #333333;
}
A.aside:hover {COLOR: #333333; TEXT-DECORATION: underline}

A.arss {COLOR: #dddddd; TEXT-DECORATION: underline}
A.arss:link {COLOR: #2d8d5f; TEXT-DECORATION: underline}
A.arss:visited {COLOR: #80b59c; TEXT-DECORATION: underline}
A.arss:active {}
A.arss:hover {COLOR: #bababa; TEXT-DECORATION: none}

.pict {MARGIN: 5px 5px 5px 5px;}
.photo {TEXT-ALIGN: center}
.nickname {
	FONT-SIZE: 12px;
	MARGIN: 10px 0px;
	COLOR: #000000;
	text-align: center;
	background-color: #FFEED5;
}
.message {
	FONT-SIZE: 12px;
	COLOR: #333333;
	text-align: left;
	line-height: 150%;
}
.quotetable {}
.quote {PADDING-RIGHT: 1px; PADDING-LEFT: 1px; FONT-SIZE: 12px; PADDING-BOTTOM: 1px; COLOR: #FFFFCC; PADDING-TOP: 1px}
.blogtimes {MARGIN: 0px 0px 15px; TEXT-ALIGN: center}
.powered {
	MARGIN: 0px 0px 10px;
	TEXT-ALIGN: center;
	color: #CCFFFF;
}
.syndicate {margin:5px 0px 5px 0px; TEXT-ALIGN: center}
.checkers {MARGIN-TOP: 10px; FONT-SIZE: 11px}

Posted by rainlock at 樂多Roodo! │01:12 │回應(14) │引用(0) │CSS樣板下載

樂多分類：網路/3C 共同主題：溫柔對待部落格工具：編輯本文

引用URL

http://cgi.blog.roodo.com/trackback/768747

回應文章

這個樣式真簡單大方
請問文章內文的頁面可以保留有首頁左邊的連結或自由欄位嘛?
要怎麼設定呢?

Posted by Cassidy at 2005年11月23日 10:49

rainlock 我很喜歡這個風格，我把它帶回套用了，
可是我發現我的網頁沒有辦法變成三欄式，
它還是一樣是「長長的」兩欄，不曉得是哪裡出了問題？
之前套用你三欄式設計，都發生同樣的問題，
如果有空，請你幫我看一下，謝謝。

Posted by yungwei at 2005年11月23日 11:40

我之前也是這樣，後來先套用樂多三欄式的樣本，再把想要的三欄式CSS套用下去，就成功了！

Posted by 柳橙 at 2005年11月23日 17:37

謝謝柳橙的提點，我回去試了一下你提供的方法，果然就成功了，真是謝謝你。

Posted by yungwei at 2005年11月23日 19:38

rainlock~
請你救救我的部落格吧~~ 不知道為什麼我的部落格格式突然變得怪怪的~
左邊的欄位和右邊的日記不能一齊並排顯示出來~ 我試過轉用部落格提供的格式, 但是結果都是一樣, 是否我的設定出錯了? 麻煩你抽點時間去看看我部落格的情況吧~~~十分感謝呢!!

Posted by SUki~ at 2005年11月26日 08:11

ㄟ....我很喜歡你的部落格樣式...
可是，我怎麼設就是沒辦法把"背景"給貼上去ㄟ...
語法都照做了...可是.....
可以教教我嗎？背景用圖存進電腦是什麼意思？=="
如果可以，麻煩寄到我的信箱好嗎？
c0958510628@yahoo.com.tw 謝謝~

Posted by 沉思~ at 2005年11月28日 20:31

rainlock：
因為我使用了這款部落格樣版，不過因為左邊的邊欄有點窄，
不曉得要修改哪個地方？才可以調整邊欄的寬度？請你告訴我，謝謝。
喔～先祝你聖誕快樂～：）

Posted by yungwei at 2005年12月20日 11:14

決定左邊欄位寬度在下面的WIDTH:160px
#links {
FLOAT: right;
OVERFLOW: hidden;
WIDTH: 160px;
color: #CCFFFF;
position: absolute;
}

決定右邊欄位寬度在下面的WIDTH:160px
#links-more {
FLOAT: right;
OVERFLOW: hidden;
WIDTH: 160px;
margin-left: 600px;
PADDING-TOP:20PX;
position: absolute;
}

改變數字大小就可以，但要注意的事變了之後，中間的主文欄位會影響到，所以也要注意到#content{}當中的數字要跟著修正

Posted by rainlock at 2005年12月21日 00:34

Hi rainlock,
我試者套用了您提供的樣式了，
但是遇到二個問題，想請您幫幫忙，
1.為什麼不管我套那一個 css ，文章都是全部顯示？
我希望呈現出摘要的部份就好了。
2.如何把中間文章的區域加大，
因為我本來的文章，會和左邊的區域重疊...

Posted by 阿德 at 2006年09月17日 23:06

Hi rainlock 您好了，
我找到問題1 的答案了，
另外，我也參考上一個回應，把左右邊的範圍加大了，
但是中間的知道要改那裡？

Posted by 阿德 at 2006年09月18日 13:18

DFHNLOKFH

Posted by 吳家賢 at 2008年05月18日 18:25

謝拉

Posted by 橘子 at 2008年08月10日 21:53

謝拉

Posted by 橘子 at 2008年08月10日 21:54

拿走啦

Posted by 堡 at 2008年11月30日 12:16

姓名 :
Email :
URL :
回應狀態:	公開私密
	記住我的資訊顯示我的圖像 ( 登入或申請個人圖像 )
回應內容 :

回最上方