1. 我要软文网首页
  2. wordpress教程

wordpress小工具作者栏代码,wordpress作者栏展示代码分享

很多人来问我网站的边栏作者怎么搞的那么,我就出一个教程来让大家看一下。

效果图:

wordpress小工具作者栏代码,wordpress作者栏展示代码分享

html代码展示:

<div class=”comment-info” style=”
bode: 1px solid #efefef;
border-bottom: 1px solid #efefef;
padding: 5px 0px 5px 0px;
“>
<a href=”https://www.yaoruanwen.com/user/27″ target=”_blank” rel=”noopener noreferrer”>
<img alt=”卢松松 ” src=”https://images.yaoruanwen.com/member/avatars/f10e0327ad868d13.1587109956.jpg” class=”avatar avatar-60 photo” height=”40″ width=”40″ style=” border-radius: 18px 18px 18px 18px;”></a><a href=”https://www.yaoruanwen.com/user/27″> <span>卢松松</span></a><a href=”https://www.yaoruanwen.com/asks”><span class=”TW_6″>向他提问</span></a><span>知名站长,自媒体人</span>
</div>
<div class=”comment-info” style=”
bode: 1px solid #efefef;
border-bottom: 1px solid #efefef;
padding: 5px 0px 5px 0px;

“>
<a href=”https://www.yaoruanwen.com/user/21″ target=”_blank” rel=”noopener noreferrer”>
<img alt=”牛鞭士” src=”https://images.yaoruanwen.com/member/avatars/c048e8850243be80.1585730776.jpg” class=”avatar avatar-60 photo” height=”40″ width=”40″ style=” border-radius: 18px 18px 18px 18px;”> </a>

<a href=”https://www.yaoruanwen.com/user/21″> <span>牛鞭士</span>

</a><a href=”https://www.yaoruanwen.com/asks”><span class=”TW_5″>向他提问</span></a>
<span>牛鞭士科技自媒体平台</span>
</div>
<div class=”comment-info” style=”
bode: 1px solid #efefef;
border-bottom: 1px solid #efefef;
padding: 5px 0px 5px 0px;
“>
<a href=”https://www.yaoruanwen.com/user/3″ target=”_blank” rel=”noopener noreferrer”>
<img alt=”王一半” src=”https://images.yaoruanwen.com/member/avatars/87e4b5ce2fe28308.1583479793.jpg” class=”avatar avatar-60 photo” height=”40″ width=”40″ style=” border-radius: 18px 18px 18px 18px;”> </a>

<a href=”https://www.yaoruanwen.com/user/3″> <span>王一半</span>

</a><a href=”https://www.yaoruanwen.com/asks”><span class=”TW_4″>向他提问</span></a><span>一名站长,自媒体及程序员</span>
</div>
<div class=”comment-info” style=”
bode: 1px solid #efefef;
border-bottom: 1px solid #efefef;
padding: 5px 0px 5px 0px;
“>
<a href=”https://www.yaoruanwen.com/user/5″ target=”_blank” rel=”noopener noreferrer”>
<img alt=”王听风” src=”https://images.yaoruanwen.com/member/avatars/b7fbbce2345d7772.1583480089.jpg” class=”avatar avatar-60 photo” height=”40″ width=”40″ style=” border-radius: 18px 18px 18px 18px;”> </a>

<a href=”https://www.yaoruanwen.com/user/5″> <span>王听风</span>

</a><a href=”https://www.yaoruanwen.com/asks”><span class=”TW_3″>向他提问</span></a><span>知名站长,我要推广网,我要软文网创始人</span>
</div>
<div class=”comment-info” style=”
bode: 1px solid #efefef;
border-bottom: 1px solid #efefef;
padding: 5px 0px 5px 0px;
“>
<a href=”https://www.yaoruanwen.com/user/23″ target=”_blank” rel=”noopener noreferrer”>
<img alt=”聚点网络” src=”https://images.yaoruanwen.com/member/avatars/cfc748049e45d87b.1585731220.jpg” class=”avatar avatar-60 photo” height=”40″ width=”40″ style=”border-radius: 18px 18px 18px 18px;”></a>
<a href=”https://www.yaoruanwen.com/user/23″><span>聚点网络</span></a>
<a href=”https://www.yaoruanwen.com/asks”> <span class=”TW_2″>向他提问</span></a>
<span>&nbsp;&nbsp;分享每日科技要文</span>
</div>
<div class=”comment-info” style=”
bode: 1px solid #efefef;
border-bottom: 1px solid #efefef;
padding: 5px 0px 5px 0px;
“>
<a href=”https://www.yaoruanwen.com/user/2″ target=”_blank” rel=”noopener noreferrer”>
<img alt=”骑士团队” src=”https://images.yaoruanwen.com/member/avatars/28d9d4c2f636f067.1583479571.jpg” class=”avatar avatar-60 photo” height=”40″ width=”40″ style=” border-radius: 18px 18px 18px 18px;”> </a>

<a href=”https://www.yaoruanwen.com/user/2″> <span>骑士团队</span>

</a>
<a href=”https://www.yaoruanwen.com/asks”> <span class=”TW_u”>向他提问</span> </a>

<span>&nbsp;&nbsp;骑士团队,为社群营销服务</span>
</div>

css代码展示

.TW_u:hover{
background-color:#ed7316;
color:white;
border: 1px solid #ed7316;
}
.TW_u{
margin-left: 30%;
font-size: 10px;
padding: 2px 12px;
border: 1px solid #999;
border-radius: 3px;
color: #666;
}
.TW_1{
margin-left: 0;
font-size: 10px;
padding: 2px 12px;
border: 1px solid #999;
border-radius: 3px;
color: #666;
}
.TW_2{
margin-left: 30%;
font-size: 10px;
padding: 2px 12px;
border: 1px solid #999;
border-radius: 3px;
color: #666;
}
.TW_3{
margin-left: 35%;
font-size: 10px;
padding: 2px 12px;
border: 1px solid #999;
border-radius: 3px;
color: #666;
}
.TW_4{
margin-left: 35%;
font-size: 10px;
padding: 2px 12px;
border: 1px solid #999;
border-radius: 3px;
color: #666;
}
.TW_5{
margin-left: 35%;
font-size: 10px;
padding: 2px 12px;
border: 1px solid #999;
border-radius: 3px;
color: #666;
}
.TW_6{
margin-left: 36%;
font-size: 10px;
padding: 2px 12px;
border: 1px solid #999;
border-radius: 3px;
color: #666;
}
.TW_1:hover{
background-color:#ed7316;
color:white;
border: 1px solid #ed7316;
}
.TW_2:hover{
background-color:#ed7316;
color:white;
border: 1px solid #ed7316;
}
.TW_3:hover{
background-color:#ed7316;
color:white;
border: 1px solid #ed7316;
}
.TW_4:hover{
background-color:#ed7316;
color:white;
border: 1px solid #ed7316;
}
.TW_5:hover{
background-color:#ed7316;
color:white;
border: 1px solid #ed7316;
}
.TW_6:hover{
background-color:#ed7316;
color:white;
border: 1px solid #ed7316;

}

完整代码下载:本地下载

来源:我要软文网,欢迎分享转载,请注明出处:https://www.yaoruanwen.com/n/28706.html

发表评论

电子邮件地址不会被公开。 必填项已用*标注

评论列表(7条)

  • ipouczx
    ipouczx 2020年2月12日 12:52

    鼠标移动上去的按钮背景颜色怎么改啊

  • 犯得上的
    犯得上的 2020年3月8日 12:59

    不错,我博客已经装上了

  • 流逝大
    流逝大 2020年3月18日 17:50

    谢谢

  • 倒萨倒萨
    倒萨倒萨 2020年4月1日 23:15

    还是可以的,主要是主题不自带,可以写成一个wordpress插件就好了

  • 渠道nsa
    渠道nsa 2020年4月25日 15:09

    之前找了好久,谢谢啦

  • ui打算
    ui打算 2020年4月25日 15:14

    我的博客已经安装上了,哈哈

  • 后二师兄
    后二师兄 2020年4月28日 18:35

    听风出品,必属精品!

Copyright© 2009-2020 我要软文网