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. Còm men đầu

    Trả lờiXóa
  2. ⊱⊰ Star Phong Blog ⊱⊰lúc 17:36 6 tháng 12, 2017

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

    Trả lờiXóa
    Trả lời
    1. - Spam link ?

      Xóa
    2. ⊱⊰ Star Phong Blog ⊱⊰lúc 17:41 6 tháng 12, 2017

      Là sao ??? Tôi mới nghịch blog thôi :((

      Xóa
    3. duy.ripper@gmail.com
      Thêm mình vào blog để mình xem cho bạn

      Xóa
    4. ⊱⊰ Star Phong Blog ⊱⊰lúc 12:55 7 tháng 12, 2017

      Mình đùa :D

      Xóa
  3. Comeback hả Duy ?

    Trả lờiXóa
    Trả lời
    1. Rảnh thì up bài thôi. Chưa hẳn đã cb đâu @@

      Xóa
  4. Đang cần rất đẹp
    :D
    Star Dũng Blog

    Trả lờiXóa
  5. Ghê ghê ghê

    Trả lờiXóa
  6. send tao temp này đi DUy

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

      Xóa
  7. 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
  8. nhớ Duy quá :v

    Trả lờiXóa
  9. sửa hộ t cái lỗi ko hiện phần cmt

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

    Trả lờiXóa
  11. ⊱⊰ Star Phong Blog ⊱⊰lúc 21:31 12 tháng 12, 2017

    TT Đêm cho anh Duy Đẹp Trii :v

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

    Trả lờiXóa
  13. Bảo đẹp trai đến rồi nè

    Trả lờiXóa
  14. 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
  • [ PSD ] Ai Chờ Ai
    [ PSD ] Ai Chờ Ai
    08/03/2017 - 0 bình luận
      Tải về
  • Hướng dẫn đổi tên noname facebook 2018
    Hướng dẫn đổi tên noname facebook 2018
    05/07/2018 - 4 bình luận
    Bước 1:  Chuẩn bị 1 CMND trùng với ngày sinh trên tài khoản Facebook của bạn Bước 2:  Tải Hola về…
  • [Ảnh] Share Bộ Ảnh Bìa Ghost Chất
    [Ảnh] Share Bộ Ảnh Bìa Ghost Chất
    19/02/2017 - 0 bình luận
    Bộ Ảnh Bìa Ghost Chất
  • [ TUT ] Hướng Dẩn Rename FaceBook Người Khác Không Cần Vào Nick
    [ TUT ] Hướng Dẩn Rename FaceBook Người Khác Không Cần Vào Nick
    05/07/2016 - 0 bình luận
    B1: Checkmail Victim B2: Fake CMND Giống Victim B3: Fake IP B4: Vào Link: Click Vào Đây B5: Điền Thông…
  • [PSD] Mockup Hacker
    [PSD] Mockup Hacker
    05/07/2016 - 0 bình luận
  •  Giới Thiệu Sever Bot Like + Autolike + Auto Cmt + Auto Share Cực Chất ♥|VanTuanIT
    Giới Thiệu Sever Bot Like + Autolike + Auto Cmt + Auto Share Cực Chất ♥|VanTuanIT
    03/03/2017 - 0 bình luận
                     Giới Thiệu Sever Bot Like + Autolike +…
  • [PSD] Cũng đành thôi - Đức Phúc
    [PSD] Cũng đành thôi - Đức Phúc
    14/07/2017 - 20 bình luận
     Ảnh bìa gốc  Ảnh bìa kèm tên chính phụ Tải Về PSD Tải Photoshop Liên Hệ Nguồn: Dii Nô…
  • PSD Ảnh Bìa - Chạy ngay đi
    PSD Ảnh Bìa - Chạy ngay đi
    04/06/2018 - 41 bình luận
    Yeah..yeah! Sky ơiiiiiii...... Tải về Liên hệ
  • Share Một Số Wed Sub 2016 -2017
    Share Một Số Wed Sub 2016 -2017
    14/02/2017 - 1 bình luận
    Sưu Tầm Bởi : Xuân Việt Blog  http://like5s.net/ http://likevip.net/ http://wefbee.com/ https://hu…
  • [TUT] Rename Tên Kí Tự Ձ.Օ.ւ.Դ Facebook 2017 Mới Nhất
    [TUT] Rename Tên Kí Tự Ձ.Օ.ւ.Դ Facebook 2017 Mới Nhất
    08/02/2017 - 0 bình luận
    HƯỚNG DẪN ĐỔI TÊN KÍ TỰ Ձ.Օ. ւ.Դ Bước 1 : Cần một nick còn lượt đổi tên. Bước 2 : Vào đổi ngôn n…
  • [ PSD Ảnh Bìa ] Em Của Anh Đừng Của Ai
    [ PSD Ảnh Bìa ] Em Của Anh Đừng Của Ai
    02/09/2017 - 2 bình luận
    Xin Share Ảnh Bìa Em Của Anh Đừng Của Ai !!!!  Ảnh bìa kèm tên chính phụ Liên Hệ …
  • Hướng dẫn lấy avatar tài khoản facebook bật khiên
    Hướng dẫn lấy avatar tài khoản facebook bật khiên
    18/06/2018 - 15 bình luận
    Xin chào tất cả các bạn, hôm nay mình xin hướng dẫn các bạn cách lấy ảnh đại diện Facebook của người khác đã …