Widget mạng xã hội với hiệu ứng hover đẹp mắt cho Blogger

Cool Hover Social Media Buttons For Blogger

Hôm nay Iris Tips sẽ chia sẻ cho các bạn một social widget với hiệu ứng hover đẹp mắt nhưng rất gọn nhẹ chỉ bằng CSS.

CSS

1Vào Mẫu >> Chỉnh sửa HTML và dán đoạn CSS dưới đây vào trước thẻ ]]></b:skin>

#pctoolstips{width:260px;margin:5px 20px;padding:5px}
#pctoolstips li{cursor:pointer;height:48px;position:relative;list-style-type:none}
#pctoolstips .icon{background:#D91E76 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7hhiHeq8-RzrxVr3s0GddymsSALQ6T0ugDS-rCdn5wEJiR7n0HMZKrJMfweS0KPiDTOZjgniv8x5QXwFnPAyzIuUfiFAeRiy9qwEN7Nk8CW4Rc2BqQsznxjQToG_PmR0d8I3O1xId67w/s1600/pctoolstips.blogspot.com.png') 0 0 no-repeat;background-color:rgba(217,30,118,.42);border-radius:30px;display:block;color:#141414;float:none;height:48px;line-height:48px;margin:5px 0;position:relative;text-align:left;text-indent:90px;text-shadow:#333 0 1px 0;white-space:nowrap;width:48px;z-index:5;-webkit-transition:width .25s ease-in-out,background-color .25s ease-in-out;-moz-transition:width .25s ease-in-out,background-color .25s ease-in-out;-o-transition:width .25s ease-in-out,background-color .25s ease-in-out;transition:width .25s ease-in-out,background-color .25s ease-in-out;-webkit-box-shadow:rgba(0,0,0,.28) 0 2px 3px;-moz-box-shadow:rgba(0,0,0,.28) 0 2px 3px;-o-box-shadow:rgba(0,0,0,.28) 0 2px 3px;box-shadow:rgba(0,0,0,.28) 0 2px 3px;text-decoration:none}
#pctoolstips span:hover{visibility:hidden}
#pctoolstips span{display:block;top:15px;position:absolute;left:90px}
#pctoolstips .icon{color:#fafafa;overflow:hidden}
#pctoolstips .fb{background-color:rgba(45,118,185,.42);background-position:0 -382px}
#pctoolstips .twit{background-color:rgba(0,161,223,.42);background-position:0 -430px}
#pctoolstips .google{background-color:rgba(167,0,0,.42);background-position:0 -478px}
#pctoolstips .rss{background-color:rgba(255,109,0,.42);background-position:0 -718px}
#pctoolstips li:hover .icon{width:250px}
#pctoolstips li:hover .icon{background-color:#d91e76}
#pctoolstips li:hover .fb{background-color:#2d76b9;background-position:0 2px}
#pctoolstips li:hover .twit{background-color:#00A1DF;background-position:0 -46px}
#pctoolstips li:hover .google{background-color:#A70000;background-position:0 -94px}
#pctoolstips li:hover .rss{background-color:#EC5601;background-position:0 -334px}
#pctoolstips .icon:active{bottom:-2px;-webkit-box-shadow:none;-moz-box-shadow:none;-o-box-shadow:none}

HTML

2Trở lại tab Bố cục >> thêm tiện ích HTML/Javascript và dán vào đoạn code sau

<ul id="pctoolstips">
<li ><a href="http://www.facebook.com/USERNAME1" class="icon fb">Like us on Facebook</a><span>Like us on Facebook</span>
</li>
<li ><a href="http://www.twitter.com/USERNAME2" class="icon twit" >Follow us on Twitter</a><span>Follow us on Twitter</span>
</li>
<li ><a href="G+ URL" class="icon google" >Follow us on Google+</a><span>Follow us on Google+</span>
</li>
<li ><a href="http://feeds.feedburner.com/USERNAME3" class="icon rss" >Subscribe via RSS</a><span>Subscribe via RSS</span>
</li>
</ul>

Chỉnh sửa: USERNAME1, USERNAME2, USERNAME3, G+ URL cho phù hợp với blog của bạn.

• DEMO

See the Pen qdGroz by Iris Tips (@IrisTips) on CodePen.

Nếu có bất kỳ vấn đề khó khăn hay câu hỏi gì, bạn đừng ngần ngại, hãy để lại bình luận ở form bên dưới nhé.
Chúc bạn thành công!

Created by Iris Tips

• Twitter
• Facebook
• Google+
• LinkedIn
• Pinterest

Iris Tips

Có thể bạn quan tâm