Hôm nay tôi sẽ cho bạn thấy làm thế nào bạn có thể thêm Metro phong cách biểu tượng xã hội vào blog blogger của bạn. Các biểu tượng được hoàn toàn làm bằng CSS mà không cần sử dụng bất kỳ JavaScript. Nó đi kèm với hiệu ứng di chuột và trông thanh lịch và mát mẻ.



Widget này được tạo ra bởi + Lutip.com  có 7 biểu tượng trang web mạng xã hội nổi tiếng. feeds - Facebook, Twitter, Youtube, Google+, LinkedIn, Pinterest và RSS.

Thêm các widget trong diện

Đi vào Blog Tiêu đề → Giao diện → Thêm Widget → HTML / JavaScript. Dán mã dưới đây.

<div class='metro-social'>

<li><a class="fb" href=http://www.facebook.com/vnnpay rel="nofollow"></a></li>

<li><a class="tw" href=http://twitter.com/lutip_com></a></li>

<li><a class="gp" href="https://plus.google.com/+lutipdaomynhan"></a></li>

<li><a class="pi" href=http://pinterest.com/vnnpay="nofollow"></a></li>

<li><a class="in" href=https://www.linkedin.com/in/vnnpay="nofollow"></a></li>

<li><a class="yt" href=http://www.youtube.com/vnnpay></a></li>

<li><a class="fd" href=http://feeds.feedburner.com/lutip="nofollow"></a></li>

</div>

<style>

.metro-social{width:285px}

.metro-social li{position:relative;cursor:pointer;padding:0;list-style:none}

.metro-social .fb,.tw,.gp,.pi,.in,.yt,.fd{z-index:7;float:left;margin:1px;position:relative;display:block}

.metro-social .fb{background:url(//goo.gl/6xmUk) no-repeat center center #1f69b3;width:140px;height:141px}

.metro-social .tw{background:url(//goo.gl/oyiFK) no-repeat center center #43b3e5;width:68px;height:70px}

.metro-social .gp{width:69px;height:70px;background:url(//goo.gl/oT0kF) no-repeat center center #da4a38}

.metro-social .pi{background:url(//goo.gl/7olxx) no-repeat center center #d73532;width:68px;height:69px}

.metro-social .in{background:url(//goo.gl/PhFhj) no-repeat center center #0097bd;width:69px;height:69px}

.metro-social .yt{background:url(//goo.gl/zcwjB) no-repeat center center #e64a41;width:140px;height:69px}

.metro-social .fd{background:url(//goo.gl/lhBP1) no-repeat center center #e9a01c;width:140px;height:69px}

.metro-social li:hover .fb{background:url(//goo.gl/MH8AP) no-repeat center center #1f69b3}

.metro-social li:hover .tw{background:url(//goo.gl/hHRHv) no-repeat center center #43b3e5}

.metro-social li:hover .gp{background:url(//goo.gl/wva4B) no-repeat center center #da4a38}

.metro-social li:hover .pi{background:url(//goo.gl/IORvy) no-repeat center center #d73532}

.metro-social li:hover .in{background:url(//goo.gl/2zHrm) no-repeat center center #0097bd}

.metro-social li:hover .yt{background:url(//goo.gl/I1c4a) no-repeat center center #e64a41}

.metro-social li:hover .fd{background:url(//goo.gl/CjzDP) no-repeat center center #e9a01c}

</style>

Một khi bạn đã thêm vào việc thay đổi mã văn bản màu xanh cho phù hợp. Sau đó lưu các widget và cuối cùng lưu mẫu. Bạn đang thực hiện bây giờ. Bây giờ bạn và truy cập của bạn có thể thấy giao diện người dùng Metro widget này tuyệt vời xã hội biểu tượng trên blog của bạn.