Tạo nút chia sẻ bài viết blogspot với hiệu ứng đẹp mắt

Lâu rồi chưa chia sẻ thủ thuật blogger nhỉ :) Vậy thì hôm nay mình xin hướng dẫn các bạn tạo nút chia sẻ bài viết có hiệu ứng đẹp mắt.
Thôi không dông dài nữa, vào chủ đề luôn nào!

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 

Xong lưu lại và tận hưởng thôi :)) Chúc các bạn thành công. Có gì thắc mắc cứ cmt bên dưới.
View-source:www.bacsiwindows.com

45 nhận xét:

  1. Bấm nào nút Chi Sẽ nó không hiện gì cả a Duy ạ
    wWw.Phongdz.Ml

    Trả lờiXóa
  2. Đang cần rất đẹp
    :D
    Star Dũng Blog

    Trả lờiXóa
  3. Trả lời
    1. Temp giống 90% gì đó đâu. Sao bây giờ lại đi xin temp này

      Xóa
  4. Bài viết này ra sau tôi 1 ngày nha :v

    Trả lờiXóa
    Trả lời
    1. Nhưng bài viết của bảo bấy bỳ không chuyên nghiệp như này :v

      Xóa
    2. xớ :v ếu cần chuyên nghiệp chỉ cần chất lượng :v xài được là ok :v

      Xóa
    3. Hứ :v K thèn nói chuyện với Bảo bấy bỳ nữa

      Xóa
  5. sửa hộ t cái lỗi ko hiện phần cmt

    Trả lờiXóa
  6. Duy cho tui đặt liên kết với nhé!

    Trả lờiXóa
  7. Hi trở lại :v Update textlink VanTuanIT.Com với =))

    Trả lờiXóa
  8. Em k có cái này nhỉ ?
    < div id="entry-header">

    Trả lờiXóa
Mã Hóa Code
CÓ THỂ BẠN ĐANG TÌM