Social Widget thông tin cá nhân phong cách mới Blogspot

Ở những bài viết trước mình đã giới thiệu với các bạn Widget Liên hệ cho Blogger, Và tiếp theo bài này chia sẻ với các bạn Social Widget thông tin cá nhân phong cách mới Blogspot

Ảnh demo Widget Thông tin cá nhân

Để thêm Social Widget thông tin cá nhân phong cách mới cho Blogspot các bạn làm theo các bước sau:
1- Đăng nhập blog
2- Vào thiết kế
3- Vào bố cục
4- Chọn thêm 1 tiện ích HTML/Javascrip và dán code tương ứng với mẫu bạn chọn rồi save lại

<div class='post-dalem'>
<p><a href="http://www.tipstrikblogging.com/2013/05/membuat-social-profile-widget-keren.html">Get back to post; Get this gadget for your blog; Checkout install instructions</a>
<div class='metro-social'><li><a class="fb" href=http://www.facebook.com/amatullah.syukur rel="nofollow"></a></li>
<li><a class="tw" href=http://twitter.com/amatullahsyukur></a></li>
<li><a class="gp" href="https://plus.google.com/116382152511220195182"></a></li>
<li><a class="pi" href=http://pinterest.com/amatullahsyukur rel="nofollow"></a></li>
<li><a class="in" href=https://www.linkedin.com/in/amatullahsyukur rel="nofollow"></a></li><li><a class="yt" href=http://www.youtube.com/amatullahsyukur></a></li>
<li><a class="fd" href=http://feeds.feedburner.com/amatullahsyukur rel="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>

Cuối cùng save lại và xem kết quả.
Chú Ý: Các bạn thay phần màu đỏ thành của bạn cho phù hợp nhé!
Chúc các bạn thành công

Nguồn : iChiaSe.Biz

Tag : Blogspot, Thủ thuật blogspot