看秀app下载

Emlog技巧丨如何在美化网站侧边标签栏

【摘要】先来看看效果图:标签是随机调用的,且每次仅显示六个。教程开始:Emlog默认调用的标签栏数量为全部,所以我们如果要实现像图片一样的效果,首先要把标签仅调用六个。1、打开当前模板的module.php文件,找到以下代码:$tag_cache=$C...

先来看看效果图:

标签是随机调用的,且每次仅显示六个。

教程开始:

Emlog默认调用的标签栏数量为全部,所以我们如果要实现像图片一样的效果,首先要把标签仅调用六个。

1、打开当前模板的module.php文件,找到以下代码:

$tag_cache = $CACHE->readCache('tags');

2、在该代码下面添加:

shuffle($tag_cache); 
$tag_cache = array_slice($tag_cache,0,6);

其中第二行是控制标签数量,如果显示所有标签,则删除第二行代码。

这样我们就只在Emlog默认的标签组件内只调用6个随机标签。

3、既然我们需要修改他的样式,肯定是需要把他的class名重命名,以免冲突,找到如下代码:

	<div class="widget widget_ui_tags"><span class="icon"><i class="fa fa-tags"></i></span>
		<h3><?php echo $title; ?>云</h3>
		<div class="new-tags">
			<?php foreach ($tag_cache as $value) : ?>
				<a href="<?php echo Url::tag($value['tagurl']); ?>"><?php echo $value['tagname']; ?> (<?php echo $value['usenum']; ?>)</a>
			<?php endforeach; ?>
		</div>
	</div>

把原有的<div class="items">修改成<div class="new-tags">;

4、打开模板CSS核心文件,本站用的CSS核心文件为main.css,大部分站点应该是style.css,这个自行去查找;在适当的位置添加如下代码:

.new-tags{position:relative;padding-top:30px;width:100%;height:300px;}
.new-tags a{position:absolute;overflow: hidden;display:none;padding:5px;width:78px;height:78px;border:3px solid #fff;border-radius:50%;background:#e4e4e4;color:#FFF;text-align:center;font-size:14px;line-height:62px;transform:scale(1)!important;}
.new-tags a:nth-child(1){top:79px;left:176px;display:block;background:#ff5d5d;transform: scale(1.4);}
.new-tags a:nth-child(2){top:8px;right:26px;display:block;background:#41d39d;transform: scale(1.3);}
.new-tags a:nth-child(3){top:14px;left:35px;display:block;background:#f45f93;transform: scale(1.1);}
.new-tags a:nth-child(4){bottom:50px;left:13px;display:block;background:#fea342;transform: scale(1.1);}
.new-tags a:nth-child(5){right:170px;bottom:36px;display:block;background:#4197e2;transform: scale(1.1);}
.new-tags a:nth-child(6){right:10px;bottom:15px;display:block;background:#8c8c8c;transform: scale(1.1);}
.new-tags {height: 300px;width: 100%;background: url(https://images.52zyb.cn/FuxQyTiwQRzBkzT5aOqKnbrHqoZf) no-repeat center center;padding-top: 30px;position: relative!important;}
.new-tags a:nth-child(1) { left: 106px;}
.new-tags a:nth-child(3) {left: 20px;}
.new-tags a:nth-child(5) {right: 110px;}
.new-tags a:hover{color:#fff!important;}

5、打开模板文件header.php文件,修改对应引入的css样式版本+1即可。

如果有什么不懂的,可以留言,空白看到了会回复。

附件信息  密码:  来源:  声明: 本站所有资源都经过安全检测,请放心下载!

 资源网
 简介:我爱资源吧(www.52zyb.cn)免费资源分享平台 - 免费QQ活动,QQ资讯共享 - 好东西不私藏!

看秀app下载

帅人已评(0)