TẠO NÚT CHIA SẺ MẠNG XÃ HỘI TRƯỢT CHO BLOGSPOT

Tạo nút chia sẻ mạng xã hội trượt cho blogspot

Lưu ý: Widget này mình đặt chỉ hiển thị ở bài viết, các bạn nào muốn nó hiện ở toàn blog thì bỏ dòng điều kiện của Blogspot đi nhé

Bước 1: Các bạn vào Chủ đề (Mẫu) => Chỉnh sửa HTML sau đó thêm đoạn CSS bên dưới lên trên thẻ </head>

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>

<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:33px;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:33px;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:90px;background:#3a579a;color:#fff} .icon.fb:after{content:&quot;Chia sẻ&quot;;display:none}span.icon.gp{color:#df4a32;border:2px solid #df4a32;border-radius:50px;height:37px;line-height:33px;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;Chia sẻ&quot;;display:none}span.icon.gp:hover{width:95px;background:#df4a32;color:#fff}.icon.share:hover:after,.icon.fb:hover:after,.icon.gp:hover:after{display:initial}

@media(max-width:1100px){.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>

</b:if>

Bước 2: Các bạn thêm đoạn code bên dưới sau thẻ <data:post.body/>
Lưu ý: Trong template có nhiều thẻ <data:post.body/> nên bạn chèn code trên lần lượt vào những đoạn code bạn tìm được, tới khi nào nó xuất hiện trong bài viết thì ngừng nhé.

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div class='st-socialbar'>

<ul>

<li><a expr:href='&quot;https://www.facebook.com/share.php?v=4&amp;u=&quot; + data:post.url + &quot;&amp;t=&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' 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='Sao chép địa chỉ liên kết'><i aria-hidden='true' class='fa fa-link'/> </span></a></li>

</ul>

</div>

</b:if> 

Bước 3: Thêm đoạn code sau trước thẻ </body> 

<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>

Bước 4: Lưu mẫu lại hoặc chỉnh sửa theo ý bạn (bạn cần một chút kiến thức về HTML và CSS)

Như vậy mình vừa hướng dẫn các bạn cách tạo nút chia sẻ mạng xã hội trượt cho blogspot rồi, nếu có thắc mắc hoặc không làm được bạn có thể comment ở phía dưới mình sẽ cố gắng trả lời trong thời gian sớm nhất.
#Coppy nhớ ghi nguồn Star Tuấn pro