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

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

Tiếp tục bài Thủ Thuật Blogspot này ,mình xin chia sẻ cho các bạn cách tạo nút mạng xã hội mang phong cách Metro tuyệt đẹp.Hiện nay phong cách Metro là phong cách được nhiều website sử dụng vì nó đem lại cho người đọc cảm thấy đơn giản,dễ nhìn ,bắt mắt .Nút mạng xã hội phong cách metro cho Blogspot sẽ làm cho Blog của bạn thêm phần đẹp hơn,và mọi người sẽ thích thú với nó.

I: Cách thêm nút mạng xã hội phong cách metro cho blogspot:

Bước 1 : Các bạn vào phần quản trị của BlogSpot và chọn vào phần Bố cục [1] sau đó chọn Thêm Tiện ích [2] như hình :

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

Bước 2: Sau khi thực hiện xong Bước 1 các nó sẽ hiện 1 bảng các bạn chọn  HTML/Javascript [3] như hình :

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

Bước 3: Các bạn copy đoạn code bên dưới và dán vào ô Nội Dung còn phần tiêu đề thì các bạn tùy ý đặt tên, sau đó các bạn nhấn Lưu[4]:

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

Bước 4 : Sau đó các bạn chọn Lưu thay đổi để hoàn thành :D

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

*Đoạn code mà bạn cần copy ở Bước 3,các bạn thay Trivnss bằng url của bạn:

<div class='metro-social'>
<li><a class="fb" href=http://www.facebook.com/Trivnss></a></li>
<li><a class="tw" href=http://twitter.com/Trivnss></a></li><li><a class="gp" href="https://plus.google.com/Trivnss"></a></li><li><a class="pi" href=http://pinterest.com/Trivnss></a></li><li><a class="in" href=https://www.linkedin.com/in/Trivnss></a></li><li><a class="yt" href=http://www.youtube.com/Trivnss></a></li><li><a class="fd" href=http://feeds.feedburner.com/Trivnss></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/AVvXsEjv9kOkvrYA4VLUCwFXttx2xKdVzvVNl-4I_N_yZD28dq-T5XFaxRL1Ro-9Dtzs76YS3oyRWS7p_DRHkgcrCzBz56POq7rDFi9_vuLDWw1nx2EXnLtt6XnayqHvce1oyVldkXE-UO8irU3A/s200/facebook.png) no-repeat center center #1f69b3}.metro-social li:hover .tw{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEid2weyhnjRoqUaXyZW1C3JIuJqsJVWsY76a6cbR7ph81yriTbR3cwVjaWlZF0c6WbbmX5rMGUx-0-UcriHBXhE34vBRnkf2YyetvfmYLbFovD29pB-LiycT3XB-bKPPx8J5B307Qh2tlZ5/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/AVvXsEg891tI7wo0nq-GQFN3mE50S6Ru4veJFGbdX5lnSEG1NSktL7do3nlrICbVatKpGX_qBnV0xybyRdJ8YGvy0eiNF1jwVrgrbAb9vno6oLIxygXVclZofoQK2U2CPAlFbunPHifeNLKfAJAz/s200/google%252Bplus.png) no-repeat center center #da4a38}.metro-social li:hover .pi{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0ZlNDntaV4MxrbhxAz3d7sVxilqLnjw4vxM5uFyJGC4QJ5ksynWc4hnIUVDpf5OX68G8XW8syHUVPMP8cu0awY7eyrilYYBp7eoMgZ7rDOzlKNMVJiMhuS3Wsn30wTb5V7pdtb2qo3A8/s45/pinterest.png) no-repeat center center #d73532}.metro-social li:hover .in{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVIVn1UeEhIHZrrhlnjxkp3c3t3Wf32d4OgFRaC4HT8G6U9kV0aMqFJGBAorDaAIcxomvMLxAJm4-AOwSljUSL9y2CLsK8slk4Ua0Wsjz5bKfhCUKQFyqXSdAqWCjaBEWYDzCjw5ALYew/s45/linkedin.png) no-repeat center center #0097bd}.metro-social li:hover .yt{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkRLkSQPaHqK0C3OxjamF5pNN9Z8whmX-j6Aw6Ydtmqi3taKw4X_5-3MTtJZIAs5TgCi0drp6EoNqpRLfUahyphenhyphenEcoE54I7KTC4gSo954YBhJOQExfAoY08TQFSdsXH1saiKQsEDfgYrE6E/s45/youtube.png) no-repeat center center #e64a41}.metro-social li:hover .fd{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLHWWcG2_koJLOWW5TNxoRZzpOxFE1uP8wg-4vvjiKHHu25cBhE42knAfJQ3l8IIlS5a827dsDZvuntTAhZ1n9Rzv3n7SO_PlWAuxfBc5rVxX0W145BrzoGY4ICt1GhwUG9-zVb7_cjXJs/s45/feed.png) no-repeat center center #e9a01c}</style>