Bộ nút chia sẻ mạng xã hội hiệu ứng tooltip đẹp cho blogspot

Sắp tới bận bù đầu nên giờ tranh thủ có được thủ thuật nào hay thì phải chia sẻ luôn cho các bạn luôn vì sợ để lâu sẽ quên mất. Ok, vào chủ đề chính nhé. Chiều nay mình đưa đến cho các bạn bộ nút chia sẻ mạng xã hội hiệu ứng tooltip đẹp nha. Thủ thuật chỉ toàn CSS và HTML ngắn gọn nên không hề ảnh hưởng đến tốc độ tải trang đâu.

Demo

Bộ nút chia sẻ mạng xã hội hiệu ứng tooltip đẹp

Bước 1: Truy cập quản trị blogger - Chủ đề - Chỉnh sửa HTML
Bước 2: Thêm CSS sau trước

]]></b:skin>

#sharebutton a {
  background: #D2D7D3;
  border-radius: 50%;
  display: inline-block;
  text-decoration: none;
  position: relative;
  width: 35px;
  height: 35px;
  margin-right:7px;
  text-align:center;
  padding-top: 6px;
  -webkit-transition: all .5s;
  -moz-transition: all .5s;
  transition: all .5s;
}

#sharebutton  a.icon:before {
  font-family: "FontAwesome";
  color: #fff;
  font-size: 20px;
}

#sharebutton  a.facebook:before {
  content: '\f09a';
}

#sharebutton  a.twitter:before {
  content: '\f099';
}
#sharebutton  a.google:before {
  content: '\f0d5';
}

#sharebutton a span {
  background: #fff;
  font-size: 14px;
  font-weight: 500;
  position:  absolute;
  bottom: 0;
  left: -25px;
  right: -25px;
  padding: 5px 7px;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: all .4s;
  -moz-transition: all .4s;
  transition: all .4s;
}

#sharebutton  a span:before {
  content: '';
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #fff;
  position: absolute;
  bottom: -5px;
  left: 40px;
}

#sharebutton  a:hover span {
  bottom: 50px;
  visibility: visible;
  opacity: 1;
}


#sharebutton  a.facebook:hover {
  background-color: #4183d7; 
  color: #bfbfbf;
}

#sharebutton  a.facebook span {
  color: #4183d7;
}

#sharebutton  a.twitter:hover {
  background-color: #19b5fe;
  color: #fff;
}

#sharebutton a.twitter span {
  color: #19b5fe;
}
#sharebutton  a.google:hover {
  background-color: #f22613;
  color: #fff;
}

#sharebutton a.google span {
  color: #f22613;}

Bước 3: Chèn bộ nút hiển thị này vào chỗ bạn thích (thường thì sẽ là đầu hoặc cuối bài viết nên bạn tự view ra xem thẻ để chèn cho đúng nhé, mỗi template mỗi khác nên mình không đề cập chi tiết)

<div id='sharebutton'>
  <a expr:href='data:post.sharePostUrl + &quot;&amp;target=facebook&quot;' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=430,width=640\&quot;); return false;&quot;' expr:title='data:top.shareToFacebookMsg' target='_blank' class="icon facebook"><span>Facebook</span></a>
  <a expr:href='data:post.sharePostUrl + &quot;&amp;target=twitter&quot;' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=430,width=640\&quot;); return false;&quot;' expr:title='data:top.shareToTwitterMsg' target='_blank' class="icon twitter"><span>Twitter</span></a>
  <a expr:href='data:post.sharePostUrl + &quot;&amp;target=googleplus&quot;' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=430,width=640\&quot;); return false;&quot;' target='_blank' class="icon google"><span>Google+</span></a>
</div>

Bước 4: Lưu template lại và xem thành quả

Kết luận

Với một chút CSS và HTML, ta hoàn toàn có thể có được nút chia sẻ kèm tooltip đẹp cho blog rồi đấy. Nếu có bất kì vấn đề hay khó khăn gì thì hãy để lại bình luận phía dưới nhé. Chúc các bạn thành công :)