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

2009年4月3日星期五

文章分类(标签)太多,怎么能分两行

有些博客上的分类标签太多,可是显示的是一列,空的很多大的空间,怎么能让他变两行或更多呢?
更動之前,首先也需備份你的模板,進入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,展開小裝置範本

1‧在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,讓整個元件趨近正方形,當然相關的設定,如顏色或是大小,都可自行調整。

2‧找到這個元件的位置,譬如我的元件是「我追蹤的網誌」,按下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...

2009年4月2日星期四

网站目录

Blogger教学课程
怎么(如何)打造漂亮blogspot模板教学课程系列专辑
CSS属性列表
CSS教程,简单易懂,一看就会系列专辑
了解更多信息!

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

CSS教程,简单易懂,一看就会系列专辑

包括很多容易吸收的 CSS教程,大家来分享,共同交流。

CSS教程1.CSS快速入门
CSS教程2.怎样编写CSS?
CSS教程3.CSS属性1.字体属性
CSS教程3.CSS属性2、颜色和背景属性
CSS教程3.CSS属性3、文本属性
CSS教程3.CSS属性4、“容器”属性
CSS教程3.CSS属性5、分级属性
CSS教程3.CSS属性6、鼠标属性
CSS教程4、CSS定位1.动态转换
CSS教程4、CSS定位2.空间定位
CSS教程5、CSS滤镜1、概述
CSS教程5、CSS滤镜2、alpha属性
CSS教程5、CSS滤镜3、blur属性
CSS教程5、CSS滤镜4、Chroma属性
CSS教程5、CSS滤镜5、DropShadow属性
CSS教程5、CSS滤镜6、FlipH、FlipV属性
CSS教程5、CSS滤镜7、Glow属性
CSS教程5、CSS滤镜8、Gray属性
CSS教程5、CSS滤镜 9、Invert属性
CSS教程5、CSS滤镜10、Mask属性
CSS教程5、CSS滤镜11、Shadow属性
CSS教程5、CSS滤镜12、Wave属性
CSS教程5、CSS滤镜13、Xray属性

相关系列

CSS属性列表
Blogger教学课程
待续



了解更多信息!

Read more...

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