Demo Pictures :
+ Hướng dẫn :
Bước 1: Thêm đoạn code sau vào trên thẻ đóng ]]></b:skin
.social{ max-width:300px;} .social li{ min-height:40px; clear:both; float:none; margin-bottom:10px;} .social a{ color:#232323; position:relative; display:block; line-height:40px; padding-left:55px;} .social span{ display:block; width:40px; height:40px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivSOcZQrEEvjksaA0IqyBs0hKsqTeg-MkqTk2uQbcPSMUHgYbf6jWAJ8rNsDlWBWDFASAf2p7s995tJtuqf5X0_bqegUqW-pKQaIghnn6ixJ6wcXi9hMiU2oMbcNDyirq19Zb66TFY/s1600/social.png) no-repeat; position:Absolute; left:0; border-radius:32px; box-shadow:0 2px 4px rgba(0,0,0,0.2);} .social .facebook{ background-color:#2d309a;} .social .twitter{ background-color:#00FFFF; background-position:0 -40px;} .social .pinterest{ background-color:#FF0000; background-position:0 -80px;} .social .email{ background-color:#00FF00; background-position:0 -120px;} .social .rss{ background-color:#ffba16; background-position:0 -160px;}.social a{ /*--code trước--*/ z-index:1; -moz-transition:color 0.4s ease; -webkit-transition:color 0.4s ease; -o-transition:color 0.4s ease; transition:color 0.4s ease;} .social span{ /*--code trước--*/ z-index:-1; opacity:0.8; -moz-transition:opacity 0.4s ease,width 0.4s ease; -webkit-transition:opacity 0.4s ease,width 0.4s ease; -o-transition:opacity 0.4s ease,width 0.4s ease; transition:opacity 0.4s ease,width 0.4s ease;} .social a:hover{ color:white; text-shadow:0 1px 0 rgba(0,0,0,0.5);} .social a:hover span{ width:300px; opacity:1;}
Bước 2 : Vào Bố cục rồi thêm tiện ích HTML/JavaScript sau đó dán code này vào :
<ul class="social">
<li><a href="#"><span class="facebook icon"></span>Join Us on Facebook</a>
</li> <li><a href="#"><span class="twitter icon"></span>Follow Us on Twitter</a>
</li> <li><a href="#"><span class="pinterest icon"></span>Join Us on Pinterest</a>
</li> <li><a href="#"><span class="email icon"></span>Send Us Email</a>
</li> <li><a href="#"><span class="rss icon"></span>Subscrible RSS Feed</a>
</li></ul>
Thay đổi các liên kết phù hợp với Blog của bạn.
Chúc các bạn thành công !
Đăng nhận xét