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 == "item"'>Bước 2: Các bạn thêm đoạn code bên dưới sau thẻ <data:post.body/>
<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:"Copy Link";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:"Chia sẻ";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:"Chia sẻ";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>
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 == "item"'>Bước 3: Thêm đoạn code sau trước thẻ </body>
<div class='st-socialbar'>
<ul>
<li><a expr:href='"https://www.facebook.com/share.php?v=4&u=" + data:post.url + "&t=" + data:post.title' onclick='window.open(this.href,'sharer', 'toolbar=0,status=0,width=626,height=436'); 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='" https://plus.google.com/share?url=" + data:post.url' onclick='javascript:window.open(this.href," " ," menubar=no,toolbar=no,resizbutton_le=yes,scrollbars=yes,height=600,width=600" ); 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>
<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.