文章分类（标签）太多，怎么能分两行

有些博客上的分类标签太多，可是显示的是一列，空的很多大的空间，怎么能让他变两行或更多呢？
更動之前，首先也需備份你的模板，進入blogger後台→修改HTML→勾選展開小裝置範本，找到以下這一行，

<b:widget id='Label1' locked='false' title='文章分類' type='Label'>

或是label1這個關鍵字，按下ctrl+F，就會跳出搜尋框。

看到下面的

<div class='widget-content'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'>
<data:label.name/>
</span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'>
<data:label.name/>
</a>
</b:if>
<span dir='ltr'>(<data:label.count/>)</span>
</li>
</b:loop>
</ul>

將

<ul>改成<ul id="tags">

再將

<span dir='ltr'>(<data:label.count/>)</span>

置換成以下這行

<data:label.name/> (<data:label.count/>)

()，代表的是這個分類的文章數量，如果不想顯示可以拿掉。
因為我們在上面增加了一個id為tags，所以要在css裡追加這個tags的定義，

.sidebar #tags li {
float:left;
width:90px;
}

寬度就視你的邊欄寬度除以2，大概再減20px左右，譬如我的欄位為430px，我的寬度設定為190剛好可容納，可以自己慢慢調整，如果你的欄位更寬，譬如600px，寬度你設180px，也可將分類弄成3行的情況。

另外如果你的標籤會重複出現兩次，記得將

<data:label.name/> (<data:label.count/>)

前面的

<data:label.name/>移除，只剩下(<data:label.count/>)

即可，這是我自己測試的結果，因為每個模版的結構有些不同，所以還是要自己找到問題點慢慢修正，因為我測試過另一個網站並沒有這種情形，而是正常的執行。

最後記得，如果你將新增小工具裡的標籤移除後，要重新放上標籤時，上面的html語法要重新再裝上才能生效，有興趣的朋友可以試看看。




了解更多信息！

Read more...

怎么让过长的边栏缩短用卷轴来看

首先這個元件須先存在才能修改，記得一樣要備份你的原始模板，

後台→版面配置→修改HTML，展開小裝置範本

１‧在CSS區放入以下程式碼，這是捲動區的定義，記得一定要用scrolling2或是3.4.5..，不可以用scrolling，因為這個scrolling已有內部定義，不能使用的。

#scrolling2 {
overflow: auto; height: 400px; width: 100%;
background-color:#000; border:0px solid #000;
margin-bottom: 20px; padding:0px; font-size: 12px;
color: #f2984c; text-align: left;
}

高度height: 100px，可以自己調整，我是調整250px，讓整個元件趨近正方形，當然相關的設定，如顏色或是大小，都可自行調整。

２‧找到這個元件的位置，譬如我的元件是「我追蹤的網誌」，按下Ctrl+F，出現搜尋框，然後貼上妳要找的文字--我追蹤的網誌，就可以找到這個元件的位置，

<b:widget id='BlogList2' locked='false' title='我追蹤的網誌' type='BlogList'>

然後往下找，會看到

<div class='widget-content'>

這就是這個元件的內容，在上面加一行語法

<div id='scrolling2'>

當然也要有相對應的語法做結束，通常是在下一個元件的上面

往下找到

</b:includable>

在這個語法上面加上

</div>

按下儲存即可，回到部落格上你就會看見你的元件出現捲軸。

另外有種widget是新增 Html/JavaScript小工具產生的，就不用像上面這樣改，只要在修改Html裡加入scrolling2的定義，譬如我現在用的最新回應的 Hacks，然後在小工具裡的Html/JavaScript程式碼裡，最前面加上

最後面加上

把程式碼包起來即可，按下儲存就可以了，當然你要照上面這樣修改也是可以的。

在未修正前，因為不想讓元件佔版面太長，所以只顯示最新5則留言，

修正後，可以用捲動軸控制，所以最新回應設定顯示10則，想看的人再利用滑鼠移動即可。

所以可以視你的版面設計和編排來利用Scrollbar這個功能，讓版面更簡潔與美觀，也讓讀者不會有頁面太長的負擔。




了解更多信息！

Read more...

Blogger教学课程

Blogger模板教学课程——1概说及基本结构
Blogger 模板教学程---2.CSS外观解说
Blogger 模板教學課程---3HTML內容架構
怎么（如何）打造漂亮blogspot模板教学课程系列专辑

相关系列：

CSS属性列表
CSS教程，简单易懂，一看就会系列专辑
了解更多信息！

Read more...

怎么（如何）打造漂亮blogspot模板教学课程系列专辑

怎么在文章中添加代码呢
怎么给站点加入漂亮rss订阅数图标
怎么给站点加入上下卷轴的公布栏（文章）
在评论栏留言怎么通过高亮区分作者与网友

相关系列

CSS教程，简单易懂，一看就会系列专辑
Blogger教学课程
了解更多信息！

Read more...

CSS属性列表

属性名称 字体属性（Font） font-family font-style font-variant font-weight font-size 颜色和背景属性 Color Background-color Background-image Background-repeat Background-attachment Background-position 文本属性 Word-spacing Letter-spacing Text-decoration Vertical-align Text-transform Text-align Text-indent Line-height 边距属性 Margin-top Margin-right Margin-bottom Margin-left 填充距属性 Padding-top Padding-right Padding-bottom Padding-left 边框属性 Border-top-width Border-right-width Border-bottom-width Border-left-width Border-width Border-color Border-style Border-top Border-right Border-bottom Border-left Width Height Float Clear 分级属性 Display White-space List-style-type List-style-image List-style-position List-style 鼠标（Cursor）属性

属性含义 使用什么字体 字体是否斜体 是否小体大写 字体的粗细 字体的大小 定义前景色 定义背景色 定义背景图案 重复方式 设置滚动 初始位置 单词之间间距 字母之间间距 文字装饰样式 垂直方向位置 文本转换 对齐方式 首行缩进方式 文本的行高 顶端边距 右侧边距 底端边距 左侧边距 顶端填充距 右侧填充距 底端填充距 左侧填充距 顶端边框宽度 右侧边框宽度 底端边框宽度 左侧边框宽度 一次定义宽度 设置边框颜色 设置边框样式 一次定义顶端 一次定义右侧 一次定义底端 一次定义左侧 定义宽度属性 定义高度属性 文字环绕 哪一边环绕 定义是否显示 怎样处理空白 加项目编号 加图案 第二行起位置 一次定义列表 自动 定位“十”字 默认指针 手形 移动 箭头朝右方 箭头朝右上方 箭头朝左上方 箭头朝上方 箭头朝右下方 箭头朝左下方 箭头朝下方 箭头朝左方 文本“I”形 等待 帮助

属性值 所有的字体 Normal、italic、oblique Normal、small-caps Normal、bold、bolder、lithter等 Absolute-size、relative-size、length、percentage等 颜色 颜色 路径 Repeat-x、repeat-y、no-repeat Scroll、Fixed Percentage、length、top、left、 right、bottom等 Normal 同上 None|underline|overline|line- through|blink Baseline|sub|super|top|text-top|middle|bottom|text-bottom| Capitalize|uppercase| lowercase|none Left|right|center|justify | Normal||| Length|percentage|auto 同上 同上 同上 Length|percentage 同上 同上 同上 Thin|medium|thick|length 同上 同上 同上 同上 Color None|dotted|dash|solid等 Border-top-width|color等 同上 同上 同上 Length|percentage|auto Length|auto Left|right|none Left|right|none|both Block、inline、list-item、none Normal、pre、nowrap Disc、circle、square等 |none Inside、outside || Auto Crosshair Default Hand Move e-resize Ne-resize Nw-resize n-resize Se-resize Sw-resize s-resize w-resize Text Wait Help

了解更多信息！

Read more...

Blogger 模板教學課程---3HTML內容架構

看过了Blogger 模板教学程---2.CSS外观解说再进一步了解Blogger 模板教學課程---3HTML內容架構
属性列表参考CSS属性列表
我們先來看基本的架構，這是在"展開小裝置範本"前，通常這就是最基本的狀態，在還沒有加入任何widget小元件的原始模樣，如下圖，







大致分為out-wrapper(整個頁面)、header-wrapper(標頭區)、 content-wrapper(主要內容區)、main-wrapper(主文區)、sidebar-wrapper(邊欄區)及footer- wrapper(頁尾區)六大部分，其中content-wrapper是包含了main及sidebar兩區塊，你想在哪個地方插入語法，記得在相對應的部分插入，而勾選展開小裝置範本之後，就會展開全部網站的html語法架構圖，有興趣的人可以慢慢研究。

初學者如果想認識這一塊，首先要知道的就是


<div id='content'>
代码
</div>


div就是division(部分)的簡寫，代表的就是一個區塊，而content就是這個區塊的名稱定義，而且要以
代表這個區塊的結束，一定要兩者並存，你可以看到上圖content-wrapper的結束< /div>是在sidebar-wrapper下方，才代表這個區塊的結束，如果沒有對對配合，少一個或是多一個，都會造成版面的錯亂，讓你無法儲存template，顯示錯誤訊息。

而這個區塊裡面，通常你會看到會裝一些基本的元素，標頭、文章、邊欄、頁尾等等，語法如下：

<b:section class='header' id='header'>

指的就是網頁元素，這就是區塊內的配置， 通常最後會搭配一個來結束語法，而在這裡面的
，這是網頁元素裡包裹的小裝置，比如上圖main-wrapper裡的widget就是這個網頁元素的小裝置，就是你的文章，或是一般我們加到邊欄（sidebar）的東西，比如最新文章或是最新回應等元件，這裡同樣也會需要相對應的結束語法，而這個widget 是可以拖曳的。
像上面footer-wrapper並沒有看到，但是我們展開小裝置範本後就會看到。

所以可以了解html語法是以層層包裹的型態為主，一直漸漸往外擴大，構成了一個網頁的產生，這個專有名稱稱為"巢狀結構"。

以標頭區舉例來說明，

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Google Maps (HEAD)' type='Header'/>
</b:section>
</div>


先以header-wrapper定義這個div的部份，然後裡面是放header這個網頁元素，裡面放的小裝置就是Header1，同樣的展開小裝置後才會看到結束語法，如。

其實這些相關語法在Blogger官方的說明裡面都有詳細的解說，

可以參考

版面配置的網頁元素標記((介紹section、widget用法)
以下兩篇較高階，建議有基礎後再來研究
版面配置的小裝置標記

版面配置資料標記

通常會修改這個地方，是因為下列幾項原因：
‧ 在每篇文章上放上書籤等收藏的貼紙連結
‧ 相關文章Hacks的使用
‧ 回應區，作者與網友回應顏色或字體的區別
‧ 拿掉原始模版裡的廣告或是貼紙連結
‧ 在展開文章後插入AdSense廣告碼
‧ 放上Google Analystic的程式碼(有人是以新增小工具完成，我是直接加在html裡)
‧ 加上自己設計的區塊

這篇大概到這裡完成，介紹基本架構，較詳細的細節可以到CSS教程，简单易懂，一看就会系列专辑再介紹了。

了解更多信息！

Read more...

Blogger 模板教学程---2.CSS外观解说

看过了Blogger模板教学课程——1概说及基本结构多少了解了，现在进一步了解
Blogger 模板教学程---2.CSS外观解说

看过模板基本结构的介绍后应该有些了解了，但还是有些抽象，这里用实际的图示展现各个板块的组成和所起到的作用




首先我們大概來看整個網頁的CSS結構配置圖，如下：






配合上圖來說明，
‧ body（深绿色）：整個網頁的主體，通常不用設寬度，只要設底色，但如果有用固定背景圖，則建議要設，控制網頁的展示。

‧ outer-wrapper（淺黃色）：網頁大小layout的範圍，如果你想設計1024*768大小的模板，在此就要定義width的大小(例如width:990px;)，如果你想依解析度大小彈性運用，這裡就要設百分比（如width:95%;）

‧ header-wrapper（紅色）：標題區塊的大小，這個網頁元素通常包含
#header這個元素及.description（網誌形容）

通常很多人會放圖片，使用網頁元素裡的標頭編輯可以插入圖片，但綸太郎建議不要這樣做，因為有時會縮減你的原始圖片，所以還是利用修改css碼來放圖片比較能放到你想放的位置，也能控制圖片大小，語法為

background: #00ffff url(" 图片网址") no-repeat;


有时不成功，試著改成

background-image: #00ffff url("图片网址") no-repeat;


為什麼要加上#00ffff，這是標頭區的背景顏色（可自設），有時背景圖比較慢顯示或是叉燒包，至少還有背景顏色可看到，不會一片空白，或是跑出底色。
※ 如果你想將標題分成兩部份，像這篇如何將標題(頭)分兩欄，加入網頁元素的作法，那麼會有#header及#header-right兩個定義，兩者加起來就不能大於header-wrapper的寬度，否則元素會被推到下方去。

‧ content-wrapper（橘色），包含main-wrapper＋sidebar-wrapper，寬度要設好，通常都要預留邊界的空間，很多時候sidebar往下掉，就是因為寬度不夠，譬如文章裡的圖片超過post的寬度，或是sidebar裡的元件widget超過sidebar設的寬度，而這些都可以透過修改寬度來避免，或是利用overflow:hidden;來設定。

‧ main-wrapper（綠色），主文區（#main），包含
* 文章標題（.post h3）,通常會和日期（.date-header）擺一起
* 內容（.post）
* 文章相關資訊（.post-footer），如創作者(posted by)、發佈時間、意見及文章分類等，這部份很多人勾選了版面配置的網誌文章編輯，還是無法控制這些元素的出現或隱藏及移動位置，通常原因是出在你使用的模板不是官方設計的，所以更改後還是沒有效果，這時就要利用html裡面的語法來作調整，這以後再談。
* 意見區（comments）。
這裡可以加些讓文章內容格式更漂亮、更專業的元素，例如利用
‧ blockquote，引用他人文章的區塊設計。
‧ code，程式碼的外觀設計。
‧ 讓文字加上底線，顯示重要性。
這些透過Google查詢都可以取得相關的教學文章。

‧ sidebar-wrapper（粉色），sidebar邊欄的配置，這裡可以放網頁元素，很多小工具widget的地方，有的模板會分兩欄或常看到的三欄式，或是綜合式（多欄）模板，這裡寬度控制更要留心，儘量讓你的widget寬度與邊線預留5px的空間。

‧ footer-wrapper（蓝色），頁尾，通常綸太郎會放網站連結及版權宣告、模版設計來源，後台登入等資料，


這裡常看到的定義h1、h2、h3，這些通常用來定義元素的標題大小，從h1~h6都有，常見的是，
#header h1，網站標題
.post h3，文章標題
h2.date-header，每篇文章日期的格式
.sidebar h2 ，邊欄的標題，例如最新文章、最新回應
#comments h4，意見，文章下方顯示幾則意見的文字格式。
大部分模板都是如此定義，但也有少數有自己獨特定義的型態。

另外CSS裡的元素定義名稱，每個模版都不盡相同，須靠自己判斷，尋找類似意思的名稱即可，以上為CSS外觀的結構大綱說明，細節部份等下篇Blogger 模板教學課程---3HTML內容架構再談了。



了解更多信息！

Read more...

在评论栏留言怎么通过高亮区分作者与网友

怎么（如何）打造漂亮blogspot模板教学课程系列专辑

在评论栏留言怎么通过高亮区分作者与网友

博客流量大了，评论多了，看的有些眼花缭乱，通过什么来区分，能使眼睛看的舒服些呢？

好了，现在跟大家分享：

先备份原始模板
后台 页面设置，选修改html，勾选展开小窗口范本
找到

<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>

然后以下列代码替换

<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<b:if cond='data:comment.author == data:post.author'>
<p>
<div class='comment-me'>
<data:comment.body/>
</div>
</p>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</b:if>
</dd>

这里有了个新的定义红色部分

然后在css中添加.comment-me定义

.comment-me {
margin-right: 35px;
margin-bottom: 5px;
color: #666666;
font-size: 8pt;
line-height: 1.5em;
background-color: #E0ECFF;
border: 1px dotted #C0C0C0;
padding:5px;
}

高亮区的外观就在这个定义里修改，包括颜色，距离，行距，等。自己设计，变化多样。

注意：我在用代码时发生过以下问题怎么解决了，主要是思路问题。
例如：找不到这些代码，那是由于你这个模板已被多人修改。
例如：~~~~~~~~~~~~~~~

好了，就分享到这，有问题，我们多交流。

參考來源：
How to Style and Highlight Author Comments




了解更多信息！

Read more...

怎么给站点加入上下卷轴的公布栏（文章）

怎么（如何）打造漂亮blogspot模板教学课程系列专辑

怎么给站点加入上下卷轴的公布栏（文章）

blogspot的博客一般都很简单，怎么能丰富内容呢？

推荐一个方法，给你的站点 做一个公布栏（原是使文章有上下卷轴）例如下图：



打开布局 选页面设置，添加小工具，选html后添加以下代码：

<div style="border:2px solid #1AC300;background-color:#ffffcc;padding:5px;height:160px; width:95%; overflow:auto;">
填写你的链接文字及图片
</div>


注意文章中也可以

一用法:
(替換語法時，注意style=""中的內容，每一部分用"分號 ;"隔開，接著空一格。)

1.當"內容區域"大於"顯示區域"時，可利用捲軸讓看見超出範圍的內容。利用滑

鼠游標調整"顯示區域"，滑鼠游標點選捲軸，會變成可調整大小的狀態，可隨

心所欲的調整大小，語法中的width和height也會隨著變。

PS:去除width:10px的元素，寬會自動擴展到最大。


2.語法( OVERFLOW: scroll )為顯示右方和下方捲軸。整個還可以分別替換成

★( OVERFLOW: auto ) : "內容區域"大於"顯示區域"會自動顯示捲軸，建議使用。

★( OVERFLOW: scroll; OVERFLOW-X: hidden ): 刪除水平→捲軸。

★( OVERFLOW: scroll; OVERFLOW-Y: hidden ): 刪除垂直↑捲軸。

★( OVERFLOW: hidden) : 不使用捲軸。



3.語法( background-color: #996600 )為框框內的背景顏色，#996600 部分為16進位顏

色碼(?)，可在查詢 4096 Color Wheel ，記得要加上"#"。

PS.整段刪除，背景變成透明狀態。




二.為捲軸加外框

基礎語法(見上面1.基本捲軸)中，在style="__"中，在__的地方加入( BORDER: #ff0000 5px dotted )，

加入後，切換編輯列上""(?點我)兩次後，在回到"模式"(?點我)中就會
見到，( BORDER: #ff0000 5px dotted )被拆成四部份分別BORDER-RIGHT(右邊框)，BORDER-TOP(上邊框)，BORDER-LEFT(左邊框)， BORDER-BOTTOM(底邊框)變成
(BORDER-RIGHT: #ff0000 5px dotted;
BORDER-TOP: #ff0000 5px dotted;
BORDER-LEFT: #ff0000 5px dotted;
BORDER-BOTTOM: #ff0000 5px dotted )。

用法:
(BORDER: #ff0000 5px dotted)或(BORDER-RIGHT: #ff0000 5px dotted; BORDER-TOP: #ff0000 5px dotted; BORDER-LEFT: #ff0000 5px dotted; BORDER-BOTTOM: #ff0000 5px dotted )都有共同結構，分析如下:

( BORDER: #ff0000 5px dotted )

★(#ff0000)框的顏色，#996600 部分為16進位顏色碼(?)，可在查詢
4096 Color Wheel ，記得要加上"#"，依框的屬性上下左右可調整不同顏色。
★(5px):框的大小,數字越大，框就越粗。0為無框。

★(dotted):框的類型，(dotted)為"點"的型態，可替換其他的有 實線:( solid )，

虛線:( dashed )，立體內凸框:(groove)，立體浮凸框: (ridge)，

雙實線: (double)，凹框: ( inset)，凸框: (outset)，依框的屬性可調整上下左

右使用不同屬性的框。


三.為捲軸調色:

■( SCROLLBAR-FACE-COLOR: )拖曳棒與按鈕表面顏色。

■( SCROLLBAR-HIGHLIGHT-COLOR: )捲軸與按鈕四周內邊框左上

立體亮面的顏色。

■( SCROLLBAR-SHADOW-COLOR: )捲軸與按鈕四周內邊框右下立

體暗面的顏色。

■( SCROLLBAR-3DLIGHT-COLOR: )捲軸與按鈕四周外邊邊框左上

立體亮面的顏色。
■( SCROLLBAR-ARROW-COLOR: )按鈕箭頭▲▼顏色。

■( SCROLLBAR-TRACK-COLOR: )捲軸軌道的顏色。

■( SCROLLBAR-DARKSHADOW-COLOR: )捲軸與按鈕四周外

邊框右下立體暗面的顏色。

■( SCROLLBAR-BASE-COLOR: )捲軸整體的顏色，單獨使用效果

比較明顯。


以上的語法後面加上(#777777)為16進位顏色碼(?)，可在查詢 4096 Color Wheel ，

記得要加上"#"


四.變化應用:
1.左側拖曳棒

<DIV style="OVERFLOW: scroll; DIRECTION: rtl; HEIGHT: 60px; BACKGROUND-COLOR: #996600">
<DIV style="DIRECTION: ltr" align=left>添加文字图片链接</DIV></DIV>

2.隱形的捲軸(只看的見按鈕箭頭▲▼)

<DIV style="SCROLLBAR-FACE-COLOR: #996600; SCROLLBAR-HIGHLIGHT-COLOR: #996600; OVERFLOW: auto; SCROLLBAR-SHADOW-COLOR: #996600; SCROLLBAR-3DLIGHT-COLOR: #996600; SCROLLBAR-TRACK-COLOR: #996600; SCROLLBAR-DARKSHADOW-COLOR: #996600; HEIGHT: 60px; SCROLLBAR-ARROW-COLOR:#FF0000; BACKGROUND-COLOR: #996600">添加文字图片链接</DIV>

3.透明的捲軸

<DIV style="FILTER: Chroma(Color=green); HEIGHT: 1px">
<DIV style="SCROLLBAR-FACE-COLOR: green; SCROLLBAR-HIGHLIGHT-COLOR: red; OVERFLOW: auto; SCROLLBAR-SHADOW-COLOR: green; SCROLLBAR-3DLIGHT-COLOR: green; SCROLLBAR-ARROW-COLOR: red; SCROLLBAR-DARKSHADOW-COLOR: red; HEIGHT: 60px; BACKGROUND-COLOR: #996600">添加文字图片链接</DIV></DIV>

4.發光的捲軸

<DIV style="FILTER: Chroma(Color=green)glow(color:6666ff,Strength=6); HEIGHT: 1px">
<DIV style="SCROLLBAR-FACE-COLOR: green; SCROLLBAR-HIGHLIGHT-COLOR: red; OVERFLOW: auto; SCROLLBAR-SHADOW-COLOR: green; SCROLLBAR-3DLIGHT-COLOR: green; SCROLLBAR-ARROW-COLOR: red; SCROLLBAR-DARKSHADOW-COLOR: red; HEIGHT: 60px; BACKGROUND-COLOR: #996600">添加文字图片链接</DIV></DIV>

5.加上背景的捲軸

★背景不跟捲軸移動

<TABLE width="100%" background=背景圖片連結><TBODY><TR><TD vAlign=top align=left><DIV style="OVERFLOW: auto; HEIGHT: 60px">添加文字图片链接</DIV></TD></TR></TBODY></TABLE>

★背景跟卷軸移動

<DIV style="OVERFLOW: auto; HEIGHT: 60px"><TABLE width="100%" background=背景圖片連結><TBODY><TR><TD vAlign=top align=left>添加文字图片链接</TD></TR></TBODY></TABLE></DIV>

好了，快去添加吧

参考来源
http://lucky-super-man.spaces.live.com/Blog/cns!4805CDF99BC60F1E!129.entry




了解更多信息！

Read more...

怎么给站点加入漂亮rss订阅数图标

怎么（如何）打造漂亮blogspot模板教学课程系列专辑

一个站点希望有很多的订阅者，实现办法有很多，这里给大家介绍一个即美化主页，又会增加订阅数的简单办法。

如何给站点加入漂亮rss订阅数图示呢？

简单说起来就是用ps做个适合边栏的长条，然后添加上订阅漂亮的图标，吸引网友注意，并且很方便的点击订阅，呵呵，还是看具体详情吧：

我写下我的制作方法，你可以举一反三，自己修改创新

首先我预设用边栏呈现订阅图标，我边栏大概210xp，我用ps做个宽200xp高60xp的长条，并且用些图片拼接而成这张图：



然后把它上传到你的空间，加在小工具 html板块里 加上订阅链接就ok了。

很简单，你还想在衍生更好的效果么？

呵呵，当然，我们把FeedBurner在线订阅图标加在这张图上：办法如下

在FeedBurner获得的图标地址后

首先在你的css定义区添加以下定义：

#subscribebox {
width: 200px;
height: 60px;
margin: 5px 0 0 5px;
background: transparent url(你上传到空间的图片地址) no-repeat;
}
#subscribebox a {
display:block;
width: 200px;
height: 60px;
}
#subscribebox img {
margin-left:15px;
margin-top:25px;
}

这上面的#subscribebox与#subscribebox a就是设置RSS背景图的高度，宽度，而

#subscribebox img {
margin-left:15px;
margin-top:25px;
}

就是设置你FeedBurner在线订阅图标在图片上的位置，自己调到适合要求，就ok了。

剩下的就是，打开布局，页面设置，添加小工具，添加html工具，放进代码即可，例如：

<div id="subscribebox">
<a href="你的订阅地址" title="订阅......最新文章"><img width="88" style="border:0" alt="...的RSS" src="你在FeedBurner获得的订阅数代码地址" height="26"/></a></div>

例子：我的html板块添加的代码：

<div id="subscribebox"><a href="http://feeds2.feedburner.com/Avooo" target="_blank" title="訂閱avooo最新文章"><img width="88" style="border:0" alt="avooo的文章" src="http://feeds2.feedburner.com/~fc/Avooo?bg=ffcc00&amp;fg=444444&amp;anim=1&amp;label=listeners" height="26"/></a></div>

方法很多种，思路更重要




了解更多信息！

Read more...

Blogger模板教学课程——1概说及基本结构

Blogger模板教学课程——1概说及基本结构

Blogger的博客有着自定义最自由的好处，别家博客都没法比，可是对于普遍网友，又没办法实现“自由”原因就是代码不是人人都懂，那怎么办呢？

去学吧网上的很多课程都太多内容，不容易吸收，没有针对性，怎么能快速了解代码，并且很快的用上呢？

好了，这里有专门给普通网友们看的学习代码文章，通俗易懂，文章短小，针对性强，一看就会。
下面给大家介绍吧。

首先介绍Blogger博客官方模板用的代码语言css

我们进入Blogger的后台

在一般模板中主要分两大主体，
1， css，代表网页的外观，例如字形大小，颜色，外框，图片设定等。
2， html，代表网页的结构与内容，包括版面的排版设定（例如首页最上横幅在最上方，那就先写横幅框代码，同样若最好写，那横幅就出现在首页最下方了）在blogger的使用里，是使用xhtml，比html更严谨且简洁，也是最新版本。


整个版本可以分成

.网页文件宣告（最上方到＜ｈｅａｄ＞ 之间）
.外观css设定及网站文件资讯（ ＜ｈｅａｄ＞到＜／ｈｅａｄ＞）
.内容结构html语法（＜ｂｏｄｙ＞到＜／ｂｏｄｙ＞）

如下图：





在模板最上方的文件宣告，功能是告诉浏览器你使用的xhtml版本及参考的文件来源

接下来的head是文件的标题，说明网站或是文件的相关讯息，告诉浏览器你的网站名称，文章标题，作者，使用的关键字，外部链接等讯息，另外网址出現的小icon也是在此定义。


/* Variable definitions，这部份就是字型及顏色、大小的设定，如果沒有这部份，那么版面配置里的字型与顏色也無法作用，常有人問为什么我改了字型与顏色，都沒有产生变化，那就是因为该元素沒有在此定义。


从body{ 到 ＜/head＞ ，这就是CSS外觀設計，這裡就是大家最頭痛的地方，怎樣讓你的版面更美，更賞心悅目，是要經過一次又一次的測試，調整顏色、距離、文字大小，設計特別的圖案顯示，都在這裡完成。


從＜body＞到＜/body＞，則是HTML內容結構設計，讓每個網頁元素的排列組合符合你的要求，比如兩欄變三欄，除了多了邊欄（sidebar）的定義css，在html也是要加上相關的語法才能完成。

好了，先到这吧。



了解更多信息！

Read more...

怎么在文章中添加代码呢

blogger博客非常好，大家都知道，可就是不能在文章中写代码，大家也知道，可怎么办呢？大家都不知道，我知道，呵呵。写的真绕口！！
办法如下：
1.加上css （在css中定义）

CODE {
display: block; /* fixes a strange ie margin bug */
font-family: Courier New;
font-size: 8pt;
overflow:auto;
background: #f0f0f0 url(http://klcintw.images.googlepages.com/Code_BG.gif) left top repeat-y;
border: 1px solid #ccc;
padding: 10px 10px 10px 21px;
max-height:200px;
height:200px; // for IE6
line-height: 1.2em;
}


2.将代码写在<code></code>之中，例如：

<code>.comment-body-author {<br /> margin:0;<br /> padding:0 0 0 20px;<br />
background-color:#C0C0C0;<br /> }</code>

效果

.comment-body-author {
margin:0;
padding:0 0 0 20px;
background-color:#C0C0C0;
}


还有一种办法看看

代码部分

实现办法是

<br /><center><form><textarea rows="3" cols="50" readonly>代码部分</textarea></form></center><br />


另外提供个在线代码辅助連上Postable網頁在线写代码，打开网页后，把你的代码粘贴上点右下方按钮，得到的结果，就可以在文章中正常表示了。


呵呵，就这么简单，我知道了，所以 分享 给大家



了解更多信息！

Read more...

网页素材，rss，设计，时钟，关于iGoogle与Google Sites，Blogger，WordPress 等网址大全

网页素材，rss，设计，时钟，关于iGoogle与Google Sites，Blogger，WordPress 等网址大全 ：
1.关于WordPress
WordPress歡樂正體中文交流
wordpress.com.tw
WordPress官網
WordPress官網
在免費空間上架設自己的部落格的基本要件如下：
1、下載最新版的WordPress.org（2008.6最新版為2.5.1）
2、申請免費空間，主機需支援PHP4.3及MySQL 4.0以上版本
3、下載FTP軟體，如FileZilla、CuteFtp，將檔案上傳資料庫
4、申請獨立網址及轉址服務（不申請也行，不過大部份免費空間的網址都在第二層域名，例如htttp:// hostname.mydomain.com/blog）
名詞網解：

PHP，一種腳本語言，用來處理動態網頁的語言。
MySQL，意思是資料庫或稱數據庫，通常申請後會給我們一個帳號來管理，可以應用在論壇、留言板等。
建議安裝前先看看相關的文章，可參考

wordpress.com.tw
無痛系列，1、2、3
無痛安裝 WordPress 前傳-工具篇-FileZilla
香腸炒魷魚
[推薦]用免費空間架設wordpress
WordPress 圖文安裝教學

要架設網站的免費空間（或稱虛擬主機），其後台管理介面〈主控台〉有多種型態，主要有以下四種：

LP〈LayeredPanel〉，空間較大（通常以G計算），速度較快，但限制較多，適合架設論壇或是大型網站，當然部落格也可以，可綁一個域名。
VP〈Vista control panel〉，空間較小（通常以MB計算），速度較慢，副檔名限制少，適合架部落格，可綁多個域名。
CP〈Cpanel〉，限制最少，空間最大，但是提供免費的空間也少，很多台灣付費的主機採此介面，例如5net、G型虛擬主機就是使用這套系統。
Plesk系統，應該沒有免費空間有提供，國內戰國策、補夢網及裕藍多媒體等等都是使用這介面。
讓部落格首頁與WordPress安裝在不同的目錄
免費資源網路社群--
Free Web Hosting - Runhost.net（250MB/200G、無廣告，不支援.htaccess）
Runhost.net - 免費 PHP + MySQL 空間，月流量 200GB！
101 Free Host（1G/8G、文字廣告、不支援.htaccess）
101FreeHost.com - 1GB/8GB 網頁免空，支援3個資料庫與網域綁定>
MyHosting247（5G/20G、文字廣告、LP空間，不支援.htaccess，我有申請）
MyHosting247 - 5GB/20GB 立即啟用的免費PHP空間！
HostingTribe （500MB/2G、無廣告，不支援.htaccess）
ZendURL - 500MB 網站空間，支援 CGI, PHP, ASP, SSI … 無廣告。
如果你還想找更多，可以到Free Webspace and Free Web Hosting Services，這裡有300個虛擬主機的資料供你參考。

免費資源網路社群 - 台灣最大的免費資源蒐集網站！
虛擬主機討論區 - WordPress歡樂正體中文交流所

2.关于iGoogle与Google Sites，Blogger
Google小工具---Custom iGoogle Skins

這是設計者的網站BonstioNet
介紹:Custom iGoogle Skins
Google Sites和Google Page Creator
如果想看看以Google Sites架設的網站，可以參考以下兩個網站
The Scott Family Site
Let's play
參考網站：

Google Sites
Google Sites Blog
Google 應用服務(Google Apps)
關於Google Sites系列文章(funP)
Google Sites Blog
Blogs of Note
The Big Storm Picture，就是以拍攝暴風雨相關的照片
Cupcakes Take the Cake，則是介紹各種杯子蛋糕
Blogger Buster
Blogger Help說明中心
Blogger Buzz發表關於Blogger各種資訊
Blogger in Draft的Blog所有Blogger在測試期beta的功能會在這裡發表
登入Blogger in Draft才能使用
Blogger Play這個網站會展示全世界以Google Blogger寫作的部落格，網誌上最新的照片
Known Issues for Blogger這裡會報告Blogger所遇到的bug錯誤
Blogger Error Codes常常安裝新的Blogger template或是小工具時會出現錯誤訊息，可以在這裡找到相關的錯誤代碼，解決你的問題，如果找不到可以到bX-code Reporting Form，提交你的錯誤訊息並描述，Google就會回應給你在這個網頁上。
Blogger Developers Network介紹Blogger可以利用的API工具
Blogger Status這裡會公佈Blogger服務器Serves某月某日某時不能利用的資訊
Google Inside AdSense Blog（繁體中文）介紹有關Google AdSense的資訊
Google Translate翻譯系統
Google Blog Directory，有分門別類，列出各種Google產品的部落格資訊


線上Youtube影片輪播器
弁天ツール這是一個日本網站，專門提供blog-parts及一些小工具
中文說明，可以參考這個網站 BlogDeco
日文版Blog-parts的網站

● Blog Parts Search，這是日本Google才有的服務，各種類的小玩意查詢。
● ブログパーツをさがせ，非常多，更新不快，但每次更新都有5個以上新的blog-parts，商業性的blog-parts很多，譬如股市分析，商業訊息之類的。
● ブログパーツ【画像で比較できる無料ブログパーツ情報図鑑】，也非常多，和上面那個網站差不多性質。
● ブログパーツ.com （blogparts.com），網站做得很棒，我很喜歡的站台。
● Blog Deco，有些需登錄帳號才可使用，有中文網站。
● 女の子が集まるかわいいブログサイト，女生專屬的blog-parts，有可愛的小花狗Rebacca。
● blogwasabi，有分類排行榜，蠻早期的網站。
● 蠍【サソリ】の空間，小玩意不多，但有一些小玩意是別的站沒有的。
● KuruKuru Parts，資源不多，但都很特別。
● フラッシュ時計，很多精美的時鐘。
● Nissan CUBOX，日產汽車3D模式的Blog-parts。
● Retired，部落格引退的小貼紙，當部落格想關站、中斷休息時可貼上。
● スーパー風シールメイカー，幫部落格做個超市的價格標籤，很有趣的貼紙。

博客时钟Blog Clock

3.其他

亞洲設計家的圖像網站startdrawing.org
全世界最大的圖像設計的社群網站deviantART
Shop區，則提供各種商業圖像的販售
精緻的日本和風設計圖庫 官網：HYBRIDWORKS
蘇俄圖像設計家的網站俄文官網
設計網站Блог дизайнфрика Креативные идеи, дизайн, виджеты, гаджеты, интерфейсы, юзабилити.
RSS ICON 系列文章
icon圖片 網站：Все для Веб мастера и создания сайта參考這個俄語教學網站
參考文章：Иконки: Irish Icons Pack
下載點>

4.網頁素材

Free Icons Web超過15000張的圖片
UtomBox订阅图标等
Wordpress模板
Iconaholic.com
Curo.jp這站長設計了各種顏色及大小的RSS圖形
Bambino Labs Kagami網站，讓你的照片產生倒影
高品質的ICON圖庫素材Websiteicons
製作屬於自己的背景圖案Tartan Maker
姊妹站，是設計條紋式的背景Stripe Generator>
免費圖庫的網站KAVEWALL STOCK，InterfaceLIFT
PUBLIC-DOMAIN-PHOTO.com提供許多風景圖片及日常生活用品的實景照片
Backgrounds Archive提供各種背景圖案，且有檢索的功能。
Crystal水晶，有著透明感的水晶圖案CrystalXP.net
DrinkRSS - Fresh Icons，這是以飲料為主的RSS設計圖樣
RSS Stamps by ~tayzar44 on deviantART ，類似郵票形式的RSS圖樣，
345 Free RSS Icons by ~Studiom6這個檔案比較大，有4種RSS圖示，各種大小尺寸 ，屬於實用型的。
Stock Vector: RSS Bot超酷的機器人RSS圖示
Блог дизайнфрика這個網站就是純欣賞用
Big Huge Labs做拼圖、日曆
Background Labs背景紋理圖案
表情符號最多的網站就是MSN即時通小圖網，Myem0.com，Cute Emoticon
e-まちタウン提供了桌布(壁紙)及網頁製作素材(ホームページ素材)、桌面Desktop(デスクトップアイコン)、賀卡(レターセット)及その他這一區是提供了信封、信紙的設計，
Dellustrations，圖像設計網站，資源豐富，Xyberneticos
ForRSS



了解更多信息！

Read more...