写写改改™: 11/01/2006

今天很幸运，看到了一个做了标签云的Blogger Beta的网站：良人的大秘寶，做得效果很好，也正是我梦寐以求的功能，于是马上按其说明自己试做了一下，果然成功，庆祝一下，同时感谢"良人的大秘寶"
原文：[筆記]標籤雲(Tag Cloud)
虽然完成了，但还是有些问题要补充一下：
在步骤3
<b:widget id="'Label1'" locked="'false'" title="'Labels'" type="'Label'/">
代码不止是窗口所列的，应该一直到widget语句结束的所有代码。原来我的标签已经修改过代码，知道怎么改，所以也没有遇到麻烦，但如果第一次修改，还是要留意一下这个问题，而且最好修改前先备份一下模版，免得出错，影响别人访问：
<b:widget id="'Label1'" locked="'false'" title="'Labels'" type="'Label'/">......</b:widget>

还有，我原来有的标签是包括“★”，用了这个标签云后，就乱码。暂时也不知道什么原因，只能牵就一下，先不用星号标签。
Power
之前写的一些意见，终于实现了一些：期待着beta.blogger的几个功能

将原文也摘录如下：

參考資料：phydeaux3: Code for Beta Blogger Label Cloud

1、加入CSS
/* Label Cloud Styles ----------------------------------------------- */ #labelCloud {text-align:center;font-family:arial,sans-serif;} #labelCloud .label-cloud li{display:inline;background-image:none !important;padding:0 5px;margin:0;vertical-align:baseline !important;border:0 !important;} #labelCloud ul{list-style-type:none;margin:0 auto;padding:0;} #labelCloud a img{border:0;display:inline;margin:0 0 0 3px;padding:0} #labelCloud a{text-decoration:none} #labelCloud a:hover{text-decoration:underline} #labelCloud li a{} #labelCloud .label-cloud {} #labelCloud .label-count {padding-left:0.2em;font-size:9px;color:#000} #labelCloud .label-cloud li:before{content:"" !important}
2、加入Javascript變數宣告（lcShowCount=true 則顯示文章數，lcBlogURL 要改成自己的連結）
<script type="'text/javascript'"> // Label Cloud User Variables var lcBlogURL = 'http://YOURBLOG.blogspot.com'; var maxFontSize = 20; var maxColor = [0,0,255]; var minFontSize = 10; var minColor = [0,0,0]; var lcShowCount = false; </script>
3、將
<b:widget id="'Label1'" locked="'false'" title="'Labels'" type="'Label'/">
取代成
<b:widget id='Label1' locked='false' title='Label Cloud' type='Label'> <b:includable id ='main'> <b:if cond='data:title'> <h2 ><data:title/></h2> </b:if> <div class='widget-content'> <div id='labelCloud'/> <script type='text/javascript'> // Don't change anything past this point ----------------- function s(a,b,i,x){ if(a>b){ var m =(a-b)/Math.log(x),v=a-Math.floor(Math.log(i)*m) } else{ var m=(b-a)/Math.log(x),v=Math.floor(Math.log (i)*m+a) } return v } var ta=0 var c =[]; var labelCount = new Array(); var ts = new Object; <b:loop values='data:labels' var ='label'> var theName = "<data:label.name/>"; ts[theName] = <data:label.count/>; </b:loop> for (t in ts){ if (!labelCount[ts[t]]){ labelCount[ts[t]] = new Array(ts[t]) } } tz = labelCount.length-1; lc2 = document.getElementById('labelCloud'); ul = document.createElement('ul'); ul.className = 'label-cloud'; for(var t in ts){ for (var i=0;3 > i;i++) { c[i]=s(minColor[i],maxColor[i],ts[t]-ta,tz) } var fs = s(minFontSize,maxFontSize,ts[t]-ta,tz); li = document.createElement('li'); li.style.fontSize = fs+'px'; li.style.lineHeight = '1'; a = document.createElement('a'); a.title = ts[t]+' Posts in '+t; a.style.color = 'rgb('+c[0]+','+c[1]+','+c[2]+')'; a.href = lcBlogURL+'/search/label/'+encodeURIComponent(t); if (lcShowCount){ span = document.createElement('span'); span.innerHTML = '('+ts[t]+') '; span.className = 'label-count'; a.appendChild(document.createTextNode(t)); li.appendChild(a); li.appendChild(span); } else { a.appendChild(document.createTextNode(t)); li.appendChild(a); } ul.appendChild(li); abnk = document.createTextNode(' '); ul.appendChild (abnk); } lc2.appendChild(ul); </script> <noscript> <ul> < b:loop values='data:labels' var='label'> <li> < b:if cond='data:blog.url == data:label.url' > <data:label.name /> <b:else/> <a expr:href='data:label.url '><data:label.name/></a> </b:if> (<data:label.count/> ) </li> </b:loop> </ul> </ noscript> <b:include name='quickedit'/> </div> </b:includable> </b:widget>

引用自：[筆記]標籤雲(Tag Cloud)
发布者：國良先生

写写改改™

★ 阅读全文... | ☆ 消息來源

| 62%的用户只点击搜索结果第一页

| BLogger排版两则

一、引用内容排版：在一篇文章中，怎么让一段引用的文字有一个独立的区块，好让排版效果更工整，更方便阅读呢？今天在BLogger Buzz看到了如下CSS样式，修改了一下，效果就是：

文章排版示例；
从BLogger Buzz看到的效果；
借鉴一下；
有兴趣就试一下。

方法也不难，首先在在模版的CSS样式中加入下面代码：.post blockquote {margin:1em 20px;padding-left:8px;border-left:3px solid #cff5ff;background:#e6e6e6;}
然后写文章的时候，将要引用的内容放入blockquote区内（注意要在Html模式下）：<blockquote>在此放入引用的内容，</blockquote>

二、插入代码排版：想在一篇文章中插入一些htm代码，只要将代码放在textarea中间就行了（注意要在Html模式下），如下：<textarea name="description" rows="3" cols="64">在此插入代码</textarea>
当然，要让其版式漂亮点，还要在模版的CSS样式中加入下面代码：

textarea {margin:1em 20px;padding-left:8px;border-style: solid; border-color: rgb(204, 204, 204) rgb(204, 204, 204) rgb(204, 204, 204) rgb(153,153, 153); border-width: 1px 1px 1px 8px; margin: 1px; padding: 3px; background: rgb(244, 244, 244) none repeat scroll 0% 50%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; color: rgb(0, 0, 0); font-family: Verdana,Arial,Helvetica,sans-serif; font-style: normal; font-variant: normal; font-weight: normal; font-size: 13px; line-height: normal; font-size-adjust: none; font-stretch: normal;}

今天在网上，搜索到良人的大秘寶的一篇文章在文章裡顯示優質的程式碼區，用了code这种样式，效果不错。花了大半天，研究了这个代码的插入方法，原来还有这么个简单的方法，更让我惊讶的是，两种效果的外观和用色居然惊人的相似。呵呵，受益非浅！马上试一下：

textarea {margin:1em 20px;padding-left:8px;border-style: solid; border-color: rgb(204, 204, 204) rgb(204, 204, 204) rgb(204, 204, 204) rgb(153,153, 153); border-width: 1px 1px 1px 8px; margin: 1px; padding: 3px; background: rgb(244, 244, 244) none repeat scroll 0% 50%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; color: rgb(0, 0, 0); font-family: Verdana,Arial,Helvetica,sans-serif; font-style: normal; font-variant: normal; font-weight: normal; font-size: 13px; line-height: normal; font-size-adjust: none; font-stretch: normal;}

试了一下后，发现还是如良人的大秘寶用code这种方式好，发表时可以直接提交，在Ie和Firefox显示都正常，而textarea这种方式每次都要强行提交，要多点两下鼠标，浪费时间。
不过仔细用过后，也发现这种方法好像有个问题，就是要替换括号，左括号用& lt;，右括号用& gt;，这样的话，只适合插入括号不多的代码。如果要插入的代码是一大段，有很多括号的话，会比较麻烦。不过如果采用第三方程序发布，一般都会自动把括号转换，不用自己手工去修改，所以尽量的还是采用第三程序。
Power by 写写改改™

★ 阅读全文... | ☆ 消息來源

| Html代码大杂烩

Html代码大杂烩将经常用到的Htm代码收集，以方便查看。适合对Html和CSS有一定了解的朋友参考：
文字中划线：<strike></strike>
换行:<br/>
空格： 
文字加粗：<strong></strong>
网页转向：<meta equiv="refresh" content="1;URL= http://www.xxxxxx.com ">
页内链接：<a href="http://XXXXXX#test" title="Test">页内链接</a><a name="test"></a>
左括号： <
右括号： >
引用：<code></code>
引用（插入代码用）：<textarea></textarea>
引用：<blockquote></blockquote>
javascript调用：<script language="JavaScript" type="text/javascript" src=" xxxxx.js"></script>
字体：<span style="font-weight: bold;font:Verdana, Arial, Helvetica, sans-serif;text-align: left;text-decoration:underline;z-index: 10;">
实线边：<span style="border:1px solid #EFEFEF; ">
虚线边：<span style="border:1px dotted #EFEFEF; ">
背景：background: #D9D8D9 url("http://www.xxxxxx.com/xxxxxx.gif") 0 100% no-repeat;
间隔：padding: 0 0 10px 0;margin:0 0 10px 0;
宽高：width: 760px;height: 1px;
显示：display: block;display: inline;display: none;display: hidden;
绝对定位：position:absolute;background-position: 0 -100px;
相对定位：position: relative;background-position: 0 -100px;
隐藏：visibility:hidden;
对象浮动与消除：<div style="float: left;"></div> <div style="clear: both;"></div>
间隔线：<hr>
图片的CSS：.img {background: transparent url(http://www.xxxxxx.com/xxxxxx.png) left no-repeat; padding-left:20px; text-decoration: none;}

一个文章排版样式：
在一篇文章中，怎么让一段引用的文字有一个独立的区块，好让排版效果更美观呢？下面就是示例：

文章排版示例；
从 BLogger Buzz看到的效果；
借鉴一下；
有兴趣就试一下。

方法也不难，就在文章的CSS样式中加入下面代码，然后每次在写文章时，将引用文字放在<blockquote></blockquote>之间
.post blockquote {margin:1em 20px;padding-left:8px;border-left:3px solid #cff5ff;background:#e6e6e6;}

在文章中插入代码：

在模版添加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; line-height: 1.2em; }
然后将要加入代码的地方放在<code></code>中间（在html编辑模式下）
部分内容引用自： [筆記]在文章裡顯示優質的程式碼區
这种方法好像有个问题，就是要替换括号，左括号用 <，右括号用 >，这样的话，只适合插入括号不多的代码。如果要插入的代码是一大段，有很多括号的话，可以下下面的方法，完全不用有任何改动，就可以直接在网页插入代码。但就是在发表时，要选择强行发表，多按两下鼠标。

插入代码排版：
想在一篇文章中插入一些htm代码，只要将代码放在textarea中间就行了（注意要在Html模式下），如下：
<textarea>在此插入代码</textarea>
当然，要让其版式漂亮点，还要在模版的CSS样式中加入下面代码：

textarea {margin:1em 20px;padding-left:8px;border-style: solid; border-color: rgb(204, 204, 204) rgb(204, 204, 204) rgb(204, 204, 204) rgb(153,153, 153); border-width: 1px 1px 1px 8px; margin: 1px; padding: 3px; background: rgb(244, 244, 244) none repeat scroll 0% 50%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; color: rgb(0, 0, 0); font-family: Verdana,Arial,Helvetica,sans-serif; font-style: normal; font-variant: normal; font-weight: normal; font-size: 13px; line-height: normal; font-size-adjust: none; font-stretch: normal;}

小小地实例：
ul li样式的横排和竖排效果，及代码。效果如下：

将如下的style样式代码放在head中间，做好相关的链接：

<style type="text/css">#test1 li {display: inline;line-height: 200%;list-style: none;text-align: center;}#test2 li {display: table;line-height: 200%;list-style: none;text-align: center;}</style>

在文章中加入视频文件：
想在自己的博客中加入视频文件，很简单，只要将下面代码拷贝，并将其中路径"http://xxxxxx"改成自己的视频文件路径:

<embed style="width: 400px; height: 326px;" id="VideoPlayback" type="application/x-shockwave-flash" src=" http://xxxxxx" flashvars="">

在文章中加入MP3文件：

<object height="40" width="290"><param name="movie" value=" http://www.blogthissong.com/player.swf?soundFile=http://xxxxxx"><param name="wmode" value="transparent"><br /><embed src=" http://www.blogthissong.com/player.swf?soundFile=http://xxxxxx" type="application/x-shockwave-flash" wmode="transparent" height="40" width="290"></object>

在文章中加入Flash文件：
<object type="application/x-shockwave-flash" data="style/flash/001.swf" width="400" height="400">

几种页面插入方法：
在静态的网页中插入页面，有以下几种方法：
1、Object形式，这种就类似在网页中插入图片，比较直观，但没有垂直条和水平条；
2、IFrame形式，与单页效果类似，有垂直条和水平条，但容易给一些网页拦截器过滤；

<object height="40" width="290"></object><iframe src="http:  www.YourDomain.com" marginwidth="0" marginheight="0" frameborder="0" height="30" scrolling="no" width="100%"></iframe>

★ 阅读全文...

Sitemaps	类型	最后一次提交时间	最新下载时间	Sitemaps 状态	已提交的网址
atom.xml Atom 馈送	Web	11 分钟前	10 分钟前	确定	26
rss.xml Atom 馈送	Web	10 分钟前	10 分钟前	确定	26

毕业生薪水最高的10种专业
石油工程	Petroleum Engineering	$67,069
化学工程	Chemical Engineering	$56,269
材料工程	Materials Engineering	$54,027
电气/电子与通信工程	Electrical/Electronics & Communications Engineering	$53,096
计算机工程	Computer Engineering	$53,300
冶金工程	Metallurgical Engineering	$52,240
机械工程	Mechanical Engineering	$51,808
系统工程	Systems Engineering	$51,473
工业/制造工程	Industrial/Manufacturing Engineering	$51,469
航天/航空/宇航工程	Aerospace/Aeronautical/Astronautical Engineering	$51,394

毕业生就业数量最多的10种工作
初级管理人员	Management(Entry-Level Mgmt.)	$38,408
销售	Sales	$37,622
教育	Teaching	$31,954
金融/财务分析	Financial/Treasury Analysis	$46,051
项目工程	Project Engineering	$49,759
咨询	Consulting	$49,991
会计	Accounting (Private)	$43,987
设计/建筑工程	Design/Construction Engineering	$47,881
会计	Accounting (Public)	$44,776
软件设计与开发	Software Design & Development	$53,330

写写改改™

| 续: 做好了一个网址导航的BLogger

| 标签、搜索结果与存档默认显示文章标题

| 为本站做了个标签云

| 62%的用户只点击搜索结果第一页

| BLogger排版两则

| Html代码大杂烩

| Blogger：提交Google Sitemaps

| 给Blog加点音乐

| beta blogger的小秘密（更新中...）

| BLogger Beta支持Label订阅了

| 看图架设自己的FTP

| 一款Google Maps电子地图的手机

| Spreadsheets网络办公的写意

| Docs打印折腾

| Gmail不只是E-Mail：摇身变3G网络硬盘

| 更名纪事

| 巧遇两则年薪的新闻

| 试搭建第一个Wordpress

| 引用Zooomr图片的方法

Twitter Updates

新近文章：

语言选择：

站内热点

赞助商链接：

朋友圈:

博友世界：

移动版

归档文章

标签云

最近留言

一点说明:

评论排行榜：

站点统计：

感谢支持: