Nút mạng xã hội đẹp cho Blogspot Blogger

Nút mạng xã hội đẹp cho Blogspot Blogger

Chào các bạn hôm nay Mình xin hướng dẫn các bạn tạo Nút mạng xã hội đẹp cho blogspot nhé

Thủ thuật này đơn giản và rất dễ làm

Demo
click to view

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

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/Tên bạn></a></li><li><a class="tw" href=http://twitter.com/Tên bạn></a></li><li><a class="gp" href="https://plus.google.com/Tên bạn"></a></li><li><a class="pi" href=http://pinterest.com/Tên bạn></a></li><li><a class="in" href=https://www.linkedin.com/in/Tên bạn></a></li><li><a class="yt" href=http://www.youtube.com/Tên bạn></a></li><li><a class="fd" href=http://feeds.feedburner.com/Tên bạn></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/AVvXsEjywqSXCbHbIyJQYm3oOUC9vVCo7s9SnJ2AojRsFYuCR4AbNhXO8shrUXcxU6kQssL513_VQArmNssri43xn27M1DxP6BXm6vseaNUefJefTm3bf222uABBp7f4IUubkU8SD2quLGE7b9p3/s200/facebook.png) no-repeat center center #1f69b3}.metro-social li:hover .tw{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijtRND9TaGnT9Nlr25WhliDxXdKDQl2wxtboMpbABTZlhhMdv2PumqP9_AFQ3NOkqq4t5VwR8L4-7G82VPTfppRrED77Nz7a_kwPNaU0TqSOWMGVqL3S_6rQxAdjicrUpIuV4zWYyF2RwC/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/AVvXsEhrYSATD8kg_w4OJXHdvDQ_-Kzc2E5FQ1pOdGcygw1UzlHxaISJvqedihcWnJzs48yVCoWj2W5z7Tw40B80wc5TcoIhfCgmms_MAoEUi4LlHhv8MRLR-37qgg8npnVvkxxeN_3dT0QrkmZN/s200/google%252Bplus.png) no-repeat center center #da4a38}.metro-social li:hover .pi{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZBH_vSlfY17Wfl5sLcCcW6yaMeV5vVbsrxFnJI0RmlhOE7FTUtSlsrQu5zLR_r4Z1fwdUdxEZSCgob4o-Q4R7UbSSKjcFwGQYX6V0rI-7MzGF-UU7ouO0OT9gNjeLhEso6JtAQgdaOj4/s45/pinterest.png) no-repeat center center #d73532}.metro-social li:hover .in{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDZiOh8ivgknmTYvQfw6Q6OexXNPRofgJU7WEuIhMJsHD47ya-us3q5cMszJ1JRBY_d-Fiv9LpWM7A5tK6zq1jA_TIVoEzpwogCVRypy2uKmLNGgbbz1eX7cj6rAB3OYIPJlGHflCJ7Pc/s45/linkedin.png) no-repeat center center #0097bd}.metro-social li:hover .yt{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5iSHqgfKyCLnqicKG1JLmPd78zIXR7s2CQ19ZGgA6EvxBF8cD__mUDuKFJZv4ngfMbwq6YU24eI3WLSteH90pl1OoHnmse94whFhQe4MH_nyu4NkQ1Mz4cIa8UYQwWOsiae0m2par86Q/s45/youtube.png) no-repeat center center #e64a41}.metro-social li:hover .fd{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjODO7Y8xhpU_DJo5TU76_JG1a_MuWJzlD2m6jY2s9WPaSsiz6uX85TR0QyRFwlHE5FPBrOh0uGY2LU-btKx-qEufNTQfgfgeh_1WUOLr3PC00zc1CLmP6UrOG1FSCWU_cJLDA4vXVi6EXZ/s45/feed.png) no-repeat center center #e9a01c}</style>