Hướng dẫn tạo nút chia sẻ với hiệu ứng popup khi click chuột không bị plugin quảng cáo chặn
Hiện nay đa số template nào cũng chèn các nút chia sẻ mạng xã hội nhưng có một đặc điểm chung là tất cả các nút này đều bị plugin quảng cáo chặn không hiển thị rất bất tiện, người đọc không thể chia sẻ bài viết qua mạng xã hội làm cho blog của chúng ta ít tương tác hơn. Sau quá trình tham khảo trên mạng tôi cũng tạo ra được nút chia sẻ với hiệu ứng popup khi click chuột không bị plugin quảng cáo chặn rất đẹp và chuyên nghiệp. Dưới đây là hướng dẫn từng bước thêm vào blog của bạn.
Bước 1: Kiểm tra xem template đã có thư viện font-awesome chưa nếu chưa có chèn link bên dưới sau thẻ <head>
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>
Bước 2: Chèn CSS trước ]]></b:skin>
.dropdown {
float: right; // nếu thích bên trái thì để left
}
.dropdown-link {
float: right; // nếu thích bên trái thì để left
display: block;
}
.dropdown-container {
position: absolute;
right: 20px;
background: #FFF;
box-shadow: 0 3px 8px rgba(0, 0, 0, .3);
margin-top: -200px;
max-height: 400px;
width: 170px;
overflow: auto;
padding-top: 10px;
padding-bottom: 10px;
display:none;
}
.dropdown-container li a {
color: #262626;
display: block;
font-weight: normal;
padding: 6px 15px;
text-transform: none;
}
.dropdown-container li a:hover {
background-color:#edf4ff;
}
Bước 3: Chèn javascript trước thẻ </head>
<script>
$(document).ready(function(){
$('.dropdown').each(function() {
var $dropdown = $(this);
$(".dropdown-link", $dropdown).click(function(e) {
e.preventDefault();
$div = $(".dropdown-container", $dropdown);
$div.toggle();
$(".dropdown-container").not($div).hide();
return false;
});
});
$('html').click(function(){
$(".dropdown-container").hide();
});
});
</script>
<script>
function copyTextToClipboard(text) {
var textArea = document.createElement("textarea");
textArea.style.position = 'fixed';
textArea.style.top = 0;
textArea.style.left = 0;
textArea.style.width = '2em';
textArea.style.height = '2em';
textArea.style.padding = 0;
textArea.style.border = 'none';
textArea.style.outline = 'none';
textArea.style.boxShadow = 'none';
textArea.style.background = 'transparent';
textArea.value = text;
document.body.appendChild(textArea);
textArea.select();
try {
var successful = document.execCommand('copy');
var msg = alert("Đã sao chép liên kết vào khay nhớ tạm!");
} catch (err) { var msg = alert("Không thể sao chép liên kết!")
; }
document.body.removeChild(textArea);
}
function CopyLink() {
copyTextToClipboard(location.href);
}
</script>
Bước 4: Chèn đoạn bên dưới vào nơi muốn hiển thị có thể trong bài viết hoặc ngoài trang chủ
<div class='dropdown'>
<a class='dropdown-link' href='javascript:void(0);' style='color:#777;' title='Gửi nội dung này đến bạn bè hoặc đăng trên dòng thời gian của bạn'><i class='fa fa-share' style='color:#777;'/> Chia sẻ</a>
<ul class='dropdown-container'>
<li>
<a onclick='CopyLink()' style='cursor: pointer;' title='Nhận liên kết'><i class='fa fa-link' style='color:#fff; display: block; float: left; font-size: 14px; height: 20px; line-height: 20px; text-align: center; width: 20px; background:#000;'/> &nbsp;&nbsp;&nbsp;&nbsp;Nhận liên kết</a>
</li>
<li>
<a expr:href='data:post.sharePostUrl + "&target=facebook"' expr:onclick='"window.open(this.href, \"_blank\", \"height=430,width=640\"); return false;"' expr:title='data:top.shareToFacebookMsg' target='_blank'><i class='fa fa-facebook' style='color:#fff; display: block; float: left; font-size: 14px; height: 20px; line-height: 20px; text-align: center; width: 20px; background:#5a7abf;'/>&nbsp;&nbsp;&nbsp;&nbsp;Facebook</a>
</li>
<li>
<a expr:href='data:post.sharePostUrl + "&target=twitter"' expr:onclick='"window.open(this.href, \"_blank\", \"height=430,width=640\"); return false;"' expr:title='data:top.shareToTwitterMsg' target='_blank'><i class='fa fa-twitter' style='color:#fff; display: block; float: left; font-size: 14px; height: 20px; line-height: 20px; text-align: center; width: 20px; background:#19BFE5;'/>&nbsp;&nbsp;&nbsp;&nbsp;Twitter</a>
</li>
<li>
<a expr:href='data:post.sharePostUrl + "&target=googleplus"' expr:onclick='"window.open(this.href, \"_blank\", \"height=430,width=640\"); return false;"' target='_blank' title='Chia sẻ lên Google+'><i class='fa fa-google-plus' style='color:#fff; display: block; float: left; font-size: 14px; height: 20px; line-height: 20px; text-align: center; width: 20px; background:#D64136;'/>&nbsp;&nbsp;&nbsp;&nbsp;Google+</a>
</li>
<li>
<a expr:href='data:post.sharePostUrl + "&target=email"' expr:onclick='"window.open(this.href, \"_blank\", \"height=430,width=640\"); return false;"' target='_blank' title='Gửi Email'><i class='fa fa-envelope' style='color:#fff; display: block; float: left; font-size: 14px; height: 20px; line-height: 20px; text-align: center; width: 20px; background:#23A215;'/>&nbsp;&nbsp;&nbsp;&nbsp;Email</a>
</li>
</ul>
</div>
Bước 5: Lưu template lại là xong.
Trường hợp các bạn nào đang xài template của blog thủ thuật win 10 chia sẻ thì tìm đến thẻ meta-botom sửa thành như sau:
.meta-botom {
display: block;
overflow: hidden;
border-top: 1px dashed #ededed;
padding: 10px 0 0;
margin-right: 20px;
margin-left: 20px;
}
Tiếp tục tìm meta-botom thay đoạn dưới đây bằng đoạn ở bước 4:
<span class='share-post'>
<a class='f' expr:href='data:post.sharePostUrl + "&target=facebook"' expr:onclick='"window.open(this.href, \"_blank\", \"height=430,width=640\"); return false;"' expr:title='data:top.shareToFacebookMsg' target='_blank'><i class='fa fa-facebook'/></a>
<a class='t' expr:href='data:post.sharePostUrl + "&target=twitter"' expr:onclick='"window.open(this.href, \"_blank\", \"height=430,width=640\"); return false;"' expr:title='data:top.shareToTwitterMsg' target='_blank'><i class='fa fa-twitter'/></a>
<a class='g' expr:href='data:post.sharePostUrl + "&target=googleplus"' expr:onclick='"window.open(this.href, \"_blank\", \"height=430,width=640\"); return false;"' target='_blank' title='Chia sẻ lên Google+'><i class='fa fa-google-plus'/></a>
<a class='e' expr:href='data:post.sharePostUrl + "&target=email"' expr:onclick='"window.open(this.href, \"_blank\", \"height=430,width=640\"); return false;"' target='_blank' title='Gửi Email'><i class='fa fa-envelope'/></a>
</span>
Như vậy với 5 bước đơn giàn là bạn có thể thêm được chia sẻ với hiệu ứng popup khi click chuột không bị plugin quảng cáo chặn.
Em làm xong k click đc a ạ :( Giống bài khung code có nút Copy.
Trả lờiXóa