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.

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

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 :)

31 nhận xét

  1. Ra bài từ từ thôi nha, ae còn đang nghiên cứu nhìu lắm đấy :v

    Trả lờiXóa
    Trả lời
    1. Mấy cái kia phải edit nhiều quá nên t chọn cái edit vừa vừa thôi để post đó :v

      Xóa
  2. Demo trên Codepen nó hơi bị lệch đó anh êi :v

    Trả lờiXóa
    Trả lời
    1. A cố tình đấy :)) Ngta cần xem demo chứ cần gì phải đẹp.

      Xóa
    2. Giận anh rồi :3 Hổng thèm donate cho anh đâu :v

      Xóa
    3. A tạo cái đó chơi đó :3 Có phải người nổi tiếng hay streamer đâu mà đòi đc donate.

      Xóa
  3. Những bài viết của ông đúng là lúc nào cũng cuốn hút và hấp dẫn anh em blogger :))

    Trả lờiXóa
    Trả lời
    1. Ông lại quá khen t rồi. Các blog khác còn ra bài hay hơn ấy, t đang cạn ý tưởng khi chưa có bài tâm sự, tản mạn mới thôi :3

      Xóa
    2. Ông viết bài nào cũng chất lượng thật mà

      Xóa
    3. Dạo này bận quá cũng k có ý tưởng nữa cơ.

      Xóa
    4. Tôi cũng thế chả có time viết bài

      Xóa
  4. Lại có đồ chơi để vọc rồi :3

    Trả lờiXóa
    Trả lời
    1. Đồ chơi này cực kì dễ vọc và dễ áp dụng ra nhiều cái mới mẻ hơn vì toàn css :v

      Xóa
  5. Đẹp thế, để khi nào đem về vọc tiếp :v

    Trả lờiXóa
    Trả lời
    1. Đơn giản nữa, nó k phức tạp bằng css của cái tooltip trước, với lại hiệu ứng đẹp+mượt hơn :D

      Xóa
  6. ơ sao thumb khác demo vậy :v có lẽ nào a Cường nhác lm thumb đi chôm thumb ngta :v

    Trả lờiXóa
    Trả lời
    1. Ai gọi là chôm ở đây, ảnh này search từ khóa social share trên gg thấy ảnh nào đẹp thì lấy thôi. Nó có lq gì đến code a share đâu.

      Xóa
    2. ít nhất cái thumb cũng phảo giống demo tí chứ a. tự nhiẻn demo đẹp mak thumb xấu lè ngta tươngt nút cũng giống thế sợ ko vào xem đâu :v

      Xóa
    3. Giờ có khi tuyển ctv chỉ có làm thumb thôi :v

      Xóa
  7. Để mình donate cho bạn nhé :v

    Trả lờiXóa
    Trả lời
    1. Èo. biết cái đó rồi à :v chèn cho vui thôi chứ k mong đợi gì hihi

      Xóa
  8. Anh Cường cho e hỏi xí
    có cách nào để chống chuột phải những dag nhập tk admin blog thì có quyền sử dụng chuột phải ko ạ

    Trả lờiXóa
    Trả lời
    1. Theo a biết thì chưa có đâu e ạ. Nếu có thì mới chỉ có cái tạo thanh công cụ chỉ có mỗi admin nhìn đc thôi hay sao ấy chứ còn quyền dùng chuột thì k có :3 Mà e chống chuột phải làm gì vậy? Nhiều cái bất tiện lắm.

      Xóa
  9. Trả lời
    1. Thanks e nhé :D A đang lập mục cho hiện bài mới bên trên nhưng chưa có tgian làm đc.

      Xóa