Blogger 如何在文章中加入程序代码框

Blogger 如何在文章中加入程序代码框

新手遇到的难题，我开始也对此很头痛，直接拷贝别人的代码框却不成功。现在弄明白了，其实很简单，就是先要在你的模板中加入一个CSS代码。
Step1：进入到 控制台－模板－修改HTML ，“扩展窗口小部件模板” 前不用打勾。在模板内容里找到下面这段代码，你可以通过按Ctrl+F搜索“skin”两次找到
]]>
</head>>

然后将下面的代码段拷贝加到上面代码的前面，就是那两个中括号前面


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;
}


Step2：在Html模式下，把文章中将要引用的代码前后分别用 和 包起来，这样就可以显示成代码框了。

需要注意的是如果引用的程序中含有<> 括号，要把"<"用“<”代替，“>”用">"代替，不然<>的内容就会被Blogger的编辑器当成代码执行而不显示

超简单更改blogger的ico图标

google blogger真不愧是一个超级开放的博客平台，就连ico图标也可以自定义。今天我就教大家一个超简单的更改blogger ico图标的方法吧。
在blogger的后台点击"布局"---"修改html"，然后ctrl+t找到标签，在后面加上:

这段代码就行了，其中红色的链接是你的ico图片的地址，是不是很简单啊。我的博客就是演示哦。

查看世界各地的网络摄像头

我们知道各地连入互联网的摄像头成千上万,想不想看看世界的另一端此刻是什么样的呢!

还是通过google搜索框,输入下面的一些关键字.


inurl:”ViewerFrame?Mode=
intitle:Axis 2400 video server
inurl:/view.shtml
intitle:”Live View / - AXIS” | inurl:view/view.shtml^
inurl:ViewerFrame?Mode=
inurl:ViewerFrame?Mode=Refresh
inurl:axis-cgi/jpg
inurl:axis-cgi/mjpg (motion-JPEG)
inurl:view/indexFrame.shtml
inurl:view/index.shtml
inurl:view/view.shtml
liveapplet
intitle:”live view” intitle:axis
intitle:liveapplet
allintitle:”Network Camera NetworkCamera”
intitle:axis intitle:”video server”
intitle:liveapplet inurl:LvAppl
intitle:”EvoCam” inurl:”webcam.html”
intitle:”Live NetSnap Cam-Server feed”
intitle:”Live View / - AXIS”
intitle:”Live View / - AXIS 206M”
intitle:”Live View / - AXIS 206W”
intitle:”Live View / - AXIS 210″
inurl:indexFrame.shtml Axis
inurl:”MultiCameraFrame?Mode=Motion”
intitle:start inurl:cgistart
intitle:”WJ-NT104 Main Page”
intext:”MOBOTIX M1″ intext:”Open Menu”
intext:”MOBOTIX M10″ intext:”Open Menu”
intext:”MOBOTIX D10″ intext:”Open Menu”
intitle:snc-z20 inurl:home/
intitle:snc-cs3 inurl:home/
intitle:snc-rz30 inurl:home/
intitle:”sony network camera snc-p1″
intitle:”sony network camera snc-m1″
site:.viewnetcam.com -www.viewnetcam.com
intitle:”Toshiba Network Camera” user login
intitle:”netcam live image”
intitle:”i-Catcher Console - Web Monitor”

为Blogger传统模板（FTP发布）添加标签云

Blogger的传统模板一直不支持标签的输出。虽然有hack可以从feed中抓取标签列表，但不能分析每个标签所含的文章数，所以仍然不能生成随标签使用频率而字体大小和颜色变化的真正意义上的“标签云”。

所以，我写了一个python的自动化脚本，可以从ftp服务器上分析blogger文件，计算出每个标签的使用频率，并将这些信息保存在服务器上，供模板中的javascript脚本调用。效果么，你可以看看这个演示网页，或者点击我blog下方widget dock左起第四个“文件夹”图标（wyt：还在用IE6的同学们应该看不到。因为IE6不支持widget dock用的透明png，所以我把widget dock给隐藏起来了，实际上“标签云”还在那里。IE7、Firefox、Opera、Safari等应该都没问题）

使用方法很简单，要执行脚本首先得有python。Linux大多默认安装，Windoze上安装Python的方法见这篇文章。

另外，脚本中用到了BeautifulSoup分析HTML文件，simpleJSON生成JSON格式的数据流。你也必须安装这两个python模块。如果你和我一样用Gentoo，just emerge it。Windoze用户可以用easy install工具快速安装。

接下来下载压缩文件：konatag.tar.gz，解压缩用得到两个文件konatag.py和konatag.js。



修改konatag.py其中的ftp服务器，用户名，密码以及归档（archives）的路径参数，以便脚本可以访问你的ftp服务器。


if __name__ == '__main__':
options = dict(
server='yourftpserver', # 服务器地址不用包含ftp://
username='yourusername', # 用户名
password='yourpassword', # 密码
path='/path/to/archives/' # blogger的归档路径
)
ftp = FTPServer(**options)
blogger = Blogger(ftp)保存退出之后，在终端（wyt：也就是Windoze的命令行）执行：


$ python konatag.py事实上，如果高兴的话，可以像我一样把这个脚本扔到crontab的计划任务中，每星期执行一次自动更新你的Blogger的标签信息。

执行完脚本之后，登录ftp，在你的blogger归档目录中会多出一个konatag.json的文件，这是一个包含JSON格式数据的文本文件。不用去管它，将konatag.js上传到任何你能记住的目录。接下来我们将要修改Blogger模板。需要说明的是，konatag.js使用prototype库，所以在模板里还必须包含相应的js文件。

这样就大功告成，只需要重新发布一遍模板就可以了。有什么意见，建议和砖头，欢迎留言。

刘黎

1、.Text
举例：blog.donews.com

Zooomr : 122

Powered by Zoundry

刘黎

1、.Text
举例：blog.donews.com

Zooomr : 122

Powered by Zoundry

刘黎

1、.Text
举例：blog.donews.com

Powered by Zoundry

背景颜色 background-color

背景颜色 background-color

我想这个我就不用多做介绍了，颜色代码我想大家都知道的，不是用英文来代替就是用指定的代码来表示的。这个的默认值是transparent（透明色）。

例：body{background-color:yellow}

H1{background-color:#000000}

·背景图片 background-image

背景图片和背景颜色在HTML里面的设置也是基本相同的，都可以在里加入相关的语句来完成。但是在这里，我所指的并非是用这种方法，我用的方法还是CSS。background-image这个的主要功能也就是用来显示图片，如果需要显示图片的话，那么只要在后面加上url(图片的地址）就可以了，不显示嘛，那是最简单不过的了，什么也不要就行了，因为这个默认的就是none，而要加的话，就是在后面加上这个none就可以了。

例：body{background-image:url(file&:///C:/WINDOWS/BACKGRND.GIF)}

h1{background-image:url(none)}

大家在使用里的背景图片时，一定常常遇到一些图片因为太小，而产生种种如图片的重复出现而破坏了整个页面的美感，想换成其它图片又不合适之类的麻烦情况吧。不过现在好了，大家只要用了以下的几个CSS里控制图片方法，那么你以后就不会再有此类的麻烦事发生了。

·图片是否重复显示 background-repeat

有时候重复显示是需要的，可是有时候重复显示则是让人头痛的，现在这个可以很好的帮助你了，而且它还可以帮你控制图片重复的方式（水平方向重复、垂直方向重复以及两个方向都有重复），而要实现这三个方向的重复也就只要在bcackground-repeat后面加上repeat-x（水平方向铺开）、repeat-y（垂直方向铺开）、repeat（两个方向铺开）。当然，它可以控制图片的重复，也可以控制图片不重复的。no-repeat这个就是用来表示只显示一幅背景图片，而不是重复出现的，这个可不是默认的哟，默认的是重复显示背景图片（repeat）。

例：body{background-image:url(file&:///C:/WINDOWS/BACKGRND.GIF);background-repeat:no-repeat}

·定位图片显示位置 background-position

一张背景图片经过上面的设置后往往还不够的，因为当你使用上面的不重复显示设置后，图片只显示在页面的左上角，而不会在其它地方，可是如果要在中间或者其它地方出现这张背景图片的话，那么background-position这个就可以帮你了，因为它就是用来显示图片相对于左上角的一个位置的（就是默认的值0% 0%），由两个值来设定，中间用空格来隔开。它的主要的几个值有left|center|right和top|center|bottom，也可以用百分数值指定相对位置或用一个值来指定绝对位置，如50%表示的位置是在中心，而50px的水平值则表示图片距左上角区域水平移动50px单位；这里要特别指出的是，1当你设置值的时候只提供一个值，则相当于只指定水平位置，垂直自动设置为50%；2当你设置的值是负数的时候，则表示背景图片超出边界。

例：body{background-image:url(file&:///C:/WINDOWS/BACKGRND.GIF);background-repeat:no-repeat;background-position:100px 10px}

·控制图片是否滚动 background-attachment

上面的两步可以帮你完成图像的定位，可是这样做好以后还不是完美的，因为如果你的页面有滚动条的时候，那么你这张背景图片就不会永远定位在那个位置了，如果想要图片永远定位在那个位置，就只有让这张图片随着页面的内容的滚动而滚动，这时background-attachment就可以帮你了你只要加入scroll（静止）和fixed（滚动）中的其中一个就可以了。当然不是让你乱加的，毕竟scroll是默认的，也就是不让图片随页面的内容而滚动的。

例：body{background-image:url(file&:///C:/WINDOWS/BACKGRND.GIF);background-repeat:no-repeat;background-attachment:fixed}

好了，经过以上这番设置后，我相信你的背景一定会更美的，但是过多的代码往往可读性很差，容易让人产生错误，所以在这里我要告诉大家的就是可以把以上的代码全部加在一起使用，也就是说把以上相关的代码加到background中。在把代码加到background中的时候要在每个值中间加上空格来隔开，而且不要把背景颜色的代码放在背景图片的URL后面，以免图片显示不出来。

例：body{background:green url(file&:///C:/WINDOWS/BACKGRND.GIF) fixed 100px 50px no-repeat}

最后提醒一下大家，如果用代码直接插入的话，那么一定要放下面这个代码的里后再放在之间才能正常显示出来！

接下来我再介绍一下用DW4制作以上样式的方法，因为在DW中已经很详细的列出各项来了，具体的作用我也说明过了，所以就简要的介绍一下吧，只要大家能够明白就行了。

1.在此之前大家应该把CSS Styles这个窗口打开，如未打开的话，那么就按Shift+F11或者从Window下拉菜单中选择此项就可以了。

2.点击右键选择new style...这个选项或者点击下面的带有+号的图标。

3.在弹出的窗口中的选择如下，tag选择body因为我们上面介绍的CSS样式都是关于body的，而在这里我也只是介绍这个里面的background，其它的不要介绍内容之内；下面的type选择第二个；define也选择第二个，这样你呆会就可以在该文件中的之间找到一个了，而这里面的内容其实就是我上面介绍的。呵~_^

4.点击OK后弹出的窗口才是最重要的。我之前已说过，我们这次主要介绍的是background这个选项，所以在旁边的窗口中选中它吧。选中以后右边的窗口将会变成与它相关的设置项，具体的我在上面介绍过了，大家只要参照上面的介绍就可以完成了。不过需要说明一下的是在这个窗口中的最下面两项其实就是background-position中的水平方向垂直方向。

5.最后再点击OK就可以完成了。完成后你就可以在该

背景 (background) 属性定义元素的背景效果

background
[编辑本段]background
　　 背景 (background) 属性定义元素的背景效果
　　元素的背景区包括前景之下直到边框边界的所有空间。因此，内容框与内边距都是元素背景的一部分，且边框画在背景上。
　　CSS 允许应用纯色作为背景，也允许使用背景图像创建相当复杂的效果；CSS 在这方面的能力远远在 HTML 之上。
　　background 是用于在一个声明中设置所有背景属性的一个简写属性。
　　格式: background: {属性值}
　　继承性: NO
　　　可能的值：
　　background-color
　　background-image
　　background-repeat
　　background-attachment
　　background-position
　　注：可以在此声明中声明1到5个背景属性
　　例：
　　
[编辑本段]background属性详解及实例：
　　background-color：{颜色值|transparent(默认值）} 属性设置元素的背景颜色。
　　color 颜色值可以是颜色名称、rgb 值或者十六进制数。
　　transparent 默认。背景颜色为透明。
　　例：
　　　body
　　{
　　background-color: #00FF00
　　}
　　1.background-image：{URL（url）} 把图像设置为背景。
　　url(URL) 指向图像的路径。
　　none 默认。无背景图像。
　　例：
　　　body
　　{
　　background-image: url(pic.jpg);
　　}
　　2.background-repeat:{repeat|no-repeat|repeat-X|repeat-Y} 设置背景图像是否及如何重复。
　　repeat 默认。背景图像将在垂直方向和水平方向重复。
　　repeat-x 背景图像将在水平方向重复。
　　repeat-y 背景图像将在垂直方向重复。
　　no-repeat 背景图像将仅显示一次。
　　例：
　　body
　　{
　　background-image: url(pic.jpg);
　　background-repeat: no-repeat;
　　}
　　3.background-attachment:{fixed|scroll} 背景图像是否固定或者随着页面的其余部分滚动
　　scroll 默认。背景图像会随着页面其余部分的滚动而移动。
　　fixed 当页面的其余部分滚动时，背景图像不会移动。
　　　例：
　　body
　　{
　　background-attachment: fixed;
　　background-image: url(pic.jpg);
　　}
　　　4.background-position:{位置值} 属性设置背景图像的起始位置。
　　top left
　　top center
　　top right
　　center left
　　center center
　　center right
　　bottom left
　　bottom center
　　bottom right
　　x% y%
　　xpos ypos
　　例：
　　　body
　　{
　　background-image: url(pic.jpg);
　　background-position: top;
　　}
　　用javascript改变背景图片
　　例：
　　 ....