Xin chào mọi người, hôm nay Bảo cũng bận bịu lắm mới dành chút thời gian rảnh để làm bài viết này cho anh em, mọi người ai cũng hỏi mình về cái code này nên hôm nay mình sẽ share cách làm luôn !

CÁC BƯỚC THỰC HIỆN

Bước 1:  Thêm đoạn CSS này vào phía trên thẻ ]]></b:skin>
/* dropdown share button */
.dropdown {display:inline}
.dropdown-link{float: right; background: #eee; padding: 5px 20px; border-radius: 100px;}
.dropdown-link:hover {background: #636363;color:#fff!important}
.dropdown-container{position: fixed; left: 50%; top: 50%; background: #FFF; box-shadow: 0 3px 110px rgba(0,0,0,.25); width: 400px; display: none; z-index: 9999; transform: translate(-50%,-50%); border-radius: 10px; padding: 10px}
.dropdown-container li {list-style:none;width:50%;float:left;padding:5px;box-sizing:border-box}
.dropdown-container li a{display: block; padding: 6px 15px; text-transform: uppercase; font: 500 14px Roboto,sans-serif!important; text-align: center;border-radius:100px;border:1px solid #eee}
.dropdown-container li a:hover{border:1px solid; color: #52537d!important}
.dropdown-container h2 {padding: 10px 0; margin: 0 0 10px; font: 500 16px Roboto,sans-serif; text-transform: uppercase; border-bottom: 1px solid #eee; text-align: center;position:relative}
.dropdown-container h2:after{content: ''; position: absolute; bottom: 0; left: 50%; background: #52537d; height: 1px; width: 100px; transform: translate(-50%,0);transition:.5s}
.dropdown-container h2:hover:after{width:100%;background:#d2a12f}
Bước 2: Thêm đoạn Javascript này vào phía trên thẻ </body>
<script>
function copyTextToClipboard(e){var t=document.createElement(&quot;textarea&quot;);t.style.position=&quot;fixed&quot;,t.style.top=0,t.style.left=0,t.style.width=&quot;2em&quot;,t.style.height=&quot;2em&quot;,t.style.padding=0,t.style.border=&quot;none&quot;,t.style.outline=&quot;none&quot;,t.style.boxShadow=&quot;none&quot;,t.style.background=&quot;transparent&quot;,t.value=e,document.body.appendChild(t),t.select();try{document.execCommand(&quot;copy&quot;),alert(&quot;Đã sao chép liên kết!&quot;)}catch(o){alert(&quot;Không thể sao chép liên kết!&quot;)}document.body.removeChild(t)}function CopyLink(){copyTextToClipboard(location.href)}
</script>
<script>
$(document).ready(function(){$(&#39;.dropdown&#39;).each(function() {var $dropdown = $(this);$(&quot;.dropdown-link&quot;, $dropdown).click(function(e) {e.preventDefault();$div = $(&quot;.dropdown-container&quot;, $dropdown);$div.toggle();$(&quot;.dropdown-container&quot;).not($div).hide();return false;});});$(&#39;html&#39;).click(function(){$(&quot;.dropdown-container&quot;).hide();});});
</script>
Bước 3: Cuối cùng là thêm đoạn này vào dưới thẻ <div id="entry-header"> thứ 2.
<div class='dropdown'>
<a class='dropdown-link' href='javascript:void(0);' title='Chia sẻ bài viết này'><i class='fa fa-share-alt' style='margin:0 5px 0 0'></i>Chia sẻ</a>
<ul class='dropdown-container'>
<h2>Chọn hình thức muốn chia sẻ:</h2>
<li><a onclick='CopyLink()' style='cursor: pointer;' title='Sao chép liên kết của bài viết'>Copy liên kết</a></li>
<li><a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:blog.url' onclick='window.open(this.href, "_blank", "height=430,width=640"); return false;' title='Chia sẻ lên Facebook'>Facebook</a></li>
<li><a expr:href='&quot;http://plus.google.com/share?url=&quot; + data:blog.url' onclick='window.open(this.href, "_blank", "height=430,width=640"); return false;' target='_blank' title='Chia sẻ lên Google +'>Google +</a></li>
<li><a expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url' onclick='window.open(this.href, "_blank", "height=430,width=640"); return false;' target='_blank' title='Chia sẻ lên Twitter'>Twitter</a></li>
</ul>
</div>

LỜI KẾT

Chúc các bạn thành công nhé ! Và mình mong muốn là sẽ phát triển hơn nữa vì blog mình mới thay domain nên mọi người truy cập .tk không thể truy cập được và cho rằng blog mình bị sập . Mong mọi người share bài viết này của mình và cho 1 comment góp ý ạ .
Nguồn : Bác Sĩ Windows  
Leech đi đâu nhớ ghi nguồn và trỏ nguồn bài viết về Bảo Shady Blog nhé!
Cái gì cũng có cái giá của nó. Tôn trọng người khác, người khác sẽ tôn trọng lại bạn!
- - 45 bình luận CHUYÊN MỤC

BÌNH LUẬN (45)

:)
:))
:D
=))
:(
:((
:o
^_^
^-^
/-f
^.^
/-g
;)
-_-
=_=
/-r
-.-
:p
/-o
/-hi
/-ok
/-clap
(y)
(3)
  1. Phiền bác chuyển lại lk từ starsonits.tk/sang starsonit.xyz/ nha! Tui cảm ơn!

    Trả lờiXóa
  2. Trả lời
    1. Bởi vậy :) ai cũng bảo là dễ làm tới lúc tôi share code rồi thì ai nấy cũng không được này nọ :))

      Xóa
    2. Em làm được rồi bác :v
      nơi bạn muốn hiển thị button share
      Bác nên ghi là dưới thẻ <div id='entry-header'> thứ 2.
      Cho người mới biết hiểu thêm

      Xóa
    3. Oke Thế thì tốt rồi (3) Chia sẻ bài viết này cho mọi người biết nhé :D

      Xóa
    4. Anh Bảo cho em xin gmail anh với... giúp em cái này nhaaa

      Xóa
    5. https://uphinhnhanh.com/images/2017/12/06/imagec164e.png
      anh giúp em làm code đó được không anh

      Xóa
    6. Cái đó mình không có dùng nên mình không biết, bạn trực tiếp hỏi người đang dùng đó nhé ! :)

      Xóa
    7. Blog của mình :D Không biết kiếm code đâu ra hết ><

      Xóa
    8. Cái đó chắc không phải là code mà kiểu như là một website đoạn code gắn vào blog cái đó cũng giống như zotabox vậy đó nhưng mình không biết là website nào

      Xóa
    9. https://uphinhnhanh.com/images/2017/12/06/imaged0fdc.png
      Đoạn code v í

      Xóa
    10. Có công mài sắt có ngày nên kim =)) ráng tìm css đi :v

      Xóa
    11. Em cũng mới nghịch chã biết tìm kiểu gì :((

      Xóa
    12. chịu khó Ctrl +c... ctrl + v vài chục lần kiểu gì cũng được https://developers.facebook.com/docs/plugins/page-plugin/

      Xóa
  3. Trả lời
    1. Demo gì nữa :) không thấy chữ chia sẻ ở cuối bài viết hả -_-

      Xóa
  4. Này copy bài của ngta à, sao còn zính Backgroud trắng trong khung blockquote thế?

    Trả lờiXóa
    Trả lời
    1. Code là em copy bài là em tự viết, tí em sữa lại.

      Xóa
    2. Ví dụ như mình có copy cũng phải copy chuyên nghiệp tí đúng ko nào! :v

      Xóa
  5. demo là button Chia Sẻ dưới bài viết ak

    Trả lờiXóa
  6. Anh biết thẻ để chèn code vào đầu bài viết là thẻ gì ko anh Bảo Đz

    Trả lờiXóa
  7. Hello Bảo Bấy bi nha :v Lại đổi sang .com rồi à :v

    Trả lờiXóa
  8. Không ra bài viết nửa à man

    Trả lờiXóa
    Trả lời
    1. Bận quá không ra thường xuyên được bác ạ :(

      Xóa
  9. Sao em làm không được vậy anh em làm đủ rồi cái bước thêm vào chỗ div entry gì đó em làm không được

    Trả lờiXóa
    Trả lời
    1. < div id = " entry-header " > em ctrl+F trong chỉnh sửa HTML rồi search cái đó 2 lần nhấp enter rồi chèn code vào dưới nó là được nha em !

      Xóa
    2. Không được anh ơi ? Anh giúp em được không

      Xóa
    3. Em làm được rồi :v cảm ơn anh

      Xóa
  10. Không chuyên nghiệp gì cả nka Bảo bấy bỳ :v

    Trả lờiXóa
    Trả lời
    1. Xớ hông chuyên nghiệp thôi plè chất lượng là được rồi

      Xóa

Một số lưu ý khi bình luận

Mọi bình luận sai nội quy sẽ bị xóa mà không cần báo trước (xem nội quy).

Không nói lời thiếu văn hóa, không quảng cáo thông qua khung bình luận.

Bấm Thông báo cho tôi bên dưới khung bình luận để nhận thông báo khi admin trả lời.

Để bình luận một đoạn code, hãy mã hóa code trước nhé!