Note Thông báo: Từ ngày 25/05/2021 hệ thống ngừng hoạt động, mọi vấn đề hay thắc mắc trên đây sẽ không được giải quyết. Hãy truy cập Code Pro để được hỗ trợ!

TẠO BUTTON SHARE HIỆU ỨNG ĐẸP CHO BLOGSPOT

Loading...
 Hello các bạn. Hôm nay mình sẽ chia sẻ cho các bạn 1 button Share bài viết với hiệu ứng cực đẹp dạng mở Tab.






Để làm được nó rất đơn giản chỉ cần thêm đoạn code sau vào nơi muốn hiển thị trong theme của bạn:
<style>
.share-btn {
position: absolute;
background-color: #f7f7f7;
;
border-radius: 100px;
width: 200px;
height: 72px;
box-shadow: 0 5px 10px rgba(0, 0, 40, 0.03);
transition: all 0.4s cubic-bezier(0.3, 0, 0, 1.3);
overflow: hidden;
cursor: pointer;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
font-family: Roboto;
}
.share-btn .cta {
position: absolute;
color: #f5ce67;
text-transform: uppercase;
font-size: 22px;
letter-spacing: 1px;
transition: all 0.25s ease-in-out;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
.share-btn .close {
position: absolute;
right: 38px;
top: 31px;
cursor: pointer;
color: #cfd2d9;
font-size: 20px;
opacity: 0;
transition: all 0.4s cubic-bezier(0.3, 0, 0, 1.3);
transform: rotate(-45deg);
transform-origin: center center;
}
.share-btn .social {
width: 70%;
padding-left: 0;
list-style-type: none;
margin: 75px auto 0 auto;
}
.share-btn .social span {
float: right;
}
.share-btn .social li {
padding-bottom: 15px;
transform: scale(0.7) translateX(10px) translateY(-10px);
transition: all 0.25s ease-in-out;
transform-origin: 0% 0%;
opacity: 0;
}
.share-btn .social li:nth-child(1) {
color: #3b5998;
}
.share-btn .social li:nth-child(2) {
color: #55acee;
}
.share-btn .social li:nth-child(3) {
color: #d34836;
}
.share-btn .fake-input {
width: 60%;
margin: 10px auto 0 auto;
background-color: #f3f6fb;
color: #b2b5bc;
border-radius: 10px;
padding: 15px;
font-size: 15px;
overflow: hidden;
}
.clicked {
width: 260px;
height: 270px;
border-radius: 50px;
cursor: auto;
}
.share-btn.clicked .cta {
left: 40px;
top: 30px;
transform: translateX(0) translateY(0);
color: #cfd2d9;
}
.share-btn.clicked .close {
opacity: 1;
transform: rotate(0deg);
}
.share-btn.clicked .social li {
transform: scale(1) translateX(0) translateY(0);
opacity: 1;
}
.share-btn.clicked .social li:nth-child(1) {
transition-delay: .05s;
}
.share-btn.clicked .social li:nth-child(2) {
transition-delay: .1s;
}
.share-btn.clicked .social li:nth-child(3) {
transition-delay: .15s;
}

</style>
<div class="share-btn">
<span class="cta">Share</span>
<div class="close"><i class="fa fa-times" aria-hidden="true"></i></div>
<ul class="social">
<li><a style="color: #3d4be2" expr:href='&quot;http://www.facebook.com/sharer/sharer.php?u=&quot; + data:blog.url' onclick='window.open(this.href,&apos;sharer&apos;, &apos;toolbar=0,status=0,width=626,height=436&apos;); return false;' rel='nofollow'>Facebook<span>12</span></a></li>
<li><a style="color: #a3d8ff" expr:href='&quot;http://twitter.com/home?status=&quot; + data:blog.url' onclick='window.open(this.href,&quot; sharer&quot; ,&quot; toolbar=0,status=0,width=626,height=436&quot; ); return false;' rel='nofollow'>Twitter<span>50</span></a></li>
<li><a style="color: #ff0f02" expr:href='&quot;https://plus.google.com/share?url=&quot; + data:blog.url' onclick='javascript:window.open(this.href,&quot; &quot; ,&quot; menubar=no,toolbar=no,resizbutton_le=yes,scrollbars=yes,height=600,width=600&quot; ); return false; ' rel='nofollow'>Google +<span>248</span></a></li>
</ul>
<div class="fake-input"><data:blog.url/></div>
</div>



<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script >
$('.share-btn').click(function(){
$(this).addClass("clicked");
});

$('.close').click(function (e) {
$('.clicked').removeClass('clicked');
e.stopPropagation();
});

</script>

Lại một thủ thuật nữa mình chia sẻ. Hi vọng với button Share này sẽ làm blog bạn trở nên chuyên nghiệp hơn.
Chúc các bạn thành công !
  1. Cái đếm kia hoạt động như nào e?
    À đâu viết trực tiếp đó chứ, a tưởng dùng js bộ đếm :3

    Trả lờiXóa
  2. Top comment kia là update thủ công hả e

    Trả lờiXóa
    Trả lời
    1. e dùng js lọc ra id và số cmt rồi xếp hạng chúng ạ

      Xóa
    2. K. Ý a là dưới comment này cơ e. K phải widget kia.

      Xóa
    3. à cái đó thì thủ công a. tính dùng thêm cái js nó thống kê cho lẹ mak nặng quá :v

      Xóa
  3. Thêm code này vào có bị ảnh hướng đến tốc độ load trang kh a nhỉ

    Trả lờiXóa
    Trả lời
    1. code trên mình dcó dùng đoạn script jquery. nếu bạn có rồi thì chỉ việc xóa. vì là css và 1 script nhỏ nên ko ảnh hưởng đến tốc độ nha

      Xóa
  4. Cái widget Top bình luận kia là thống kê trong 1 tuần hay toàn thời gian đấy em?

    Trả lờiXóa
    Trả lời
    1. e thống kê toàn thời gian a ạ. nhưng muốn 1 tuần thì chỉnh lại cũng đc

      Xóa
    2. Chỉnh thế nào, chỉnh js hay gì? Send code anh với.

      Xóa
  5. bài viết hay chúc bác Thành công trong CV BLog nhé :v

    Trả lờiXóa