TẠO BUTTON SHARE HIỆU ỨNG ĐẸP CHO BLOGSPOT
![](http://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_VcGPWWWlHxUdzREFdn-Lypv6B425e1Gqb-jWdHlBT9zizH7M4ITw4hKs_SXTF06fT3n9sgc-i8hJGEp14OCvhOxeFEq_rGL8rK07ERbuwk4sTsK1xGsq-Rk09av7WQ/s113/admin.jpg)
Xuất bản:
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.
![](https://i.imgur.com/Pj3ptSZ.jpg)
Để 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:
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 !
![](https://i.imgur.com/Pj3ptSZ.jpg)
<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='"http://www.facebook.com/sharer/sharer.php?u=" + data:blog.url' onclick='window.open(this.href,'sharer', 'toolbar=0,status=0,width=626,height=436'); return false;' rel='nofollow'>Facebook<span>12</span></a></li>
<li><a style="color: #a3d8ff" expr:href='"http://twitter.com/home?status=" + data:blog.url' onclick='window.open(this.href," sharer" ," toolbar=0,status=0,width=626,height=436" ); return false;' rel='nofollow'>Twitter<span>50</span></a></li>
<li><a style="color: #ff0f02" expr:href='"https://plus.google.com/share?url=" + data:blog.url' onclick='javascript:window.open(this.href," " ," menubar=no,toolbar=no,resizbutton_le=yes,scrollbars=yes,height=600,width=600" ); 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 !
Cái đếm kia hoạt động như nào e?
Trả lờiXóaÀ đâu viết trực tiếp đó chứ, a tưởng dùng js bộ đếm :3
:v đẹp thôi chứ có host đâu mà đếm a :v
Xóa:)
Xóađẹp ghê. thanks for share <3
Trả lờiXóa<3 share cho bạn bè nào :v
XóaĐẹp quá khanh ơi <3
Trả lờiXóathanks Dii Noo nhiều nha <3 nhớ ủng hộ admin nhé :v
XóaGhé thăm blog bác Khanh <3
Trả lờiXóa<3
Xóa. ghé thăm blog <3
Trả lờiXóacảm ơn bác <3
XóaTop comment kia là update thủ công hả e
Trả lờiXóaChắc là vậy :v
Xóae dùng js lọc ra id và số cmt rồi xếp hạng chúng ạ
XóaK. Ý a là dưới comment này cơ e. K phải widget kia.
Xóaà 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óaThêm code này vào có bị ảnh hướng đến tốc độ load trang kh a nhỉ
Trả lờiXóaCó chứ em :v
Xóacode 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óaCá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óae 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óaChỉnh thế nào, chỉnh js hay gì? Send code anh với.
Xóabài viết hay lắm
Trả lờiXóathanks a nha.
Xóap/s: mà a ngủ muôn thế :v
bài viết hay chúc bác Thành công trong CV BLog nhé :v
Trả lờiXóathanks bn nha <3
XóaĐẹp quá ;)
Trả lờiXóa