Login

Hướng dẫn - Thủ thuật

  Trang Chủ / Tin tức / Hướng dẫn - Thủ thuật

Hướng dẫn tạo chia sẻ mạng xã hội có cửa sổ đóng mở

Trong bài này, mình sẽ hướng dẫn các bạn dùng javascript, css, html để tạo một bộ chia sẻ mạng xã hội có cửa sổ đóng mở.

Bài này có 2 phần:

- Vẽ HTML hiển thị
- Style CSS cho cửa sổ đóng mở
- Thư viện javascript sharethis.js

Giờ chúng ta cùng bắt đầu nhé:

HTML code:
<div class="button-frame">
  <div class="share">    
      <span class='st_twitter_hcount' displayText='Tweet'></span>
  </div>
  <input id="twitter" type="checkbox">
  <label for="twitter"><img src="twitter.png" alt=""></label>
</div>
CSS style cho phần button frame và label:
.button-frame {
  display: inline-block;
  text-align: center;
  background-color: #F2F2F2;
  border: 1px solid #E1E1E5;
  height: 72px;
  -webkit-perspective: 500px;
  -ms-perspective: 500px;
  perspective: 500px;
  position: relative;
  width: 144px;
}

.button-frame input {
  display: none;
}

.button-frame label {
  -webkit-box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.4);
  box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.4);
  background-color: green;
  display: block;
  left: 0;
  position: absolute;
  top: 0;
  -webkit-transform-origin: center bottom 0;
  -ms-transform-origin: center bottom 0;
  transform-origin: center bottom 0;
  -webkit-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
  z-index: 999; //Đề phòng tweeter nó đè lên label.
}

.button-frame label img {
  display: block;
}

.button-frame input:checked + label {
  -webkit-transform: rotateX(-180deg);
  -ms-transform: rotateX(-180deg);
  transform: rotateX(-180deg);
}
Vậy là các bạn đã hoàn thành xong phần vẽ và style. Tiếp theo chúng ta cần include thư viện sharethis vào html. Phần này trong <head></head> các bạn thêm include thư viện như sau:

<head>
   <script src="http://baobinh.net/js/sharethis.js"></script>
</head>
Vậy là các bạn đã hoàn thành xong, và sẽ có kết quả như sau:



Bản full sau khi hoàn thiện của facebook, tweeter, google plus:



Pass giải nén: baobinh.net

Link download source code full: Tại đây

Link xem demo: Tại đây
html css javascript social facebook google plus tweeter

Danh Mục Lập Trình

Baobinh.net
TIN LIÊN QUAN
DANH MỤC GIAO DIỆN

Bài viết ngẫu nhiên

Danh mục lập trình