Nút mạng xã hội phong cách

[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ó!

Demo như ảnh trên

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 KTheme 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/StarQuang.com></a></li>
<li><a class="tw" href=http://twitter.com/StarQuang.com></a></li>
<li><a class="gp" href="https://plus.google.com/KTheme.com"></a></li>
<li><a class="pi" href=http://pinterest.com/StarQuang.com></a></li>
<li><a class="in" href=https://www.linkedin.com/in/StarQuang.com></a></li>
<li><a class="yt" href=http://www.youtube.com/StarQuang.com></a></li>
<li><a class="fd" href=http://feeds.feedburner.com/StarQuang.com></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/AVvXsEiNoD2sQkZ2PKilN1_A5y0hNyau9PxcF70aaGXax3y_qHonbcLSvhqScKwcWwFYG3qgulfQsAZTBxQ_2UkIdrUkeRm-1dUukY9TGBLwi1rHLTbWQq7MZ-_t0V40j_EZ3dV8zqA9AlV4KY-G/s200/facebook.png) no-repeat center center #1f69b3}
.metro-social li:hover .tw{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgt2EaqkTX66tkmgc9YpnUS0gw3dMLYqPiq5SSV0cWiZR5nely2WNFsow8XOs6FJuC8wWiB6OQVTz7XLCBBCXTg3-V12z8dVa4biPs4VE2xzEyvgoy8XakTxNepZm_8rerRJf0gs2NMdt98/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/AVvXsEhdquAn0KHCeif3YQUBDv7ugkkZ3BsDpqZEHNh82tGHOrBX_M4TLwuNAOJSeXpO4Qi1_kpXi1MT1OZZcC3d9uxODH0iMqV3mSM6shbEZ-k-7n7AeQwRTIfIJIAZAEYXeO-HMNz_BNE46Z48/s200/google%252Bplus.png) no-repeat center center #da4a38}
.metro-social li:hover .pi{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNFLZeOKrb6qYnk_Wf2ngAf7GLjoF5Koh9e6ZsyXBwnmKPIpUuT3iQ_87Jke_E-U2frwJoJSD0719QP7q21NhotghUO6q7AqFikPu4JWBm9w_aOL0UM1g-5ZO4rn-kV2nUKZhzu7JjsXk/s45/pinterest.png) no-repeat center center #d73532}
.metro-social li:hover .in{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSgTFCmNiCNcNqnPxonKQEwPM-EtGYS3gleDto3ldJ-EccUjRcI1MGDBei9B44iOP5cT87evD_34a3jslU6tldynIBKLH7kfqzWz9ZUzB9HhcqRjXAem5uWmvnPL9rFHQ2gQlCcVQ-Cyk/s45/linkedin.png) no-repeat center center #0097bd}
.metro-social li:hover .yt{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1B7j8JH1izUJbrhw4jsPfRiLwyFEr4MazQzo82culckNCzPDmiqYoE-WHA9mUOvgvh7Y6rDJyVZla-w_7LycW58u3tgMHNAVxpXzVxeDHzQ9WoJcEdIgXKpM6lQ0koGo_6gvyWn8DSIE/s45/youtube.png) no-repeat center center #e64a41}
.metro-social li:hover .fd{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4XVBbp2JWooTDGE6GJFlEZVxA7l9ENiYe7Hkv9WkZ-aZclUTw8ff06pEd8rVbjxzsg55c6fZzgG0-AfC5ynE_BPjGd_0ypB4s4PxoJ_A8THaFLoTolw6lY-p7Z3ebUX3hjTyH3rbNfZpd/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 KTheme.com rồi. Chúc các bạn thành công nhé!