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 !
Tác giả: Lê ANh Đức

Tôi là Đức, sinh viên năm cuối ngành Điện tử - Viễn thông trường Đại học Bách Khoa Hà Nội. Say hello to you!

  • Admin của trang web này đã qua đời ! Hãy để lại một comment để thể hiện lòng biết ơn, tiếc thương đối với người đã mất. Chúng tôi hy vọng những người yêu quý Lê Anh Đức sẽ cảm thấy được an ủi khi truy cập trang web này, cùng nhớ lại và tôn vinh cuộc đời của anh ấy. Cảm ơn rất nhiều !!!
    ^_^
    =r
    :))
    ;)
    =))
    :((
    <3
    ==
    :v
    :)
    :(
    :*
    :D
    (yy)
    (y)
    =hi
    :P
    =s
    =ok
    =clap
    =he
    =hl
    =hr
    :-)
    =hup
    =hd
    =l
    =ht
    =aa
    =no
    =hum
    =haizz
    =ask

    30 nhận xét:

    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. Trả lời
      1. thanks Dii Noo nhiều nha <3 nhớ ủng hộ admin nhé :v

        Xóa
    3. 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
    4. 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
    5. 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
    6. bài viết hay chúc bác Thành công trong CV BLog nhé :v

      Trả lờiXóa

    Một số lưu ý khi bình luận

    Mọi bình luận sai nội quy sẽ bị xóa mà không cần báo trước (xem nội quy)

    Bấm Thông báo cho tôi bên dưới khung bình luận để nhận thông báo khi admin trả lời

    Để bình luận một đoạn code, hãy mã hóa code trước nhé !