为你的zblog博客文章添加版权声明

简介

我想大家在浏览其他博客文章的时候会发现在文章尾部会有一段版权说明吧,就是类似‘本文由XXX原创,转载请注明XXXX’,那么这个功能在zblog上要怎么操作呢?下面我们来看下效果以及代码。为你的zblog博客文章添加版权声明  第1张

效果一

为你的zblog博客文章添加版权声明  第2张

css代码

.open-message{margin-bottom:10px;padding:5px 10px;border-radius:2px;background-color:#fcf8e3;border:1px solid #faebcc;color:#8a6d3b}

将css代码添加至主题中的css文件中。

HTML代码

<div class="open-message" style="border:#00a67c 1px solid;border-radius:5px 5px 5px 5px;">
<i class="fa fa-bullhorn"></i>转载请注明:<a href="{$host}">{$name}</a>»<a href="{$article.Url}">{$article.Title}</a></div>

将div代码添加至主题中的文章页模板中,不出意外的话一般都是post-single.php(template/post-single.php),在模板文件中找到{$article.Content}这个标签,这是文章正文输出的标签,将代码添加在标签div的下方。

代码说明:

<i class="fa fa-bullhorn"></i> <!---此代码为Font Awesome字体图标--->

Font Awesome图标安装及使用方法

{$host} <!---此标签为首页链接--->
{$name} <!---此标签为网站标题--->
{$article.Url} <!---此标签文章链接--->
{$article.Title} <!---此标签文章标题--->

效果二

为你的zblog博客文章添加版权声明  第3张鼠标悬停效果为你的zblog博客文章添加版权声明  第4张

css代码

.post-copyright{background-color:#f2f2f2;font-size:12px;color:#999;padding:6px 15px 5px;border-radius:2px;margin-top:10px;margin-bottom:30px}
.post-copyright:hover{background-color:#FF5E52;color:#fff}

HTML代码

<p class="post-copyright">除特别注明外,本站所有文章均为<a href="{$host}" style="color:#51aded;">{$name}</a>原创,转载请注明出处来自<a href="{$article.Url}" style="color:#51aded;">{$article.Url}</a></p>

效果二的添加方法与上述效果一是相同的。  

最后编辑于:2015/10/16作者: 烽烟无限

发表评论