Tạo Button Share cực chất dành cho Blogspot

Xin chào tất cả các bạn, chào mừng các bạn đã quay trở lại Blog của Tính Getter!
Ngồi mò CSS và HTML thì tự nhiên mình bỗng nghĩ ra cái ý tưởng này, nên mình lên kế hoạch bắt tay vào làm và share cho anh em luôn :v Nhìn cũng khá là bắt mắt đấy chứ 😆 Hôm nay mình xin hướng dẫn các bạn tạo Button Share cực chất dành cho Blogspot. Demo thì các bạn xem dưới bài viết này nhé. Nào, không linh tinh luyên thuyên và dài dòng nữa, chúng ta cùng bắt đầu nhé!

Hướng dẫn thực hiện

Bước 1: Các bạn đăng nhập Blogger  Chủ đề  Chỉnh sửa HTML.
Bước 2: Chèn đoạn CSS này trước thẻ ]]></b:skin>
.tgb-share-btn{text-align: center; margin:16px 0 27px}
.tgb-share-btn a{display:inline-block; font-size: 22px; line-height: 2em; text-align: center; width: 50px}
.facebook-ico{color:#3B5998; border-bottom:3px solid #3B5998}
.twitter-ico{color:#19BFE5; border-bottom:3px solid #19BFE5}
.gplus-ico{color:#D64136; border-bottom:3px solid #D64136}
.linkedin-ico{color:#007bb6; border-bottom:3px solid #007bb6}
.tumblr-ico{color:#35465c; border-bottom:3px solid #35465c}
.tgb-share-btn a:hover{background:#fff}
Bước 3: Tìm tất cả các thẻ <data:post.body/> và chèn đoạn HTML này vào phía sau nó. (Các bạn có thể chèn vào bất cứ vị trí nào các bạn muốn đặt, miễn là nó hiển thị trong bài viết là được.)
<div class='tgb-share-btn'>
<a class='facebook-ico' expr:href='&quot;https://m.facebook.com/sharer/sharer.php?u=&quot; + data:post.url' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=430,width=640\&quot;); return false;&quot;' title='Chia sẻ lên Facebook'><i class='fa fa-facebook' style='color: #3b5998; font-size: 25px;'/></a>
<a class='twitter-ico' expr:href='&quot;https://twitter.com/intent/tweet?text=&quot; + data:post.title + data:post.url' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=430,width=640\&quot;); return false;&quot;' title='Chia sẻ lên Twitter'><i class='fa fa-twitter' style='color: #19bfe5; font-size: 25px;'/></a>
<a class='gplus-ico' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=430,width=640\&quot;); return false;&quot;' title='Chia sẻ lên Google+'><i class='fa fa-google-plus' style='color: #d64136; font-size: 25px;'/></a>
<a class='linkedin-ico' expr:href='&quot;https://www.linkedin.com/shareArticle?mini=true&amp;url=&quot; + data:post.url' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=430,width=640\&quot;); return false;&quot;' title='Chia sẻ lên LinkedIn'><i class='fa fa-linkedin' style='color: #007bb6; font-size: 25px;'/></a>
<a class='tumblr-ico' expr:href='&quot;https://www.tumblr.com/share?v=3&amp;u=&quot; + data:post.url' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=430,width=640\&quot;); return false;&quot;' title='Chia sẻ lên Tumblr'><i class='fa fa-tumblr' style='color: #35465c; font-size: 25px;'/></a>
  </div>
Lưu ý: Các bạn có thể thêm (hoặc bớt) các trang mạng xã hội mà các bạn cần share sao cho phù hợp với Blog của bạn, cách thêm hoặc bớt chắc mình cũng không cần nói ở đây rồi chứ nhỉ 😆

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

Tổng kết lại

Chỉ vài bước đơn giản các bạn đã có thể tạo cho Blog của các bạn Button Share cực chất rồi. Nếu thấy hay thì đừng quên cho mình 1 comment & 1 share nha 😋 Còn bạn nào không hiểu hoặc không thực hiện được thì đừng ngần ngại để lại comment ở phía dưới bài viết để mình hỗ trợ nhé. Chúc các bạn thành công và đừng quên truy cập Blog mỗi ngày để xem thêm nhiều bài viết hữu ích & chất lượng hơn nữa nhé!
Tác giả bài viết: Tính Getter
Thời gian đăng bài: Thứ Tư, 10 tháng 1, 2018
Tổng số bình luận: 52

52 nhận xét:

  1. Cmt thôi đéo share đâu :v Hehe :v

    Trả lờiXóa
  2. Trả lời
    1. dạo này ít tương tác vậy em

      Xóa
    2. Do đang là HK II nên nội dung bài học, kiến thức quan trọng, em còn phải đi học thêm, học ở trưởng, học không được nữa là chết em luôn đó anh. Với lại HK II là phần trọng tâm nữa nên em ít có thời gian lên máy nhiều. Để tí nữa em qua.

      Xóa
    3. Lí do này chấp nhận đc nè

      Xóa
    4. Thi học kì xong r học hành qq gì nữa ><

      Xóa
    5. Hoy anh ơi, cố gắng học để sau này có tương lai anh à.

      Xóa
  3. SAo a ko thấy cái demo hay cái hình nào hết vậy?

    Trả lờiXóa
  4. Cho tui xin phần này
    https://i.imgur.com/JoY3oqe.png
    mail: nguyenchanhduc3107@gmail.com

    Trả lờiXóa
  5. Qua blog bạn mình mới thấy cái trang bài viết k có sidebar :D trông cũng đẹp, về đổi mới được hị hị

    Trả lờiXóa
    Trả lời
    1. Ẩn hết trong phần bài viết nhìn nó đẹp, mà diện tích bài viết được mở rộng, giúp viewer đọc được thông tin nhiều hơn đấy bạn.

      Xóa
    2. chuẩn rồi ạ, temp này bạn mua à?

      Xóa
  6. Bài viết hay, có đầu tư chất lượng đấy bạn :D

    Trả lờiXóa
    Trả lời
    1. Hình như ông này cũng đang spam

      Xóa
    2. @Thịnh Nguyễn: Chắc khen thật đấy chứ không spam đâu :v
      @Thuận: Cảm ơn bạn nhé!

      Xóa
  7. Mấy bạn cho mình ý kiến về cái template Mộc Gin mới edit xong đi nào! :D

    Trả lờiXóa
  8. Cái temp này em chỉ cần để vậy thôi là lượt view rất cao, đừng chỉnh sửa gì nhiều, đặt biệt là cái menu, đừng bao h tháo nó ra, lúc trước a tháo cái menu ra view tụt đáng kể đấy!

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

    Trả lờiXóa