Có rất nhiều bạn muốn share bài viết của mình lên mạng xã hội bằng cách Post link trực tiếp lên mạng xã hội một ngày tầm 5 - 6 bài. Nhưng các bạn đâu biết rằng số lượng đó được gọi là spam trên mạng xã hội và bị các mạng xã hội Block link khỏi những mạng xã hội đó. Vì vậy chúng ta nên lựa chọn giải pháp nút chia sẽ mạng xã hội cho blogger của mình.
Thêm nút chia sẽ mạng xã hội blogger - vào năm 2016, mạng xã hội là một phương tiện truyền thông quan trọng trên thế giới hiện nay, mạng xã hội có tầm ảnh hưởng rất lớn tới việc giới thiệu một sản phầm, quản bá website của chúng ta. Lợi ích của mạng xã hội chắc người nào cũng đã biết nó giúp tăng lương lượng truy cập vào blogger khá khinh khủng nên chúng ta cần button share social cho blogspot.
Các mạng xã hội phổ biên hiện nay như facebook, Google +, Twitter, Pinterest, LinkedIn, vì vậy chúng ta nên thêm nút share button cho blogspot của mình để tăng lượng truy cập hay quản bá blog của mình một cách hiệu quả.
1. Button Share Hiệu Ứng Mờ Đếm Số Cho Blogger
Đoạn Mã HTML ở dưới dán dưới thẻ <data:post.body/>
<div id="stickySocial">Đoạn CSS
<div class="stickySocialSocial">
<a data-count="11" id="stickyBtn" class="fbShare ssPopup" target="_blank" href="http://www.facebook.com/sharer/sharer.php?s=100&p[title]=&p[url]=&p[images][0]=">
<span class="button">SHARE</span>
<span class="count">0</span>
</a> <a data-count="22" id="stickyBtn" class="tweet" target="_blank" href="https://twitter.com/intent/tweet?text=+via+@unveiledwife&related=photografied&counturl=">
<span class="button">TWEET</span>
<span class="count">0</span>
</a>
<a data-count="33" id="stickyBtn" class="pinIt ssPopup" target="_blank" href="http://pinterest.com/pin/create/button/?url=&media=&description= by @unveiledwife">
<span class="button">PIN IT</span>
<span class="count">0</span>
</a>
<a data-count="44" id="stickyBtn" class="comment" href="#disqus_thread">
<span class="button">COMMENT</span>
<span class="count">0</span>
</a>
</div>
</div>
#stickyBtn{font:9px Verdana,Geneva,sans-serif;color:#FFF;text-decoration:none;text-align:center;float:left;margin-right:20px}#stickyBtn span{float:left;padding:5px 3px;border-color:#e2e2e2;border-style:solid}#stickyBtn .button{width:55px;display:block;border-width:1px 0 1px 1px;opacity:.85}#stickyBtn .button:hover{opacity:1}#stickyBtn .button:active{opacity:.95}#stickyBtn .count{width:auto;display:block;background-color:#fff;color:#000;border-width:1px 1px 1px 0;position:relative;min-width:15px}#stickyBtn .count:after{border:solid transparent;content:'';height:0;width:0;position:absolute;border-color:transparent;border-right-color:#fff;border-width:5px;left:-8px;top:6px}#stickyBtn.fbShare .button{background-color:#6279a3}#stickyBtn.tweet .button{background-color:#71a2d3}#stickyBtn.pinIt .button{background-color:#d77980}#stickyBtn.comment .button{background-color:#999}Đoạn Javasript
<script type='text/javascript'>
//<![CDATA[
$('#stickySocial').find('#stickyBtn').each(function(){
var $el = $(this);
var ssCount = $el.data("count");
var ssClass = $el.attr("class").split(' ')[0];
$('.'+ssClass+' .count').html(ssCount);
});
/*$('#stickySocial').find('#stickyBtn').each(function(){
var $e = $(this),
shareCount = 0,
newShareCount = $e.data().count;
$({shareCount:shareCount}).animate({shareCount:newShareCount}, {
duration: 2500,
easing:'swing', // can be anything
step: function() {
$('.count').text(Math.ceil(this.shareCount));
}
});
});
$({shareCount: 0}).animate({shareCount: 100}, {
duration: 2500,
easing:'swing', // can be anything
step: function() { // called on every step
// Update the element's text with rounded-up value:
$('.tweet .count').text(Math.ceil(this.shareCount));
}
});
$({shareCount: 0}).animate({shareCount: 100}, {
duration: 2500,
easing:'swing', // can be anything
step: function() { // called on every step
// Update the element's text with rounded-up value:
$('.pinIt .count').text(Math.ceil(this.shareCount));
}
});
$({shareCount: 0}).animate({shareCount: 100}, {
duration: 2500,
easing:'swing', // can be anything
step: function() { // called on every step
// Update the element's text with rounded-up value:
$('.comment .count').text(Math.ceil(this.shareCount));
}
});
*/
//]]>
</script>
2. Button Chia Sẽ Bật Lên ở Chân Trang
HTML
<li class="share">CSS : Vì CSS này quá dài nên mình sẽ để ở codepen nhé các bạn
<a href="#" class="tool-handle footer-nav-link button">Share</a>
<ul class="tooltip">
<li><a href="#" class="facebook-share">Facebook</a></li>
<li><a href="#" class="twitter-share">Twitter</a></li>
<li><a href="#" class="email-share">Email</a></li>
<span class="close-button close">×</span>
</ul>
</li>
Javasript :
$(document).ready(function(){function a(){var a=$(document).attr("title"),b=document.URL,c="Check this awesome link out: "+b;$(".twitter-share").click(function(b){b.preventDefault;var c="Check out "+a+" on http://heportfolio.com";window.open("https://twitter.com/intent/tweet?source=webclient&text="+c,630,360)}),$(".facebook-share").click(function(a){a.preventDefault,window.open("http://www.facebook.com/sharer.php?u="+b,630,360)}),$(".email-share").attr("href","mailto:?Subject="+a+"&Body="+c)}function b(){var a=$(".tool-handle"),b=a.parent(),c=b.find(".close");a.click(function(a){a.preventDefault(),b.toggleClass("show")}),c.on("click",function(){b.removeClass("show")})}function c(){$(".tool-handle").click()}a(),b(),setTimeout(function(){c()},2e3)});
3. Nút Chia sẽ Mạng Xã Hội Ẩn Hiện
HTML
<div class="share">CSS
<span>Share</span>
<nav>
<a href="#"><i class="fa fa-twitter"></i></a>
<a href="#"><i class="fa fa-facebook"></i></a>
<a href="#"><i class="fa fa-google"></i></a>
<a href="#"><i class="fa fa-github"></i></a>
</nav>
</div>
$backgroundColor: #e5eef3;JavaSript
$buttonColor: #ffffff;
$textColor: #f1ce64;
$hoverColor: #fff;
$facebook: #3B5998;
$twitter: #61c5ec;
$google: #ea4335;
$github: #000000;
body{font-family:'Roboto';background-color:$backgroundColor;text-align:center;color:$textColor;font-size:28px}a{color:$textColor}.share{position:absolute;width:400px;left:50%;margin-left:-200px;top:50%;margin-top:-40px;border-radius:80px;spanwidth:200px;line-height:80px;display:inline-block;font-weight:700;text-transform:uppercase;position:absolute;left:50%;margin-left:-100px;opacity:1;transition:opacity .3s ease-in-out;pointer-events:none}nav{font-size:0}a{line-height:80px;width:80px;text-align:center;display:inline-block;background-color:$buttonColor;color:$buttonColor;overflow:hidden;opacity:1;transition:all .3s ease-in-out;margin:0 -20px;box-shadow:3px 1px 3px rgba(0,0,0,0.1);&:nth-child(1) {;border-top-left-radius:40px;border-bottom-left-radius:40px;margin-left:0;&:hover {;background-color:$twitter}&:nth-child(2):hover{background-color:$facebook}&:nth-child(3):hover{background-color:$google}&:nth-child(4){border-top-right-radius:40px;border-bottom-right-radius:40px;margin-right:0;&:hover {;background-color:$github}&:hover,&.hover{spanopacity:0}a{border-radius:50%;margin:0 10px;color:$textColor;font-size:28px;&:hover {;color:$hoverColor}
let share = document.getElementsByClassName('share')[0];Đó là tổng hợp chia sẽ mạng xã hội vô cùng đẹp mắt, chúc các bạn có những lượt truy cập trên nút share button mạng xã hội nhé.
setTimeout(() => {
share.classList.add("hover");
}, 1000);
setTimeout(() => {
share.classList.remove("hover");
}, 3000);
Xem Thêm : Code Chặn ADBlock Cho Blogspot
Mạng Xã Hội đep
ReplyDelete