Tạo Widget theo dõi các trang mạng xã hội chuyên nghiệp cho blogger (blogspot)

BẠN CÓ BIẾT?

TRONG CÁC THUẬT TOÁN  ĐÁNH GIÁ XẾP HẠNG CỦA GOOGLE THÌ VIỆC THÊM CÁC TRANG MẠNG XÃ HỘI LÀ 1 CÁCH ĐƯA WEBSITE CỦA BẠN RA TẦM QUỐC TẾ.

Vì vậy việc thêm các nút Follow các trang mạng xã hội là việc không thể thiếu trong các website chuyên nghiệp.

Vì vấn đề trên. Hôm nay, tôi xin chia sẻ cho các bạn cách
Tạo Widget theo dõi các trang mạng xã hội chuyên nghiệp cho blogger (blogspot)

Chỉ cần chèn đoạn mã sau đây vào HTML của web hoặc vào một Widget HTML/Javascript.

Đầu tiên bạn vào Blog => Bố cục => Thêm tiện ích => HTML/JavaScript và dán đoạn mã code dưới đây vào và Lưu lại.

CODE:

 <div class='metro-social'>
<li><a class="fb" href=https://www.facebook.com/hungtmh2005></a></li>
<li><a class="tw" href=http://twitter.com/terocket></a></li>
<li><a class="gp" href=https://plus.google.com/Terocket"></a></li>
<li><a class="pi" href=http://pinterest.com/terocket></a></li>
<li><a class="in" href=https://www.linkedin.com/in/terocket></a></li>
<li><a class="yt" href=http://www.youtube.com/terocket></a></li>
<li><a class="fd" href=http://feeds.feedburner.com/terocket></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(http://3.bp.blogspot.com/-gDUOorsTaS8/URoqPnM84zI/AAAAAAAAJ6U/Xhmy7cIpz2M/s200/facebook.png) no-repeat center center #1f69b3}
.metro-social li:hover .tw{background:url(http://1.bp.blogspot.com/-ACiFLecWLrU/URom7CIU1aI/AAAAAAAAJ5o/FpAf2PXkzH0/s74/twitter-bird-dark-bgs.png) no-repeat center center #43b3e5}
.metro-social li:hover .gp{background:url(http://1.bp.blogspot.com/-xLeqmsg2KY0/URoqO5Y5ikI/AAAAAAAAJ58/RaxLc_hv-Fc/s200/google%252Bplus.png) no-repeat center center #da4a38}
.metro-social li:hover .pi{background:url(http://1.bp.blogspot.com/-namunMjzveg/USC_mj8e7fI/AAAAAAAAKIo/hfylnwqGQmo/s45/pinterest.png) no-repeat center center #d73532}
.metro-social li:hover .in{background:url(http://4.bp.blogspot.com/-joDwAv84KDs/USC_mviM2uI/AAAAAAAAKIs/KZB9EsNAKIA/s45/linkedin.png) no-repeat center center #0097bd}
.metro-social li:hover .yt{background:url(http://3.bp.blogspot.com/-hLKJ60klMs0/USC_mh_GWYI/AAAAAAAAKIk/6CmSTv8xQGE/s45/youtube.png) no-repeat center center #e64a41}
.metro-social li:hover .fd{background:url(http://1.bp.blogspot.com/-s-lGqHCMnbA/URoqPH64IJI/AAAAAAAAJ6I/99a4xAxc98Q/s45/feed.png) no-repeat center center #e9a01c}
</style>

Ghi chú: Bạn cần thay đoạn màu xanh thành địa chỉ các trang cộng đồng của bạn nha. Thế là xong!


Kết luận

- Các code trên là một widget CSS tinh khiết (không ảnh hưởng gì tới các đoạn CSS trong template nên các bạn cứ yên tâm nhé!)

- Bạn có thể tùy biến (chỉnh sữa) một các dễ dàng.

/*----Full Width Post-----*/ [full_width] /*----Sidebar Left Post-----*/ [sidebar_left] /*----Sidebar Right Post-----*/ [sidebar_right]