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>

Các bạn chỉ cần thany Tên Bạn cho đúng với của bạn là được chúc các bạn thành công

Unknown

Add Comment

Thủ-Thuật-Blogger

Monday, December 29, 2014

About Admin

Mang thế giới Template Blogger đến với bạn 1 cách hoàn thiện nhất. Chúng tôi chuyên sưu tầm template blogspot trên nguồn internet

Tạo nút Social Buttons cổ điển trượt màu khi rê chuột vào cho Blogspot BloggerTạo nút Social Buttons cổ điển trượt màu khi rê chuột vào cho Blogspot Blogger Với thủ thuật blo
Tạo Recent Posts 3 cột với style thumbnail Tạo Recent Posts 3 cột với style thumbnail Bước 1: Các bạn vào Bố cục→Thêm tiệc ích HT
Hướng dẫn thêm giao diện Wap/Web vào blogger Hướng dẫn thêm giao diện Wap/Web vào blogger Để thêm giao diện wap tất nhiên bạn phải có 1 temp
Tạo Biểu Mẫu Liên Hệ Cho Blogspot Tạo Biểu Mẫu Liên Hệ Cho Blogspot Để thực hiện thủ thuật Biểu mẫu liên hệ / Contact For

About Admin

Related Posts