Wordpress美化：作者信息卡通人物卡片自定义HTML小工具

WordPress有很多的主题都有有关作者信息的小工具，都比较好看，也可以通过自定义HTML小工具来写，我尝试了好几次，都不怎么好看，今天偶然看到一个博客作者信息小工具，感觉很好看，于是改动了一下，，分享这次wordpress美化带来这款简单的人物提示小工具卡片可以帮助各位站长解决这个问题,这次分享的Wordpress美化教程很简单，如果想要复杂的建议使用Wordpress美化插件。

<section id="custom_html-3" class="widget_text widget widget_custom_html mg-b box b2-radius"><div class="textwidget custom-html-widget"><section class="widget widget-uisdc-helper hide_sm" style="padding: inherit;">
	<div class="uisdc-helper-main">
	  <h2 class="uisdc-helper-title"> 请叫我行长 </h2>
	  <ul>
   &nbsp; &nbsp; &nbsp;<li><font color="#dd3333">●</font> 网站运维知识全都有</li><li><font color="#dd3333">●</font> 让网站飞起来牛起来</li></ul>
	  <a href="http://wpa.qq.com/msgrd?v=3&amp;uin=1355471563" target="_blank" class="btn btn-orange" data-component="open-division" data-event="hover" data-target="#uisdc_helper_wechat" rel="noopener noreferrer"> <i class="icon-wechat-1"></i> 加QQ群 </a>
	</div>
   &nbsp; &nbsp;<div class="uisdc-helper-thumb"> <img src="https://mznzd.com/imgs/V12Y7GOP44oX3q/T0po5IVZeaNliPGRfxFJTo1VHX0Zr9eQDgYCSEWpdGwTlR0gkCqlRHQ39OWEspcxvHJb0wyCM3MveHXA6zz54R1iTuQGLyXa7sw*unDWuZ4!/r" style="height: 180px;"> </div>
  </section></div></section>
  

<style type="text/css">

/* 侧栏人物小工具 */
.btn {
	display:block;
	cursor:pointer;
	border-radius:3px;
	text-align:center;
	line-height:2.4;
	outline:none;
	border:none
}
.btn-orange {
	background:#dd3333;
	color:#fff
}
.btn-orange:hover {
	color:#fff;
	background:#dd3333
}
.widget-uisdc-helper {
	position:relative;
	padding-top:10px
}
.widget-uisdc-helper .uisdc-helper-main {
	position:relative
}
.widget-uisdc-helper .uisdc-helper-thumb {
	position:absolute;
	right:0;
	bottom:0
}
.widget-uisdc-helper .uisdc-helper-title {
	font-size:16px;
	font-weight:normal;
	color:#dd3333;
	line-height:20px;
	position:absolute;
	left:12px;
	top:-12px;
	padding:0 5px;
	background: #ffffff;
}
.widget-uisdc-helper ul {
	padding:10px 24px 0 17px;
	margin-bottom:15px;
	font-size:13px
}
.widget-uisdc-helper ul li {
	line-height:17px;
	margin-bottom:6px;
	position:relative;
	color:#888
}
.widget-uisdc-helper .btn {
	display:inline-block;
	font-size:12px;
	line-height:20px;
	margin:10px 0 18px 17px;
	padding:4px 18px;
	position:relative;
	z-index:20
}

</style>