Social Profile Widget - Kênh mạng phong cách giao diện phẳng cho Blogpsot

Hôm nay, ITViet360 nhận được yêu cầu từ 1 bạn độc giả hỏi về Social Profile cho blogspot của mình và cách làm như thế nào. Khá đẹp với thiết kế theo giao diện phẳng, Social Profile Widget Blogspot dưới đây ITViet360 giới thiệu sẽ đáp ứng được yêu cầu của các bạn.

Xem demo trực tiếp tại bài viết demo: Social prodile widget blogspot

Ưu điểm của Social Profile Widget cho blogger này:

- Thêm được đa kênh mạng xã hội
- Hiệu ứng và thiết kế bắt mắt.
- Chỉ sử dụng CSS làm hiệu ứng nên nhẹ nhàng, không ảnh hưởng tới tốc độ load của site.
...

Hướng dẫn thêm Social Profile Widget cho blogspot của bạn

- Bước 1: Vào bảng điều khiển Blogger -> bố cục (Layout) -> Thêm tiện ích (Add a widget) -> HTML/Javascript.
- Bước 2: Dán code dưới đây vào tiện ích vừa thêm

<div class='metro-social'>
<li><a class="fb" href=http://www.facebook.com/itviet360 rel="nofollow"></a></li>
<li><a class="tw" href=http://twitter.com/phongvu18nd></a></li>
<li><a class="gp" href="https://plus.google.com/+PhongVũSEO"></a></li>
<li><a class="pi" href=http://pinterest.com/#### rel="nofollow"></a></li>
<li><a class="in" href=https://www.linkedin.com/in/#### rel="nofollow"></a></li>
<li><a class="yt" href=http://www.youtube.com/user/itviet360></a></li>
<li><a class="fd" href=http://feeds.feedburner.com/itviet360 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>

Trong đó: các kênh mạng xã hội được bôi màu vàng thay thế bằng kênh mạng của bạn
- Lưu tiện ích lại và xem kết quả.
Chúc các bạn vui vẻ !

Nguồn ItViet360.com

Socializer Widget by Nguyen D. Khanh

SOCIALIZE IT →

Tweet

FOLLOW US →

SHARE IT →

Các bạn có thể tham khảo thêm nhiều kiến thức từ các bài viết mà mình đã SEO bằng các Từ khóa bên dưới bài đăng nầy để tìm hiểu thêm về các khái niệm và ứng dụng có liên quan nhé..