实现这种版式的前提条件是，每篇文章有且只能有一个Tag，每个Tag都有一个对应的图片文件，如果没有图片，可以使用一个1像素的GIF图片来代替。

　　有了这些之后，打开Z-Blog的文件夹，编辑TEMPLATE/b_article_tag.html文件，修改为如下内容：

<img src="<#ZC_BLOG_HOST#>logo/<#article/tag/intro#>.gif" _fcksavedurl="<#ZC_BLOG_HOST#>logo/<#article/tag/intro#>.gif" alt="<#article/tag/name#>" class="thumb" />

　　修改TEMPLATE/b_article-multi.html文件，（如果要在文章页也显示图片，则同样也要修改b_article-single.html文件

将原来的

<div class="post-body"><#article/intro#></div>

修改为

<div class="post-body"><#template:article_tag#><#article/intro#></div>

如果想在图片上增加链接，则做法如下：

打开TEMPLATE/b_article_multi.html文件或者b_article-single.html文件,在<#template:article_tag#>两边加上文章链接即可代码如下:
 

<div class="post-body"><a href="<#article/url#>" _fcksavedurl="<#article/url#>"> <#template:article_tag#></a>

进入Tags管理，给每个Tags增加一个摘要，内容为一个英文单词，用于图片文章名。

　　然后，在Blog的根下建立一个名为logo的目录。将上面命名的文件名增加.gif后缀后复制到这个目录下。

　　修改STYLE目录下的CSS文件，增加如下内容：

div.post-body img.thumb {float: right;margin: 4px 4px 4px 4px;padding: 0px;border: 0px;padding: 0px;max-width: 500px;max-height:500px;overflow:hidden;clear:both;}

以上的CSS代码在IE和FireFox下测试均显示正常。如果使用表格方式插入图片可能会引起FireFox不兼容的现象。

　　最后，重建所有文件。

　　这时候，你就可以得到和我的博客差不多的的显示效果。
 

特别说明，这个效果是以tags为标志的， 每篇文章一个tag，就是为了显示美观，多个tags的话会并列出现多个图版，破坏版面。

本文来自：月光博客www.williamlong.info

添加文章链接部分来自：我来看博客 www.wolaikan.com