Huỳnh Hoài Bảo - Bảo Shady Blog
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  
47 nhận xét:
  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. Giúp gì nói đi ?

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

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

      Xóa
    9. 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
    10. https://uphinhnhanh.com/images/2017/12/06/imaged0fdc.png
      Đoạn code v í

      Xóa
    11. Tìm ra rồi đó -_-

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

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

      Xóa
    14. 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
1. Chèn ảnh: [img]Link ảnh[/img]
2. Chèn video: [youtube]ID Video[/youtube]
Hướng dẫn lấy ID Video từ Youtube

Ví dụ video có link trực tiếp: https://www.youtube.com/watch?v=BUaLnDL3f-M, ta sẽ lấy BUaLnDL3f-M và thay vào vị trí ID Video ở cú pháp trên.

Nội quy chung Bảo Shady Blog

1. Bài viết đều tự tay tác giả viết nên nếu có ý định copy xin hãy ghi nguồn bài viết đó.
2. Template được lên ý tưởng và thiết kế bởi Phú Cường Blogger vì vậy tuyệt đối không tự ý RIP Template hoặc lấy và dùng từ những nguồn ăn cắp khác khi tác giả chưa share công khai. Nếu tôn trọng mình thì bạn có thể trao đổi mua template tại fb Nguyễn Phú Cường.
3. Không được spam dưới mọi hình thức và đưa ra những bình luận xúc phạm đến danh dự và nhân phẩm của người khác (những bình luận vi phạm sẽ bị xóa).

Đang cập nhật thêm nội quy...

- Blog: Bảo Shady Blog - Life Is Share
- Thành lập: 01/08/2017
- Nội dung: Blog chủ yếu viết về những thủ thuật blog, và các thủ thuật khác. Ngoài ra, blog thi thoảng còn chia sẻ một vài bài viết về đời sống, share ảnh đẹp, tin tức về đời sống...
- Tác giả blog: Huỳnh Hoài Bảo hiện đang là học sinh cấp 2 THCS Lê Thị Cẩm Lệ, Bạc Liêu.
- Template: Twitter Template Version 1.0 By Phú Cường Blogger.

Lời cuối chúc các bạn có những phút giây thật vui vẻ và ý nghĩa tại blog nhé!