Thư viện

Trải nghiệm

Thứ Sáu, tháng 12 05, 2014

[Tips] - Nút mạng xã hội phong cách Metro cho Blogspot Blogger

Hướng dẫn thủ thuật tạo Nút mạng xã hội phong cách Metro cho Blogspot Blogger tại Terocket cả nhà nhé!

Chia sẻ:
[Tips] - Nút mạng xã hội phong cách Metro cho Blogspot Blogger
[Tips] - 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/Terocket></a></li>
<li><a class="tw" href=http://twitter.com/Terocket></a></li>
<li><a class="gp" href="https://plus.google.com/Terocket"></a></li>
<li><a class="pi" href=http://pinterest.com/Terocket></a></li>
<li><a class="in" href=https://www.linkedin.com/in/Terocket></a></li>
<li><a class="yt" href=http://www.youtube.com/Terocket></a></li>
<li><a class="fd" href=http://feeds.feedburner.com/Terocket></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(http://3.bp.blogspot.com/-gDUOorsTaS8/URoqPnM84zI/AAAAAAAAJ6U/Xhmy7cIpz2M/s200/facebook.png) no-repeat center center #1f69b3}
.metro-social li:hover .tw{background:url(http://1.bp.blogspot.com/-ACiFLecWLrU/URom7CIU1aI/AAAAAAAAJ5o/FpAf2PXkzH0/s74/twitter-bird-dark-bgs.png) no-repeat center center #43b3e5}
.metro-social li:hover .gp{background:url(http://1.bp.blogspot.com/-xLeqmsg2KY0/URoqO5Y5ikI/AAAAAAAAJ58/RaxLc_hv-Fc/s200/google%252Bplus.png) no-repeat center center #da4a38}
.metro-social li:hover .pi{background:url(http://1.bp.blogspot.com/-namunMjzveg/USC_mj8e7fI/AAAAAAAAKIo/hfylnwqGQmo/s45/pinterest.png) no-repeat center center #d73532}
.metro-social li:hover .in{background:url(http://4.bp.blogspot.com/-joDwAv84KDs/USC_mviM2uI/AAAAAAAAKIs/KZB9EsNAKIA/s45/linkedin.png) no-repeat center center #0097bd}
.metro-social li:hover .yt{background:url(http://3.bp.blogspot.com/-hLKJ60klMs0/USC_mh_GWYI/AAAAAAAAKIk/6CmSTv8xQGE/s45/youtube.png) no-repeat center center #e64a41}
.metro-social li:hover .fd{background:url(http://1.bp.blogspot.com/-s-lGqHCMnbA/URoqPH64IJI/AAAAAAAAJ6I/99a4xAxc98Q/s45/feed.png) no-repeat center center #e9a01c}
</style>

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

Các bạn có thể tham khảo một số thủ thuật tạo nút tại Terocket sau đây nhé

  1. [Tips] - Nút Huy hiệu / Badge Buttons tròn, hoa văn 7 sắc cầu vòng cho Blogspot Blogger
  2. [Tips] - Tạo nút Social Buttons cổ điển trượt màu khi rê chuột vào cho Blogspot Blogger
  3. [Tips] - Nút Download Buttons bằng CSS hiệu ứng giản ra khi rê chuột cho Blogspot Blogger
  4. [Tips] - Tạo nút Social Buttons lớn kiểu Metro bóng mờ cho Blogspot Blogger
  5. [Tips] - Tạo nút Social Buttons hiệu ứng bong bóng mờ cho Blogspot Blogger
  6. [Tips] - Bộ nút Share Buttons CSS mờ trong suốt cho Blogger/Blogspot
  7. [Tips] - Bộ nút Share Buttons hiệu ứng tự động hiện ở dưới lên cho Blogspot Blogger
  8. [Tips] - Nút Facebook share trượt hai bên cho Blogger
  9. [Tips] - Nút buttons động bằng CSS3 cho Blogger V1

Trứng Vịt - Terocket

14 nhận xét:

  1. Hay, bạn Namkna tiếp tục post nhiều nhé. ^^

    Trả lờiXóa
    Trả lời
    1. Đã có cực nhiều bài hay, bạn vào lấy nha!

      Xóa
  2. Đẹp quá, đang nghiên cứu hôm nào áp dụng cho web của mình. Cảm ơn Terocket đã chia sẽ nhé!

    Trả lờiXóa
  3. Để tăng kích thước các nút thì cho vừa khung 300px thì làm thế nào bạn?

    Trả lờiXóa
    Trả lời
    1. Nhận xét này đã bị tác giả xóa.

      Xóa
    2. Bạn có thể thêm <b>width</b> và <b> height</b> cho mỗi ảnh trong thẻ
      <style>

      Xóa
    3. Bác thay các giá trị px bằng % là oke. (Dĩ nhiên là dùng máy bấm theo tỉ lệ nhé)

      Xóa
  4. Nhận xét này đã bị tác giả xóa.

    Trả lờiXóa
  5. Nhận xét này đã bị quản trị viên blog xóa.

    Trả lờiXóa
  6. lỗi hiển thị trên điện thoại windows phone bạn ơi. Cần cải thiện thêm

    Trả lờiXóa
  7. Chào bạn ! Mình đang sử dụng ứng dụng này, tuy nhiên mình thấy có lỗi hiển thị ko sắp xếp đồng đều như DEMO của bạn. Blog của mình http://www.vietnambrokers.com/ , phiền bạn hướng dẫn cách chỉnh sửa cho mình nhé . Thanks!
    Với lại mình muốn link các mạng xã hội đó ra một tab mới , bạn chỉ giùm mình luôn nhé.
    Cảm ơn bạn rất nhiều

    Trả lờiXóa
  8. Thêm nút Youtube đi anh ơi! :D

    Trả lờiXóa
  9. Thêm nút Youtube đi anh ơi! :D

    Trả lờiXóa