Tạo nút Share Facebook Coppy Url Thủ thuật Blogger

Demo gốc bên trái WEBSITE

Các bước thực hiện

Chèn đoạn code bến dưới vào dưới thẻ </body>
Code HTML
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>.st-socialbar{position:fixed;left:1%;top:25%;background:#fff;border-radius:50px;z-index: 2;width:47px;height:132px;box-shadow:1px 1px 5px rgba(128,128,128,0.5)}.st-socialbar ul{padding:5px}span.icon.share{color:#333;cursor:pointer;border:2px solid #333;border-radius:50px;height:37px;line-height:32px;width:37px;overflow:hidden;padding-left:10px;display:block;float:left;margin-bottom:5px;transition:all .2s ease-in-out}.icon.share:after{content:&quot;Copy Link&quot;;display:none}span.icon.share:hover{width:105px;background:#333;color:#fff}span.icon.fb{color:#3a579a;border:2px solid #3a579a;border-radius:50px;height:37px;line-height:32px;width:37px;overflow:hidden;padding-left:12px;display:block;transition:all .2s ease-in-out;float:left;margin-bottom:5px}span.icon.fb:hover{width:100px;background:#3a579a;color:#fff} .icon.fb:after{content:&quot;Facebook&quot;;display:none}span.icon.gp{color:#df4a32;border:2px solid #df4a32;border-radius:50px;height:37px;line-height:32px;width:37px;overflow:hidden;padding-left:8px;display:block;transition:all .2s ease-in-out;float:left;margin-bottom:5px}.icon.gp:after{content:&quot;Google Plus&quot;;display:none}.icon.gp{color:#df4a32;border:2px solid #df4a32;border-radius:50px;height:37px;line-height:32px;width:37px;overflow:hidden;padding-left:8px;display:block;transition:all .2s ease-in-out;float:left;margin-bottom:5px}span.icon.gp:hover{width:120px;background:#df4a32;color:#fff}.icon.share:hover:after,.icon.fb:hover:after,.icon.gp:hover:after{display:initial} @media(max-width:1200px){.st-socialbar{top:75%}} @media(max-width:500px){.st-socialbar{width:132px;height:48px;top:90%}span.icon.fb,span.icon.gp{margin-right:5px}.st-socialbar span{width:37px!important}} </style>
<div class='post-footer'>
<div class='st-socialbar'>
<ul>
<li><a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot;+ data:post.title' onclick='window.open(this.href,&apos;sharer&apos;, &apos;toolbar=0,status=0,width=626,height=436&apos;); return false;' rel='nofollow' title='Chia sẻ lên Facebook'><span class='icon fb'><i aria-hidden='true' class='fa fa-facebook'/> </span></a></li>
<li><a expr:href='&quot;https://plus.google.com/share?url&quot; + data:post.url + &quot;&amp;title=&quot;+ data:post.title' onclick='javascript:window.open(this.href,&quot; &quot; ,&quot; menubar=no,toolbar=no,resizbutton_le=yes,scrollbars=yes,height=600,width=600&quot; ); return false; ' rel='nofollow' title='Chia sẻ lên Google Plus'><span class='icon gp'><i aria-hidden='true' class='fa fa-google-plus'/> </span></a></li>
<li><a onclick='CopyLink()'><span class='icon share' title='Copy Url bài viết này'><i aria-hidden='true' class='fa fa-link'/> </span></a></li>
</ul>
</div> </div> </b:if>
javascript
<script type='text/javascript'> function copyTextToClipboard(e){var t=document.createElement("textarea");t.style.position="fixed",t.style.top=0,t.style.left=0,t.style.width="2em",t.style.height="2em",t.style.padding=0,t.style.border="none",t.style.outline="none",t.style.boxShadow="none",t.style.background="transparent",t.value=e,document.body.appendChild(t),t.select();try{document.execCommand("copy"),alert("Đã sao chép liên kết!")}catch(o){alert("Không thể sao chép liên kết!")}document.body.removeChild(t)}function CopyLink(){copyTextToClipboard(location.href)}; </script>

Lời kết

Với code đơn giản các bạn Có thể trang trí bài viết được đẹp hơn.
Nội dung chính
      Bài đăng mới hơn Bài đăng cũ hơn
      1 Nhận xét