EEEE: 部落技术

显示标签为“部落技术”的博文。显示所有博文

星期日, 十二月 14, 2008

Blogger beta：图片解剖Blogger beta模板代码

说明(点击看大图)：
1.所有蓝色的部分都是位于Style标记之间的CSS样式表代码，红色的部分是位于Body标记之间的Html代码。
2.并不是所有的模板都完全一样，但大体类似。
3.享受自己的Hack吧^-^
4.via Blogatech

A)头部（Header）。此部分位于页首部，包含标题和网站描述，概括了整个页首部分。

CSS=
#header {
width:660px;
margin:0 auto 10px;
border:1px solid #ccc;
}

HTML=
<div id="header">
<h1 id="blog-title">
<ItemPage><a href="<$BlogURL$>"></ItemPage>
<$BlogTitle$>

<ItemPage>
</h1>
<p id="description"><$BlogDescription$>
</div>

B）导航栏（Navigation Bar）。此部分代码默认在代码中是不显示的。如果你要去掉NavBar只要在CSS中添加以下代码即可：

CSS=
#b-navbar { height:0px; visibility:hidden; display:none
}

C) Blog标题（Blog title）

CSS=
#blog-title {
margin:5px 5px 0;
padding:20px 20px .25em;
border:1px solid #eee;
border-width:1px 1px 0;
font-size:200%;
line-height:1.2em;
font-weight:normal;
color:#666;
text-transform:uppercase;
letter-spacing:.2em;
}

HTML=
<$BlogTitle$>

D)Blog 描述（Blog Description）

CSS=
#blog-description {
margin:0 5px 5px;
padding:0 20px 20px;
border:1px solid #eee;
border-width:0 1px 1px;
max-width:700px;
font:78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
text-transform:uppercase;
letter-spacing:.2em;
color:#999;
}

HTML=
<$BlogDescription$>

E)Blog日期首（Blog Date Header）。贴子发布时自动生成日期。

CSS=
h2 {
margin:1.5em 0 .75em;
font:78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
text-transform:uppercase;
letter-spacing:.2em;
color:#999;
.date-header {
margin:1.5em 0 .5em;
}

HTML=
<BlogDateHeader>
<h2 class="date-header"><$BlogDateHeaderDate$></h2>
</BlogDateHeader>

F)文章标题（Blog Item Title)

CSS=
.post-title {
margin:.25em 0 0;
padding:0 0 4px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:#c60;

HTML=
<BlogItemTitle>
<h3 class="post-title">
<BlogItemUrl><a href="<$BlogItemUrl$>" title="external link"></BlogItemUrl>
<$BlogItemTitle$>
<BlogItemUrl></a></BlogItemUrl>
</h3>
</BlogItemTitle>

G)文章区域（Post Division）。此部分包含了Blog Date header, Blog Item Title, Blog Item Body 和 Blog Item Footer。

CSS=
.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted #ccc;
padding-bottom:1.5em;
.post div {
margin:0 0 .75em;
line-height:1.6em;

HTML=
<div class="post">
</div>

H)文章援引区域（Post Block Quote）

CSS=
.post blockquote {
margin:1em 20px;
}
.post blockquote p {
margin:.75em 0;
}

HTML=
<blockquote>

I)文章文字区域（Blog Item Body)

CSS= .post div {
margin:0 0 .75em;
line-height:1.6em;
}

HTML=
<$BlogItemBody$>

J)个人资料部分（Blog Member Profile Division）

CSS=
#profile-container {
margin:0 0 1.5em;
border-bottom:1px dotted #ccc;
padding-bottom:1.5em;
}
.profile-datablock {
margin:.5em 0 .5em;
}
.profile-img {
display:inline;
}
.profile-img img {
float:left;
padding:4px;
border:1px solid #ddd;
margin:0 8px 3px 0;
}
.profile-data {
margin:0;
font:bold 78%/1.6em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
text-transform:uppercase;
letter-spacing:.1em;
}
.profile-data strong {
display:none;
}
.profile-textblock {
margin:0 0 .5em;
}
.profile-link {
margin:0;
font:78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
text-transform:uppercase;
letter-spacing:.1em;
}

HTML=
<$BlogMemberProfile$>

K)文章底部（Post Footer）这部分包含了Authors Nickname, Item Date Time, Item Comment Count, Comments and blog item control variables等

CSS=
p.post-footer {
margin:-.25em 0 0;
color:#ccc;
}
.post-footer em, .comment-link {
font:78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
text-transform:uppercase;
letter-spacing:.1em;
}
.post-footer em {
font-style:normal;
color:#999;
margin-right:.6em;
}

HTML=
<p class="post-footer">
<em>posted by <$BlogItemAuthorNickname$> at <a href="<$BlogItemPermalinkUrl$>" title="permanent link"><$BlogItemDateTime$></a></em>
<MainOrArchivePage><BlogItemCommentsEnabled>
<a class="comment-link" href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnclick$>><$BlogItemCommentCount$> comments</a>
</BlogItemCommentsEnabled><BlogItemBacklinksEnabled>
<a class="comment-link" href="<$BlogItemPermalinkUrl$>#links">links to this post</a>
</BlogItemBacklinksEnabled>
</MainOrArchivePage> <$BlogItemControl$>
</p>

L)链接（Links）

CSS=
a:link {
color:#58a;
text-decoration:none;
}
a:visited {
color:#969;
text-decoration:none;
}
a:hover {
color:#c60;
text-decoration:underline;
}
a img {
border-width:0;
}
#sidebar ul {
margin:0 0 1.5em;
padding:0 0 1.5em;
border-bottom:1px dotted #ccc;
list-style:none;
}

HTML=
<h2 class="sidebar-title">Links</h2>
<ul>
<li><a href="http://news.google.com/">Google News</a></li>
<li><a href="http://help.blogger.com/bin/answer.py?answer=110">Edit-Me</a></li>
<li><a href="http://help.blogger.com/bin/answer.py?answer=110">Edit-Me</a></li>
</ul>

M)之前文章（Previous Posts）

CSS=
#sidebar ul {
margin:0 0 1.5em;
padding:0 0 1.5em;
border-bottom:1px dotted #ccc;
list-style:none;
}

h2 {
margin:1.5em 0 .75em;
font:78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
text-transform:uppercase;
letter-spacing:.2em;
color:#999;
}

HTML=
<h2 class="sidebar-title">Previous Posts</h2>
<ul id="recently">
<BloggerPreviousItems>
<li><a href="<$BlogItemPermalinkURL$>"><$BlogPreviousItemTitle$></a></li>
</BloggerPreviousItems>
</ul>

N)存档（Archives ）

CSS=
#sidebar ul {
margin:0 0 1.5em;
padding:0 0 1.5em;
border-bottom:1px dotted #ccc;

list-style:none;
}

h2 {
margin:1.5em 0 .75em;
font:78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
text-transform:uppercase;

letter-spacing:.2em;
color:#999;
}

HTML=
<h2 class="sidebar-title">Archives</h2>
<ul class="archive-list">
<BloggerArchives>
<li><a href="<$BlogArchiveURL$>"><$BlogArchiveName$></a></li>
</BloggerArchives>
</ul>

O)侧边栏区域。此部分包含了Member Profile, Links, Resent Posts and Archives等

CSS=
#sidebar {
width:220px;
float:right;
}

#sidebar ul {
margin:0 0 1.5em;
padding:0 0 1.5em;
border-bottom:1px dotted #ccc;
list-style:none;
}

#sidebar li {
margin:0;
padding:0 0 .25em 15px;
text-indent:-15px;
line-height:1.5em;
}
#sidebar p {
color:#666;
line-height:1.5em;

HTML=
<div id="sidebar"><div id="sidebar2">
</div>

P)页脚部分

CSS=
#footer {
width:660px;
clear:both;
margin:0 auto;
}

#footer hr {
display:none;
}
#footer p {
margin:0;
padding-top:15px;
font:78%/1.6em "Trebuchet MS",Trebuchet,Verdana,Sans-serif;
text-transform:uppercase;
letter-spacing:.1em;
}

#sidebar p {
color:#666;
line-height:1.5em;

HTML=
<div id="footer"><hr />
<p> </p>
</div>

标签：部落技术

星期六, 十二月 13, 2008

[+/-]

星期三, 十二月 10, 2008

[+/-]

模版具體是怎麼修改的？其實關於blogger模版修改的文章在網上很多了，尤其是在Google只要輸入 “blogger 模版”就會得到大量的模版內容。個人感覺很多西洋設計和大量的hack以及外部JS的調用，反而會造成很差的介面體驗和用戶體驗。其實blogger本身提供的很多模版本已經有了很好的基礎，針對這些模版只需要做簡單的修改處理一樣可以產生很好的個性化效果。今天就寫一篇我這個模版的修改說明，為那些希望打造個性化介面的用戶提供一些參考。

Blogger是一個基於CSS-DIV的標準化設計，對於很多已經熟悉Html語法的用戶來說，可能剛剛開始看語法的時候會有些陌生，但仔細一瞧後其實會發現差別不是那麼的巨大，接著就是認識一些相關的基礎語法值概念去看看，先做一個技術上的熟悉準備，這樣在修改的時候就會目標明確，思路清晰。CSS- DIV是一種標準化的網站結構，他的特點是為網頁展示搭建介面，但是並不提供資料和內容。恩…可以想像它就就好像提供一個樣式豐富的袋子，至於裡面裝什麼，那跟他無關，它只管會袋子本身，而且一旦這個標準建設好了，他會通過這種標準化的結構，很輕鬆的實現將袋子中的資料放置出來，貌似檔案總管就是了 O.o。

在Blogger中不同的模版修改的方法是不同的，我的模版是Kubrick這個模版，如果你選擇的並不是這個模版，那麼下面所說的修改解說對你也是起到一個參考作用，因為大概的方法都是相似的。

修改前務必備份你的代碼，可以通過download的方式也可以直接把所有代碼拷貝粘貼進記事本保存，以備修改崩潰後能夠順利恢復。
在模版編輯頁面，有個小的選擇框，是針對所有模組的代碼是否展開的選擇項，我們一般修改模版和備份模版的時候都應該把這個選擇項選擇上，保證代碼的完整性。

blogger模版中各模組介紹：
通讀模版代碼，你會發現主要有這麼幾塊內容：

1，標準聲明

<………version="1.0" encoding="UTF-8" ………/gml/expr'>這是標準xml的聲明內容，也有些參數，本修改與此無關，不多說。

2，head聲明

一個的 head 聲明，也包括整個模版很核心的CSS資料。我們對很多的修改是集中在對CSS的修改上，因此這塊是我們關注的重點。我的模版修改的首頁LOGO圖，字體，字體顏色，去處頂部導航等均是在這部分操作的。

3，body內容展示

這是整個內容展示模組，所有的CSS設定通過在這個模組中產生作用並展示給用戶。因為 bolgger 本身已經有了很好的可視模組添加、修改、刪除等操作，因此這塊僅僅是我們為了實現更多個性化操作需要瞭解的內容。如添加返回首頁，返回頁首，遮罩 LABEL等一些相關設定值都是在這部分操作。
一，如何去掉blogger的導航條（位居頂部的）
在CSS聲明中添加如下代碼：


/* === Hide the NavBar === */
.Navbar {
visibility:hidden;
display: none;
}
/* === Hide the NavBar === */

二，字體應該如何設置
古代先人與祖宗經過無數的反覆驗證、創造與美化流傳下來給後代的「漢字體」是非常特殊與優美的字體，雖然這個世界上另外還有14億人因為歷史遺留下來的因素，使用了四十年左右的「新中國字體」，但是那種字體平常要用的話交給Google大神翻譯就好，市場比較大，開發的人就多了，技術進步了嘛，說白了不就是拿來給我這種沒事還在子曰的人偷懶用的。雖然筆者我對於「新中國字體」也因為政治現實因素而熟系，但是俺更愛傳統，更敬祖宗，嚮往自由，所以在此就不討論，如果不能很好的設置「漢字體」，上對不起天地良心、先人祖宗，下會給訪問者帶來不好的體驗效果，「天地君親師」總不能都得罪光了是唄。當然在字體設置上每個人也是會各有所愛，在此僅供給大家作為參考。

blogger多採用的是相對尺寸顯示字體大小和字體內容，多採用的是100％，200％這樣的方式，個人感覺也比較好看，配置比較規整，但是我還是選擇了我更加喜歡的方式。

文章標題字體設置
找到Variabl的各種宣告進行設定內容就不細說

文章字體設置


找到 .post-body 或是 .post 相關的宣告進行修改
border:相關只要設定的是文字模組的欄線，我是試過添家圖片或是直接宣告的發法來顯示欄線，以達美化頁面的效果，不過因為我當初是啥都不會的傻大個，所以設定出來的效果很差，因次回復成初始設定
padding: 是宣告文字模組與周邊的一個距離空間，也是為了視覺上的美觀特意設定的，padding的參數是針對上，右，下，左的順序來定制的。
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 這裡是設定文字大小囉
color: 輸入顏色代碼
line-height: 文字的行距一般說用的設定是XXpx;，X的部份為數字，主要的作用是在你的發帖文字那部分拉開行與行的距離，不會讓文字一行挨一行的堆積在一起，行與行之間保留一定的距離為訪問者看文章的時候提供一個舒適的觀看效果。

文章中圖片屬性設定


.post img {
margin:0PX 30px 5px 0px;
padding:4px;
border:1px solid $borderColor;
}

這段代碼主要是設定你在發帖內容裏邊如果有圖片，你希望他按照什麼樣的形式去顯示，主要修改的是他的padding屬性，保證圖片有邊框，邊框距離圖片多寬，以及圖片週邊跟文字距離多大合適。

字體選擇應該選擇那些在作業系統中默認安裝的字體，這些字體英文一般verdana很漂亮，中文字體宋體，黑體。尺寸大小一般小字可以設置為9pt，中字體可以設置為13px。這些可以保證無論英文還是中文都顯示更加方正規範美觀。

三，如何增加一個圖片性質的標題LOGO
CSS中所有的圖片都是以背景圖片的形式顯示的，這同我們html中是有很大不同的。那麼我們只需要在認為合適的地方增加一個背景圖片就可以實現標題LOG圖。示例如下：


#header {
background:url("你需要的圖片位址") no-repeat left bottom;
padding:0 0px 0px;
height:195px
}

在這裡增加背景圖片內容，顯示你的標題LOGO。height是根據你的需要設定背景圖片的高度，如果省略可能會有顯示不全的問題。

标签：部落技术

[+/-]

Blog範本基本語法值概念

俗語說的好“常在河邊走，哪有不濕鞋”在運用各路大仙開發出來的各種語法或者就算是使用阿土伯開發的無腦外掛，總是有搞混或是不明白的時候，因此適當的了解語法是有必要的。最好的方法就是會英文，然後跌跌撞撞的亂按、亂改、亂試!跟它拼了就對!(俺就是這樣學滴)當您要修改時請記得養成存檔的好習慣，如果怕造成無法挽回的錯誤，可另開設一個測試Blog，而且這年頭連網路都開始要環境保護了，所以在設定的地方把它設定為隱藏(避免浪費網路搜尋數值及各種資源，筆者我就為了找一個語法搜尋到一堆"測試Blog"!!)。一般來說區塊是指用 Div或是span。
(1)主要設定值

head 功能:此標籤為範本頁面抬頭，領悟後可延伸搭配header來設定，各種頁面使用的主要語法、javascript等都在此設定。
body 功能:一是主要為設定頁面的一般設定值，二是為主體顯示區域 main 功能:主顯示設定值輸入區域 footer 功能:底部顯示設定輸入區域 sidebar 功能:側欄顯示設定輸入區域

(2)常見語法

CLEAR
功能 : 設定浮動元件位置 ( 可設無、左邊、右邊、兩邊 ) 語法 : { CLEAR : NONE︱LEFT︱RIGHT︱BOTH } 範例 : {CLEAR:LEFT}
CURSOR
功能 : 設定滑鼠游標 ( 可設自動、十字、箭頭、手形、移動、改變 - 雙箭頭、文字、等待、求助 ) 語法 : { CURSOR : AUTO︱CROSSHAIR︱DEFAULT︱HAND︱MOVE︱E-RESIZE︱NE-RESIZE︱NW-RESIZE︱N-RESIZE︱SE-RESIZE︱SW-RESIZE︱S-RESIZE︱W-RESIZE︱TEXT︱WAIT︱HELP }

DISPLAY
功能 : 設定是否顯示語法 : { DISPLAY : NONE }

這個性質可設定整個元件要不要顯示，以及顯示的方式。它可用的參數這裡一一介紹。none代表不顯示，且此元件不占任何空間。block代表顯示，並視為區塊，前後緊臨的元件將換行顯示。inline代表顯示，但前後緊臨的元件會排在其左右，並不會換行。list-item代表顯示，與block大致相同。 table-header-group只能用在（不知道這個新標籤請至RONDO的HTML教學看看），代表表格在多頁時（如列印），此區之表格將會自動加在有此表格之頁面的第一列。table-header-group與table-footer-group相似，但用於，作用是表格在多頁時，此區之表格將會自動加在有此表格之頁面的最末列。IE4.0不支援block、inline、list -item這三種設定。使用範例如display:none此元件就被隱藏了

FLOAT
功能 : 設定浮動元件接續位置語法 : { FLOAT : NONE︱LEFT︱RIGHT }

HEIGHT
功能 : 設定元件高度 (可設單位屬性 : 點pt、英寸in、公分cm、像素px、百分比%) 語法 : { HEIGHT : AUTO︱( length )︱( percentage ) } 範例 : {HEIGHT:10pt}

@IMPORT
功能 : 設定輸入排版樣式語法 : @IMPORT URL ( url )

LEFT
功能 : 設定元件左邊位置 ( 可設單位屬性 : 點pt、英寸in、公分cm、像素px、百分比% ) 語法 : { LEFT : AUTO︱( length )︱( percentage ) }

LIST-STYLE
功能 : 設定條列項目符號語法 : { LIST-STYLE : KEYWORD︱POSITION︱URL ( url ) }

LIST-STYLE-IMAGE

功能 : 設定條列項目符號形狀 ( 可設無、圓形、圓圈、正方形、小數點、羅馬符號、希臘符號 ) 語法 : { LIST-STYLE-TYPE : NONE︱DISK︱CIRCLE︱SQUARE︱DECIMAL︱LOWER-ROMAN︱UPPER-ROMAN︱LOWER-ALPHA︱UPPER-ALPHA }

MARGIN

功能 : 設定文字和邊緣距離 ( 可設單位屬性 : 點pt、英寸in、公分cm、像素px、百分比% )
語法 : { MARGIN : AUTO︱( length )︱( percentage ) }

這個性質一次設定上、下、左、右邊界與區塊外之元件間格距離。使用時應依序指定上、右、下、左，如margin:3px 2px 5px 1px。亦可一次指定四邊，如margin:2px，則全部均設2px。

MARGIN-BOTTOM

功能 :設定文字和下邊緣距離 ( 可設單位屬性 : 點pt、英寸in、公分cm、像素px、百分比% ) 語法 : { MARGIN-BOTTOM : AUTO︱( length )︱( percentage ) }

MARGIN-LEFT

功能 : 設定文字和左邊緣距離 ( 可設單位屬性 : 點pt、英寸in、公分cm、像素px、百分比% ) 語法 : { MARGIN-LEFT : AUTO︱( length )︱( percentage ) }

MARGIN-RIGHT
功能 : 設定文字和右邊緣距離 ( 可設單位屬性 : 點pt、英寸in、公分cm、像素px、百分比% ) 語法 : { MARGIN-RIGHT : AUTO︱( length )︱( percentage ) }

MARGIN-TOP　
功能 : 設定文字和上邊緣距離 ( 可設單位屬性 : 點pt、英寸in、公分cm、像素px、百分比% ) 語法 : { MARGIN-TOP : AUTO︱( length )︱( percentage ) }

OVERFLOW
功能 : 設定容器元件顯示方法語法 : { OVERFLOW : NONE︱CLIP︱SCROLL }

這個性質是設定當區塊內包含的元件大於區塊之寬或高時，顯示的方法。可用值有auto（自動設定，當需要時出現捲軸）、scroll（強迫顯示捲軸，即使內部元件並無超過區塊邊界）、hidden（超出區塊的部份不顯示）、 visible（全部顯示，無視區塊大小）。最常用的是overflow:auto讓瀏覽器自動判斷

PADDING
功能 : 設定元件和邊緣距離 ( 可設單位屬性 : 點pt、英寸in、公分cm、像素px、百分比% ) 語法 : { PADDING : ( length )︱( percentage ) }

這個性質一次設定上、下、左、右邊界的間格距離。使用時應依序指定上、右、下、左，如padding:3px 2px 5px 1px。亦可一次指定四邊，如padding:2px，則全部均設2px。

PADDING-BOTTOM
功能 : 設定元件和下邊緣距離 ( 可設單位屬性 : 點pt、英寸in、公分cm、像素px、百分比% ) 語法 : { PADDING-BOTTOM : ( length )︱( percentage ) }

PADDING-LEFT

功能 : 設定元件和左邊緣距離 ( 可設單位屬性 : 點pt、英寸in、公分cm、像素px、百分比% ) 語法 : { PADDING-LEFT : ( length )︱( percentage ) }

PADDING-RIGHT
功能 : 設定元件和右邊緣距離 ( 可設單位屬性 : 點pt、英寸in、公分cm、像素px、百分比% ) 語法 : { PADDING-RIGHT : ( length )︱( percentage ) }

PADDING-TOP
功能 : 設定元件和上邊緣距離 ( 可設單位屬性 : 點pt、英寸in、公分cm、像素px、百分比% ) 語法 : { PADDING-TOP : ( length )︱( percentage ) }

PAGE-BREAK-AFTER(or BEFORE)

功能 : 設定元件後加分頁符號語法 : { PAGE-BREAK-AFTER : AUTO︱LEFT︱RIGHT︱ALWAYS } (BEFORE同)

POSITION

功能 : 設定元件位置 ( 可設絕對、相對、靜態 ) 語法 : { POSITION : ABSOLUTE︱RELATIVE︱STATIC }

TOP

功能 : 設定元件上方位置 ( 可設單位屬性 : 點pt、英寸in、公分cm、像素px、百分比% ) 語法 : { TOP : AUTO︱( length )︱( percentage ) }

VERTICAL-ALIGN

功能 : 元件垂直調整語法 : { VERTICAL-ALIGN : BASELINE︱MIDDLE︱SUB︱SUPER︱TEXT-TOP︱TEXT-BOTTOM︱TOP︱BOTTOM }

VISIBILITY
功能 : 設定是否可見( 可設可見、隱藏、繼承 ) 語法 : { VISIBILITY : VISIBLE︱HIDDEN︱INHERIT }

設定此元件要不要顯示，這個性質與display有相似之處，但不相同。可用值有visible（顯示）、inherit（貼附，如此元件所在之父元件可見，則此元件為可見，反之亦然）、hidden（隱藏，但仍占有空間，此與display:none不同）。用法如visibility:hidden則可隱藏此元件。

WIDTH　
功能 : 設定元件寬度 ( 可設單位屬性 : 點pt、英寸in、公分cm、像素px、百分比% ) 語法 : { WIDTH : AUTO︱( length )︱( percentage ) }

此性質可設定區塊的寬度，可用單位或百分比法來指定其值，或是用特徵字auto。如width:30px或width:50%均是可行的方法，而width:auto代表讓瀏覽器幫你決定。至於百分比法是依據其父元件的大小來決定的。

當您看到這時，恭喜你！你已經具備了惡搞Blog範本的能力！

标签：部落技术

订阅：博文 (Atom)

EEEE

星期日, 十二月 14, 2008

blogger 的基础知识图解

Blogger beta：图片解剖Blogger beta模板代码

HTML=

星期六, 十二月 13, 2008

超簡單文字美化

星期三, 十二月 10, 2008

Blog 基本修改注意事項

Blog範本基本語法值概念

Search

Author

Labels

Recent Comments

Syndication

Blog Archive

Provider & Logos