[Tips] - Nút mạng xã hội phong cách Metro cho Blogspot Blogger

[Tips] - Nút mạng xã hội phong cách Metro cho Blogspot Blogger rất chuyên nghiệp và hiện đại

Tiếp tục hướng dẫn các bạn thủ thuật tạo các nút mạng xã hội social button. Thủ thuật lần này có tên là [Tips] - Nút mạng xã hội phong cách Metro cho Blogspot Blogger. Thủ thuật này mang phong cách giao diện của Metro phẳng, rất hiện đại, đơn giản, dễ thương và dễ nhìn. Chắc chắn các bạn sẽ hài lòng và thích thú với nó!

Live Demo

Thủ thuật blog này được bố cục rất đơn giản, màu sắc rất bắt mắt và dễ lấy được cảm tình của người đọc. Tăng tính tương tác cho website và trải nghiệm người dùng. Và giờ thì cùng Terocket thực hiện thủ thuật blog này bạn nhé!

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 Title → Layout → Add Widget → HTML/JavaScript và dán đoạn mã code dưới đây vào và Lưu lại.

<div class='metro-social'>
<li><a class="fb" href=http://www.facebook.com/Terocket></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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEit2oC6O0eTX-oKGPi8jvyDT7RIXiz-zGKVdcSYoihbnq2j-X_F7Hs0PccYiOkvlgN6fRPj_5wUgI7BCH-_vxB2q3x8MsTzkWNlXcLAxCbHZmuNb229OBq9Dg9gW6C5S5uDL4ZWlbbOIshZ/s200/facebook.png) no-repeat center center #1f69b3}
.metro-social li:hover .tw{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiuZKP7FBCQPKsFFG-4NUqHEEMF1B6RmLmwvnUB-fe6B4COsOgIOdFk6V-fJ48euXrcHsSzad6CcFIiU1kfKMe1AJMU3EStIsH2dDN-wavcxIzKr2wjUTSXl4Wil35J72D3nOAzqYYolz4/s74/twitter-bird-dark-bgs.png) no-repeat center center #43b3e5}
.metro-social li:hover .gp{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhF3mh5mxJ6axqUhU0-3leyOI97a2NtxAbX5sqkoV_cvrQk7z-smpRhgYOM5cMvqqENTRakxlc8yvawcbi6zcWL0Xb1QZ_SelsvwvQRrGZ-GZ97t3RT4Hm15V-fCAXQRAYpUkg5h-jL3nV1/s200/google%252Bplus.png) no-repeat center center #da4a38}
.metro-social li:hover .pi{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjow2krWrvuqqKHsSVr2jiGSlJax8t-WbAqzFqLvfMoNasBm4NHcuZ-jKWPbKaML9ibsJ1HQ1mfSOf0dkBaxPrmGTsMpCt3idFHSYbD2WVCmnFc8ymztfPaLESSmX3e-DVS85e206pEZhQ/s45/pinterest.png) no-repeat center center #d73532}
.metro-social li:hover .in{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2NFdzZtsPPh5XWZDQQ6iE_1e90AD4gNvHbLXtuTPityAPyGgyhTyL7uBcrvc6MlpzZWE1c1u26nzNdBPNFHNuZw3qYg_MZkqishRkbLtTdizxH8J038ZeOMSz_8-lBixGTmISsj-_YVM/s45/linkedin.png) no-repeat center center #0097bd}
.metro-social li:hover .yt{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUY4mbW9BRzcQJxz-eiKTaxVMHCMA_N10TT-GVBJIBeOMQeKylZdcku46DLwib4MDCSG8INkN3dyOKfTFvtzaqMVMBeqQbU2-1QM3nlM5gCJX1T7t8CK2vYXseRS1KnX7oLAk3nnPKdi4/s45/youtube.png) no-repeat center center #e64a41}
.metro-social li:hover .fd{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJjRBhl9zuiWfewS7JPTureEow1uref_Lfv-i9r1XEndW-gWOjsm1Al83LWQKC2tbsxhsHXtqH0vjM4uQOr9srukLkt4cxcYjuVv8nZUDR4FH7JqEpoHIUiY1nUKIeb6xyGdGbLlU8EyZ_/s45/feed.png) no-repeat center center #e9a01c}
</style>

Vậy là đã xong thủ thuật blog [Tips] - Nút mạng xã hội phong cách Metro cho Blogspot Blogger tại Terocket rồi. Chúc các bạn thành công nhé!

Các bạn có thể tham khảo một số thủ thuật tạo nút tại Terocket sau đây nhé

1. [Tips] - Nút Huy hiệu / Badge Buttons tròn, hoa văn 7 sắc cầu vòng cho Blogspot Blogger
2. [Tips] - Tạo nút Social Buttons cổ điển trượt màu khi rê chuột vào cho Blogspot Blogger
3. [Tips] - Nút Download Buttons bằng CSS hiệu ứng giản ra khi rê chuột cho Blogspot Blogger
4. [Tips] - Tạo nút Social Buttons lớn kiểu Metro bóng mờ cho Blogspot Blogger
5. [Tips] - Tạo nút Social Buttons hiệu ứng bong bóng mờ cho Blogspot Blogger
6. [Tips] - Bộ nút Share Buttons CSS mờ trong suốt cho Blogger/Blogspot
7. [Tips] - Bộ nút Share Buttons hiệu ứng tự động hiện ở dưới lên cho Blogspot Blogger
8. [Tips] - Nút Facebook share trượt hai bên cho Blogger
9. [Tips] - Nút buttons động bằng CSS3 cho Blogger V1

Trứng Vịt - Terocket