Cảm ơn bạn đã tham gia khảo sát
Đóng góp của bạn sẽ giúp chúng tôi dần cải thiện về mặt nội dung cũng như giao diện của trang.

Khanh Blogger

Khanh Blogger

Tạo button Share hiệu ứng đẹp cho Blogspot

 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 !

Bình luận

  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. đẹp ghê. thanks for share <3

    Trả lờiXóa
  3. Trả lời
    1. thanks Dii Noo nhiều nha <3 nhớ ủng hộ admin nhé :v

      Xóa
  4. 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
  5. 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
  6. 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
    3. đây nha a : http://www.trongkhanhnguyen.com/2017/11/widget-top-nguoi-binh-luan-nhieu-nhat.html

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

    Trả lờiXóa

XEM NHIỀU TRONG TUẦN

Bạn có thể quan tâm