Nút Mạng Xã Hội Phong Cách Metro Cho Blogspot Blogger

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/phuocanofficial"></a></li><li><a class="tw" href="http://twitter.com/phuocanofficial"></a></li><li><a class="gp" href="https://https://plus.google.com/103046258689301545896"></a></li><li><a class="pi" href="https://www.pinterest.com/phuocan1996"></a></li><li><a class="in" href="https://www.linkedin.com/in/Terocket"></a></li><li><a class="yt" href="https://www.youtube.com/user/SuGiaPhuocAn"></a></li><li><a class="fd" href="http://feeds.feedburner.com/phuocantran"></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/AVvXsEgw2IognZF15L2p63dfQrPDoZ85L4MLV932GvbO5nhg9LKxwyb6DwZT6hRiTXbi8XnKRoqFQvIohTuKXMHeah3zdrvjC04NdX2O2sENrLXFGPCbLJ25om3KlpfQyCmMoHQ9F1sC7obZZPQb/s200/facebook.png) no-repeat center center #1f69b3} .metro-social li:hover .tw{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiso4G0-fMleI-tjiM7PzcL0N7IdLhpkJrJEZeixq8sJWTPXKJMesoeiPouuIadI6Itr2LBJH6Pqf7wH6TZWqvQyrnhNXpoH8N6ZOOwLZ6148pTNVOnoaHslZRTthaXqGpv8sRdXXw5LxCG/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/AVvXsEisT1azc248AWq3XN-mZbYlVlUTJpuRbzQfcN6zeTgYdsRSRwrjm8rDp7yKGWdWPaKQlFy3FNTgTavnxh8OqfJpHc_VH725W7ujHU8AFcUcbsyDWgIrb3rC1DNt7BcBxXNR2iL2in91k0Jd/s200/google%252Bplus.png) no-repeat center center #da4a38} .metro-social li:hover .pi{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhD3fnevahB8s0Pc0ZbFy9PcpepzRI3IvlfpHA3VY-llY4ZPoeepG477IDAQqZqIMR_9bqYQtHNemDrQfOcwrj31NZxZbEekrTYxB3BtPEd4T5or4KEUSGeB1Muyap5PoWtoHX3UXRSzyA/s45/pinterest.png) no-repeat center center #d73532} .metro-social li:hover .in{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwShRdCRvs4hwDqKZhndxF1LeBnwwt8ek6GLNllNaXUmfijQ-s17prnOS0w7Vvm5zsWLyaDv28YdQNW3zmEN-xqGwS-fiPt30r1v6tXM3NdLNE__t9uwS9mNnCgj4E1UbfAAONL-94SCQ/s45/linkedin.png) no-repeat center center #0097bd} .metro-social li:hover .yt{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9_NJEp-PWzJrVDM51TO3PmiSvCa-zPcT1hJT_eOwkMhmSa20Cc90UXa5GWa52vpi-sC5oiKZudjbP25Sqrm-DmvJRy3jvjd3YfVH5TUYJdv9cQDKBYgH8HziGNN8WGuxjH9zyJ5gJMQM/s45/youtube.png) no-repeat center center #e64a41} .metro-social li:hover .fd{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFYJedioSD3U9nqB7AP9pkZ_CSSpKImvqPEfEsldVFzCJTmuzv4AmJhrLnuNQIMAHJteVQzJVPOAFxXUKynHcf71sCjGQ4uhEcLc0o0bpac9cUSnAuGu7dFNwABa-7QZNIgXI3AVG5YXNG/s45/feed.png) no-repeat center center #e9a01c} </style>

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