| Thông tin | |
|---|---|
| Tiêu đề | Tạo button share mạng xã hội cực đẹp cho blogspot |
| Chuyên mục | Blogger, Thủ Thuật, Thủ Thuật Blogspot |
| Định dạng | File PDF |
| Ngày đăng | 20 tháng 5 |
| Lượt xem | |
| Lượt thích | |
Chào các bạn hôm nay mình sẽ chia sẻ đến các bạn cách Tạo button share mạng xã hội
cực đẹp cho blogspot.
Lưu ý: Nếu blog bạn chưa khai báo fontawesome thì thêm đoạn code sau lên trước thẻ </head> nhé.
Nếu bạn không làm được hoặc gặp lỗi gì thì comment bên dưới bài này mình sẽ hỗ trợ nhé.
cực đẹp cho blogspot.
Cách thực hiện
Bước 1: Các bạn vào Chủ đề > Chỉnh sửa tìm đến thẻ ]]></b:skin> rồi dán đoạn code sau lên trước thẻ này:.ty-share-post{position:relative;overflow:hidden;margin:0 -10px -10px;padding:10px;background:#222}Bước 2: Thêm đoạn code sau vào nơi bạn muốn nó hiển thị trên Blog
.ty-share-post > span{float:left;color:#fff;font-size:15px;text-transform:none;line-height:28px;margin-right:10px; display: none;}
ul.ty-share{position:relative;margin:0;padding:0}
.ty-share li{float:left;margin:0 10px 0 0;padding:0}
.ty-share li a{float:left;color:#fff;font-weight:500;font-size:15px;text-align:center;display:inline-block;box-sizing:border-box;opacity:1;margin:0;padding:5px 10px;border-radius:3px;transition:opacity .3s}
.ty-share li a i{border-radius: 100%;border: 1px solid #fff;width: 25px;height: 25px;line-height: 25px;}
.ty-share li a span{margin-left:5px}
.ty-share .ty-facebook{background-color:#3b5998}
.ty-share .ty-twitter{background-color:#00acee}
.ty-share .ty-google{background-color:#db4a39}
.ty-share .ty-pinterest{background-color:#CA2127}
.ty-share .caffe{background-color:green;}
.ty-share li a:hover{opacity:.8}
@media screen and (max-width: 480px) {
.ty-share li a span{display:none}
<div class='ty-share-post'>Cuối cùng bạn lưu lại và tận hưởng thành quả nhé. Các bạn có thể tùy chỉnh lại cho phù hợp với Blog của mình nhé.
<span>Share:</span>
<ul class='ty-share'>
<li><a class='ty-facebook' expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&title="+ data:post.title' onclick='window.open(this.href, 'windowName', 'width=600, height=400, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank'><i class='fa fa-facebook-official'/><span>Facebook</span></a></li>
<li><a class='ty-twitter' expr:href='"http://twitter.com/share?url=" + data:post.url + "&title=" + data:post.title' onclick='window.open(this.href, 'windowName', 'width=600, height=400, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank'><i class='fa fa-twitter'/><span>Twitter</span></a></li>
<li><a class='ty-google' expr:href='"https://plus.google.com/share?url=" + data:post.url + "&title=" + data:post.title' onclick='window.open(this.href, 'windowName', 'width=600, height=400, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank'><i class='fa fa-google-plus'/><span>Google+</span></a></li>
<li><a class='ty-pinterest' expr:href='"http://pinterest.com/pin/create/button/?url=" + data:post.url + "&media=" + data:post.firstImageUrl + "&description=" + data:post.snippet' onclick='window.open(this.href, 'windowName', 'width=600, height=400, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank'><i class='fa fa-pinterest'/><span>Pinterest</span></a></li>
<li><a class='caffe' href='http://napngay.com/tc-multi/@dohieu197@gmail.com' target='_blank'><i class='fa fa-coffee'/><span> Mời Cafe</span></a></li>
</ul>
</div>
Lưu ý: Nếu blog bạn chưa khai báo fontawesome thì thêm đoạn code sau lên trước thẻ </head> nhé.
<script type='text/javascript'>Chúc các bạn thành công.
//<![CDATA[
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css");
//]]>
</script>
Nếu bạn không làm được hoặc gặp lỗi gì thì comment bên dưới bài này mình sẽ hỗ trợ nhé.
Tạo button share mạng xã hội cực đẹp cho blogspot là một trong những bài viết về chủ đề Thủ Thuật Blogspot . Ngoài ra chúng tôi còn rất nhiều bài biết khác về chủ đề này nữa. Hãy tìm thêm cho mình những tài liệu khác nữa để nâng cao kiến thức nhé!
Bình Luận Gần Đây