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

3:47:00 PM
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 Blogspot
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
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
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
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/AVvXsEj0vkwnL1ghKddy_x6OwqILkBLyf_puC9yytyJBXVxv4fe5yfo9YJPqix7zOvMgSlPk2KLT0wgVt24kcpt2A-mGe1sMkqR_yDpXxI59zJSxY2W7QIPRdXQfpVhxNepThrzt17SVZDhc3b-F/s200/facebook.png) no-repeat center center #1f69b3}.metro-social li:hover .tw{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEid6cRMNNno4juMxfVFH8Uc_bfdpYBc80uA3YaNsWytfLsgo9WR4_QiuaPjGhrZh64vDkbbTpFyCONyfiAMcURayaeBeWSd-yBA5ZrRRsMvajDlSG3K2qlI5UmDzP43BrfeMoCGICoYywCa/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/AVvXsEhXVyS0IZfs-btUfiZDV0Td80TLDDhGJSSaVDrPQMh-iKa8fovaPMDNB1j-0U2rNhyphenhyphena3ZHBKAW2fdB10zBdp-Q1EzmdNjzGMsfquYcGAO_-HBGMqCvUTNmBctvtnGLu6tb_VXdFOo-3n8qp/s200/google%252Bplus.png) no-repeat center center #da4a38}.metro-social li:hover .pi{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_L5Yvl8V42Mka-lCxX_6qNU6s25kcEqYSKp1AUpL_0WfW_1PkoAcNCeXz80ruNMFYq-iNTpCngVLIuGxYVyFUYzWzDU1kp-X5YuwdiHICurwSfWEcunSp5nUfHzVOSm_IgppKYb_q4l8/s45/pinterest.png) no-repeat center center #d73532}.metro-social li:hover .in{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNBBXzBmoXOya62lvpIFTX0Zo4NqX5jmQfUvHM1EWF6Py_ebeFETi4bMiFqDBQT_pIkP2bAeVn-p0AJ0NvzzgELu1Ky7eGGHPCymhEYrlTdLXDydvwrS7IxmA8jUOPd-1H1vKrc0Keeus/s45/linkedin.png) no-repeat center center #0097bd}.metro-social li:hover .yt{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi23KZHtC4KvNhroheIuUpNbg1hFoiubQHKcEPvEBlGYBBMAgVAJ2DVD9CSen5ym2AD1juetvEZoArkN3-gfeyik95XlcfeXisji008fhJCQc0GKxIFEGWoJTg8cWgN4-FFdyxdh4yo9EA/s45/youtube.png) no-repeat center center #e64a41}.metro-social li:hover .fd{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2VCYnLFO7JRtg-MHHAMo-CzMTyw9lE4bEAUOF7ioloYhBT9_BMCYorwgF4TtXkTAXQ5AcCRhaKqfm3KNyqJ-upg64n2g5vKKpTI4zHUYxzDCSzmJrEE_2oIsViQuK6WsI6T2Vo_jRCsuE/s45/feed.png) no-repeat center center #e9a01c}</style>


Chia sẻ:

Tác giả:

- Là một học sinh cấp 3 ,đam mê viết Blog để chia sẻ những kiến thức về internet mà mình biết

Bài viết liên quan

Xem tiếp
« Bài trước
Bài trước
Bài tiếp theo »

Bình luận Facebook: