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.

DEMO

Để 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='"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 !

Bài viết của bạn được xem như một đề xuất cho bài viết của chúng tôi. Mẫu bài viết bạn đang chỉnh sửa sẽ được chúng tôi xem xét và update lên blog nếu nó hoàn hảo !

CHỈNH SỬA BÀI VIẾT
----------------------------------------
 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.<br /><br /><a name='more'></a><br /><img border="0" data-original-height="150" data-original-width="150" height="0" src="https://i.imgur.com/Pj3ptSZ.jpg" width="0" /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://1.bp.blogspot.com/-vXvaD07R3ZQ/Wg7-tsXHoMI/AAAAAAAABw4/TW57_s1EN_cWYUkeIJ7oyTE7fBzlAc1GACLcBGAs/s1600/share%2Bbutton%2Bhieu%2Bug.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="900" data-original-width="1600" height="360" src="https://1.bp.blogspot.com/-vXvaD07R3ZQ/Wg7-tsXHoMI/AAAAAAAABw4/TW57_s1EN_cWYUkeIJ7oyTE7fBzlAc1GACLcBGAs/s640/share%2Bbutton%2Bhieu%2Bug.png" width="640" /></a></div><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" style="clear: both; text-align: center;"><b><span style="font-size: large;"><a href="http://demo.linkthuthuat.com/2017/11/button-share.html" rel="nofollow" target="_blank">DEMO</a></span></b></div><div class="separator" style="clear: both; text-align: center;"><b><br /></b></div>Để 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:<br /><blockquote class="tr_bq"><style><br />.share-btn {<br />position: absolute;<br />background-color: #f7f7f7;<br />;<br />border-radius: 100px;<br />width: 200px;<br />height: 72px;<br />box-shadow: 0 5px 10px rgba(0, 0, 40, 0.03);<br />transition: all 0.4s cubic-bezier(0.3, 0, 0, 1.3);<br />overflow: hidden;<br />cursor: pointer;<br />top: 50%;<br />left: 50%;<br />transform: translateX(-50%) translateY(-50%);<br />font-family: Roboto;<br />}<br />.share-btn .cta {<br />position: absolute;<br />color: #f5ce67;<br />text-transform: uppercase;<br />font-size: 22px;<br />letter-spacing: 1px;<br />transition: all 0.25s ease-in-out;<br />top: 50%;<br />left: 50%;<br />transform: translateX(-50%) translateY(-50%);<br />}<br />.share-btn .close {<br />position: absolute;<br />right: 38px;<br />top: 31px;<br />cursor: pointer;<br />color: #cfd2d9;<br />font-size: 20px;<br />opacity: 0;<br />transition: all 0.4s cubic-bezier(0.3, 0, 0, 1.3);<br />transform: rotate(-45deg);<br />transform-origin: center center;<br />}<br />.share-btn .social {<br />width: 70%;<br />padding-left: 0;<br />list-style-type: none;<br />margin: 75px auto 0 auto;<br />}<br />.share-btn .social span {<br />float: right;<br />}<br />.share-btn .social li {<br />padding-bottom: 15px;<br />transform: scale(0.7) translateX(10px) translateY(-10px);<br />transition: all 0.25s ease-in-out;<br />transform-origin: 0% 0%;<br />opacity: 0;<br />}<br />.share-btn .social li:nth-child(1) {<br />color: #3b5998;<br />}<br />.share-btn .social li:nth-child(2) {<br />color: #55acee;<br />}<br />.share-btn .social li:nth-child(3) {<br />color: #d34836;<br />}<br />.share-btn .fake-input {<br />width: 60%;<br />margin: 10px auto 0 auto;<br />background-color: #f3f6fb;<br />color: #b2b5bc;<br />border-radius: 10px;<br />padding: 15px;<br />font-size: 15px;<br />overflow: hidden;<br />}<br />.clicked {<br />width: 260px;<br />height: 270px;<br />border-radius: 50px;<br />cursor: auto;<br />}<br />.share-btn.clicked .cta {<br />left: 40px;<br />top: 30px;<br />transform: translateX(0) translateY(0);<br />color: #cfd2d9;<br />}<br />.share-btn.clicked .close {<br />opacity: 1;<br />transform: rotate(0deg);<br />}<br />.share-btn.clicked .social li {<br />transform: scale(1) translateX(0) translateY(0);<br />opacity: 1;<br />}<br />.share-btn.clicked .social li:nth-child(1) {<br />transition-delay: .05s;<br />}<br />.share-btn.clicked .social li:nth-child(2) {<br />transition-delay: .1s;<br />}<br />.share-btn.clicked .social li:nth-child(3) {<br />transition-delay: .15s;<br />}<br /><br /></style><br /><div class="share-btn"><br /><span class="cta">Share</span><br /><div class="close"><i class="fa fa-times" aria-hidden="true"></i></div><br /><ul class="social"><br /><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><br /><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><br /><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><br /></ul><br /><div class="fake-input"><data:blog.url/></div><br /></div><br /><br /><br /><br /><script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script><br /><script ><br />$('.share-btn').click(function(){<br />$(this).addClass("clicked");<br />});<br /><br />$('.close').click(function (e) {<br />$('.clicked').removeClass('clicked');<br />e.stopPropagation();<br />});<br /><br /></script></blockquote><br />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.<br />Chúc các bạn thành công !