仿优设侧边栏小工具，适用于wordpress主题，B2测试通过。
效果图
代码如下：
<section class="widget widget-uisdc-helper hide_sm">
<div class="uisdc-helper-main">
<h2 class="uisdc-helper-title"> 优设学习助手 </h2>
<ul>
<li>行业热点，第一时间全知晓</li><li>在线答疑，设计问题来私聊</li> </ul>
<a href="http://wpa.qq.com/msgrd?v=3&uin=1234567" target="_blank" class="btn btn-orange" data-component="open-division" data-event="hover" data-target="#uisdc_helper_wechat"> 加我QQ </a>
</div>
<div class="uisdc-helper-thumb"> <img src="./img/uisdc-uu-11pic.png" alt="img"> </div>
<!--
<div class="uisdc-helper-wechat" id="uisdc_helper_wechat">
<div class="helper-content">
<i class="thumb " style="background-image:url(#)"></i> <h5>微信号：youshemei6</h5>
</div>
</div>
-->
</section><style type="text/css">
.widget-uisdc-helper{position:relative;padding-top:10px}.widget-uisdc-helper .uisdc-helper-main{border:1px solid #f3f3f3;position:relative}.widget-uisdc-helper .uisdc-helper-thumb{position:absolute;right:0;bottom:0}.widget-uisdc-helper .uisdc-helper-thumb .thumb{padding-top:132.075%;background-size:contain}.widget-uisdc-helper .uisdc-helper-title{font-size:16px;font-weight:normal;color:#ff5c00;line-height:20px;position:absolute;left:12px;top:-11px;padding:0 5px;background:#fff}.widget-uisdc-helper ul{padding:25px 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:0 0 18px 17px;padding:4px 8px;position:relative;z-index:20}.widget-uisdc-helper .uisdc-helper-wechat{position:absolute;left:50px;bottom:0;padding:10px 15px 8px;text-align:center;background:#fff;box-shadow:0 16px 32px 0 rgba(0,0,0,0.06);transform:translate(-100%, 0);visibility:hidden;opacity:0;transition:all .2s}.widget-uisdc-helper .uisdc-helper-wechat.show{left:5px;visibility:visible;opacity:1;transition:all .2s}.widget-uisdc-helper .uisdc-helper-wechat::after{content:'';display:block;position:absolute;left:100%;bottom:20px;width:0;height:0;border:8px solid #fff;border-right-color:transparent;border-top-color:transparent;border-bottom-color:transparent}.widget-uisdc-helper .uisdc-helper-wechat .thumb{width:106px;padding-top:106px;background-size:contain;margin:0 auto}
.widget-uisdc-helper .uisdc-helper-wechat h5{font-size:12px;font-weight:normal;color:#888;line-height:2;white-space:nowrap}
.widget-uisdc-helper .btn {
border-radius: 4px;
background: #ff5c00;
color: #fff;
text-decoration: none;
}
</style>
