Tạo nút chia sẻ mạng xã hội trượt cho blogspot
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.
Tạo nút chia sẻ mạng xã hội trượt cho blogspot
Reviewed by Thắt Lưng Giá Sỉ
on
11:09 PM
Rating:
No comments: