重要資訊內容 重要資訊內容 重要資訊內容 重要資訊內容 重要資訊內容 重要資訊內容 重要資訊內容

2009年4月2日星期四

CSS教程2.怎样编写CSS?

从上面的CSS教程1.CSS快速入门例子中,我们可以看到CSS的语句是内嵌在HTML文档内的。所以,编写CSS的方法和编写HTML文档的方法是一样的。
  您可以用任何一种文本编辑工具来编写。比如Windows下的记事本和写字板、专门的HTML文本编辑工具(Frontpage、Ultraedit等),都可以用来编辑CSS文档。
  那么您可能会问,独立编辑好的CSS文档怎样加入到HTML文档中呢?其实在第一章中的例子里已经介绍了两种方法。
  一种是把CSS文档放到<head>文档中:

<style type=“text/css”> ..... </style>

其中<style>中的“type=‘text/css’”的意思是<style>中的代码是定义样式表单的。

另一种方法是把CSS样式表写在HTML的行内,比如下面的代码:

<p style=“font-size:14pt;color:blue”>蓝色14号文字</p>

这是采用<Style=“ ”>的格式把样式写在html中的任意行内,这样比较方便灵活。   还有一种方法是:把您编辑好的CSS文档保存成“.CSS”文件,然后在<head>中定义。定义的格式是这样的:

<head> <link rel=stylesheet href=“style.css”>.....</head>

我们看到这里应用了一个<Link>,“rel=stylesheet”指连接的元素是一个样式表(stylesheet)文档。一般这里是不需要您改动的。
  而后面的“href=‘style.css’”指的是需要连接的文件地址。您只需把编辑好的“.CSS”文件的详细路径名写进去就可以了。这种方法非常适宜同时定义多个文档。它能使多个文档同时使用相同的样式,从而减少了大量的冗余代码。

  本章主要介绍了编写CSS的方法以及如何把作好的CSS文档与HTML结合起来运用。您可以根据自己编写的HTML代码的结构、长度来选择用哪一种方法将CSS与之结合。
  下一章CSS教程3.CSS属性1.字体属性我们将进入CSS的具体知识的学习,我们将先从最基本的属性开始讲起。
属性目录在CSS教程,简单易懂,一看就会系列专辑里包括



了解更多信息!

Read more...

CSS教程1.CSS快速入门

看过Blogger教学课程后是不是想更深的了解css呢?那就看看
CSS教程,简单易懂,一看就会系列专辑

CSS教程1.CSS快速入门

 CSS是Cascading Style Sheets(层叠样式表单)的简称。更多的人把它称作样式表。顾名思义,它是一种设计网页样式的工具。借助CSS的强大功能,网页将在您丰富的想象力下千变万化。

图一
图二


看到上面的两幅图片,您可能会认为这是用photoshop或者是其他图形处理软件制作的吧。可是上面的例子却完全是用CSS编写的。我们来看一下它的源代码(不要以为讲代码您会搞不懂,很简单的^_^):


<html>
<head>
<title>css word</title>
<style>//*CSS样式定义开始*//
<!--div{width%uFF1A200; filterblur(add=true,direction=135,strengh=20);} //*定义DIV范围内的样式,包括宽度(width)、模糊滤镜属性(blur)*//>
</style>//*样式定义结束*//
</head>
<body>
<div>//*以下的区域内采用<head>中<style>里面定义的格式*//
<p style="font-size%uFF1A48;font-style%uFF1Abold;color:red;">hongen </p>
//*定义字体样式(font-style),包括字体大小(size)、粗细(bold)、颜色(color)*//
</div>
</body>
</html>



上面的代码中以红色显示的是注释部分,用于帮助您更好的理解代码的含义。上面的这一段代码产生的是如图2的效果。而其中字体的模糊效果就是运用了CSS的滤镜功能。滤镜功能是CSS非常有趣也非常吸引人的一个功能,我们将在后面的章节中介绍。

  实际上CSS的代码都是由一些最基本的语句构成的。它的基本语句的结构是这样的:
  选择符{属性:属性值}
  看,是不是很简单,只有三部分。

  我们结合上面的代码来讲解,比如上面代码的<head>.....</head>中,使用<style>来指定样式。
  一般说来,<style>下面的CSS语句是以注释语句的形式书写的,也就是上面代码中的符号包含的部分。所以,上面的例子中定义页面样式的语句是:
  div{width:200;filter:blur(add=true,direction=35,strengh=20);}
  在上面的语句中,DIV是选择符,选择符可以是HTML中任何的标识符,比如P、DIV、IMG甚至BODY都可以作为选择符。
  这里用DIV做选择符,就是说在HTML中,编辑在<DIV>中的页面格式将以上面语句中大括号内定义的格式显示。
  括号内的WIDTH和FILTER就是属性。
  WIDTH定义了DIV区域内的页面的宽度,200是属性值。
  FILTER定义了滤镜属性,BLUR是它的属性值,该属性值产生的是一种模糊效果,其小括号内定义的是BLUR属性值的一些参数。
  ADD参数有两个值:True和False。分别指定图片是否被设置成模糊效果。
  Direction参数是用来设置模糊的方向。0度代表垂直向上,然后每45度一个单位,例子中的135代表底部向右135度,每一个度数单位都代表一个模糊方向,如果您感兴趣的话,可以参照后面的讲解中详细的参数设定。
  Strengh代表有多少像素的宽度将受到模糊影响,参数值是用整数来设置的。

  我们看到除了在<head>中有CSS 的定义,在<BODY>中也有一段CSS定义:
  <p style=“font-size:48;font-style:bold;color:red;”> hongen</p>
  这里Style是内嵌到<P> 中来定义该段落内的格式的。我们发现在<BODY>中的CSS语句与定义在<HEAD> 中还有些不同,它是用< style =" ">直接定义的。这种定义方法非常适用于编写的代码比较多的情况。
  而上面的代码的CSS定义格式则非常适用于代码较少、结构较简单的情况。
  按照CSS语句的基本格式,我们可以看出上面定义P段落内的CSS代码中font-size、font-style和color是属性,分别定义

中“hongen”字体的大小(size)、样式(style)和颜色(color);
  而48、bold、red是属性值。意思是“hongen”将以48pt、粗体、红色的样式显示。由于整个段落是定义在<DIV>中的,所以hongen又将显示出<head>中定义的滤镜属性来。最终的结果就如同图2一样。
  图1中的效果也是用很简单的CSS语句实现的,只是运用了CSS中的滤镜属性而已。

  通过上面的讲解,我们可以看到用很简单的CSS语句就可以实现许多需要专业软件才可以达到的效果。利用属性可以设置字体、颜色、背景等页面格式;利用定位可以使页面布局更加规范、好看;利用滤镜可以使页面产生多媒体效果。 怎么样,CSS的功能是不是很强大,在下面的CSS教程2.怎样编写CSS?教程中我们将对它进行详细的讲解。



了解更多信息!

Read more...

2009年4月1日星期三

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...

2009年3月31日星期二

怎么给站点加入漂亮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...

  © 广告业务联系站长:wj9931@gmail.com 或 QQ42032058.