页脚小工具

页脚小工具,分为三栏,需要到主题选项--基本设置--侧边栏小工具中,勾选并启用“页脚小工具”,使用方法与其它侧边栏相同,进入后台--外观--小工具页面,可以添加任意小工具。 比如设置成我博客的样式:

页脚小工具

左侧是"导航菜单"小工具,需单独新建一个菜单,并在“导航菜单”小工具中调用这个新建的菜单,不能有二级菜单。

中间和右侧是增强文本小工具,可添加任意文字和HTML代码。

中间的三张图是将下面的代码添加到“增强文本”小工具中,修改其中图片和链接:

三张图

展开收缩
<div class="about-me-img">
	<div class="myimg">
		<div class="myqr">
			<img src="https://s1.ax1x.com/2020/10/25/Bm3sns.jpg" alt="我的微信">
			<p>我的微信</p>
		</div>
	</div>
 
	<div class="myimg">
		<div class="myqr">
			<img src="https://s1.ax1x.com/2020/10/25/Bm3sns.jpg" alt="微信公众号">
			<p>微信公众号</p>
		</div>
	</div>
	<div class="myimg">
		<div class="myqr">
			<a href="https://weibo.com/5596820771/" target="_blank">
				<img src="https://s1.ax1x.com/2020/10/25/Bm3sns.jpg" alt="官方微博">
				<p>官方微博</p>
			</a>
		</div>
	</div>
</div>

<style type="text/css">
.about-me-img .myimg {
	float: left;
	padding: 5px;
	width: 33.333333333333333333%;
}

.myqr img {
	text-align: center;
	max-width: 100%;
	width: 100%;
	height: auto;
}

.myqr img {
	-webkit-transition: all .5s ease-out 0s;
	transition: all .5s ease-out 0s;
}

.myqr:hover img {
	-webkit-transform: scale(0.9);
	transform: scale(0.9);
}
.about-me-img p {
	text-align: center;
}
</style>

两张图

展开收缩
<div class="about-me-img">
	<div class="myimg">
		<div class="myqr">
			<img src="https://s1.ax1x.com/2020/10/25/Bm3sns.jpg" alt="我的微信">
			<p>我的微信</p>
		</div>
	</div>

	<div class="myimg">
		<div class="myqr">
			<a href="https://weibo.com/5596820771/" target="_blank">
				<img src="https://s1.ax1x.com/2020/10/25/Bm3sns.jpg" alt="官方微博">
				<p>官方微博</p>
			</a>
		</div>
	</div>

	<div class="myimg"></div>
</div>

<style type="text/css">
.about-me-img .myimg {
	float: left;
	padding: 5px;
	width: 33.333333333333333333%;
}

.myqr img {
	text-align: center;
	max-width: 100%;
	width: 100%;
	height: auto;
}

.myqr img {
	-webkit-transition: all .5s ease-out 0s;
	transition: all .5s ease-out 0s;
}

.myqr:hover img {
	-webkit-transform: scale(0.9);
	transform: scale(0.9);
}
.about-me-img p {
	text-align: center;
}
</style>

一张图

展开收缩
<div class="about-me-img">
	<div class="myimg">
		<div class="myqr">
			<img src="https://s1.ax1x.com/2020/10/25/Bm3sns.jpg" alt="我的微信">
			<p>我的微信</p>
		</div>
	</div>

	<div class="myimg"></div>

	<div class="myimg"></div>
</div>

<style type="text/css">
.about-me-img .myimg {
	float: left;
	padding: 5px;
	width: 33.333333333333333333%;
}

.myqr img {
	text-align: center;
	max-width: 100%;
	width: 100%;
	height: auto;
}

.myqr img {
	-webkit-transition: all .5s ease-out 0s;
	transition: all .5s ease-out 0s;
}

.myqr:hover img {
	-webkit-transform: scale(0.9);
	transform: scale(0.9);
}
.about-me-img p {
	text-align: center;
}
</style>