Wednesday, March 31, 2010

分享Blogger知识

一个朋友问:「在《我的链接》(指侧边栏[sidebar]里的一个小工具[gadget])中,您是怎样上载图片的?」简单的问题,可以简单的回答:有关图片是通过更改模板(template)来加插的背景图片。

但是真要解释清楚话就长了。也许可以趁机分享自己所累积的一些Blogger知识。

Blogger(即Blogspot)是和Wordpress齐名的最普遍的网志网站,两者各有优劣点。Blogger可供选择的模板不多,但是它允许用户自由的更改模板。Blogger也不提供空间让用户上载图片作为背景图片之用。所以要在Blogger里加插背景图片,用户必须把相关图片上载到提供文件储存(files hosting)之第三者网站上,而且必须是提供URL直接链接的网站。我使用的是Photobucket。是一个可靠的免费网站。

把我们要用的图片上载到文件储存网站后,我们需要抄下该图片的直接链接(Direct Link URL)。接着我们就可以到Blogger的Customize - Layout - Edit HTML去更改模板了。

专家(不是我)的建议:更改模板之前,一定要作备份。我的建议:如果你对HTML、CSS及Template等没什么概念,在作任何更改之前,还是先看看Tutorials on Blogger Template Design了解一下。

如果是要加插整个页面的背景图片,就把以下的HTML代码放到「body {」之下:

body {
background:url("图片的直接链接") repeat;
other existing HTML codes (don't change) }

所谓「图片的直接链接」的例子是这样的:
http://www.backgroundlabs.com/backgrounds/154.jpg

如我般放到侧边栏里《我的链接》的图片就是加了以下的HTML代码:
.LinkList {
background: url("http://i1020.photobucket.com/liaukm/books-left.png") no-repeat 0px 10px; }

以上的代码可以放在「.sidebar { html codes }」之下。

如果是要把图片放在侧边栏的其他小工具内,就必须对「.LinkList」作相对的更改。我就在不同的小工具放了不同的背景图片,如《经典回顾》的卡带、《旧帖重温》的纸和笔、《博客文库》的竹。由于《旧帖重温》本身是HTML小工具,有关代码是直接放在该小工具里头,而不是在模板里。这个代码是这样:

<div style="background-image: url(http://i1020.photobucket.com/liaukm/cassette-s-1.gif); background-repeat: no-repeat; background-position: bottom right; margin-right:-10px; padding-right: 100px;">

可以下载我的模板做参考。下载后把文件解压,然后用WordPad或其他Text Editor打开,不过不建议用Notepad。WordPad可以在Start - All Programs - Accessories里找到。

1 comment: