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

, ,
Chia sẻ Lưu
Như các bạn cũng biết thì button share (nút chia sẻ lên mạng xã hội) hầu hết giờ template Blogspot nào cũng có, rất nhiều mẫu khác nhau, mà nếu không có thì chỉ với từ khóa thêm button share, nút chia sẻ lên mạng xã hội cho Blogspot thì kết quả ra một đống, công dụng của nó thì giúp người dùng có thể chia sẻ bài viết của blog lên các mạng xã hội nhanh chóng và tiện lợi hơn, đồng nghĩa với việc chúng ta sẽ có thêm nhiều lượt truy cập….

Mẫu button share mình sắp chia sẻ dưới đây đang được sử dụng cho blog của mình, được mình thiết kế, chỉ có 3 nút là chia sẻ lên facebook, google và sao chép liên kết mình không thêm mạng xã hội khác vì mình thấy không cần thiết nếu bạn nào muốn thì có thể comment để mình viết thêm, widget được cố định dọc ở bên cạnh trang, xoay ngang vào bằng mobile, các bạn có thể xem demo trực tiếp trên blog của mình.

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.
Chia sẻ