Menu
» » Social Share Cuộn Trượt Dọc Ở Góc Phải Web/Blog Sử Dụng CSS3 & JQuery

A+ A-
Hôm nay manhhaiblog chia sẻ thêm một thủ thuật blog nữa dành cho bạn nào đam mê về lĩnh vực này nha đó là Social Share Cuộn Trượt Dọc Ở Góc Phải của trang web hay blog của bạn.
Ưu điểm của thủ thuật này này là rất nhẹ loading nhanh mượt mà như con gà được dính trượt một góc rất rễ nhận biết và tiện lợi cho cả PC và Mobile nữa.
Các icons mà chúng ta sử dụng trong bài viết này là sử dụng từ font Awesome, vì vậy các bạn nên chèn font này ngay bên trong thẻ < head> tức là sau thẻ này mới hiển thị được nhé cũng có một số mẫu theme đã sử dụng thủ thuật có chứa font Awesome nên ko nhất thiết chèn link này cũng được ạ .
Sau đây là các bước làm.
Demo Click here         

 1 Blogger --> Tổng quan -->Chủ Đề -->chỉnh sửa HTML ---> Tìm Thẻ <head>
2 Copy đoạn link này dán vào sau thẻ <head> 

<link rel='stylesheet prefetch' href='//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'>

3 bước tiếp theo tìm thẻ ]]></b:skin> sau đó copy đoạn code css bên dưới dán vào trước thẻ vừa tìm được .



 /* ACTIVATION BUTTON
**************************************************/
.ttw-share-activate-button {
min-width:50px;
cursor:pointer;
text-align:right;
position:fixed;
z-index:999999;
right:47px;
bottom:20px;
text-decoration:none !important;
font-size:13px;
font-weight:700;

 /* activation button label */
color:#ee1717;

 -webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
transition: all .5s ease;

 -webkit-transform: translateY(0);
-moz-transform: translateY(0);
transform: translateY(0);

 /* remove the flickering effect of a tapped link/button when on a touch device */
-webkit-tap-highlight-color:rgba(0,0,0,0);
}
/* show activation button when scrolled down (if active) */
.ttw-share-activate-button-visible {
-webkit-transform: translateY(100px);
-moz-transform: translateY(100px);
transform: translateY(100px);
}
.share-desc {
display:inline-block;
position:relative;
bottom:4px;
}
/* activation button icon initial position */
.ttw-share-activate-button i {
font-size:24px;
margin:0 0 0 10px;
color:#ee1717;

 -webkit-transform:rotate(0deg);
-moz-transform:rotate(0deg);
transform:rotate(0deg);
}
/* activation button icon hover color */
.ttw-share-activate-button-active i,
.ttw-share-activate-button:hover i {
color:#A9AFB4;

 -webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
transition: all .5s ease;
}
/* activation button animation */
.ttw-share-activate-button-active i {
-webkit-transform:rotate(180deg);
-moz-transform:rotate(180deg);
transform:rotate(180deg);

 -webkit-transition: -webkit-transform .5s ease, color .1s ease;
-moz-transition: -moz-transform .5s ease, color .1s ease;
transition: transform .5s ease, color .1s ease;
}
/* THE ARROW
**************************************************/
.ttw-share-arrow {
width:0;
height:0;
margin:0 auto !important;
border-left:5px solid transparent;
border-right:5px solid transparent;
bottom: 47px !important;
right: 84px;
display:none;

 /* tooltip color */
border-top:5px solid #5A5A5A;

 position:fixed;
z-index:999999;
}
.ttw-share-arrow-active {
display:inline;
opacity:1 !important;
-webkit-transform: translateY(0px) !important;
-moz-transform: translateY(0px) !important;
transform: translateY(0px) !important;
}
/* Twitter, Facebook, GooglePlus button joint properties
**************************************************/
.social-share-wrapper {
position:fixed;
z-index:999999;
overflow:hidden;
font-size:20px;
text-align:center;
width:56px;
margin:0 0 1px 0;

 opacity:0;
right:-100%;
bottom:25px;
}
.social-share-wrapper-active {
opacity: 1 !important;
right: 64px;
bottom: 87px;
}
/* the shadow */
.social-share-wrapper-shadow {
-webkit-transition: -webkit-box-shadow 1s ease;
-moz-transition: -moz-box-shadow 1s ease;
transition: box-shadow 1s ease;

 /* share buttons shadow size and color */
-moz-box-shadow: 0 0 20px 1px rgba(0,0,0,.1);
-webkit-box-shadow: 0 0 20px 1px rgba(0,0,0,.1);
box-shadow: 0 0 20px 1px rgba(0,0,0,.1);
}
.social-share-wrapper li {
list-style-type:none;
background:#fff;
/* button separator color */
border-top:1px solid #E0E0E0;
}

 /* disable top border on first item */
.social-share-wrapper li:first-child {
border-top:none !important;

 /* create top left rounded corner for first item */
-webkit-border-top-left-radius:2px;
-moz-border-top-left-radius:2px;
border-top-left-radius:2px;

 /* create top right rounded corner for first item */
-webkit-border-top-right-radius:2px;
-moz-border-top-right-radius:2px;
border-top-right-radius:2px;
}
/* first child (from the top) */
.social-share-wrapper li:nth-last-child(5) {
/* disable top border on first item */
border-top:none !important;

 -webkit-transform: translateY(275px) scale(0.1);
-moz-transform: translateY(275px) scale(0.1);
transform: translateY(275px) scale(0.1);

 -webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
transition: all .5s ease;
}
/* second child (from the top) */
.social-share-wrapper li:nth-last-child(4) {
-webkit-transform: translateY(200px) scale(0.25);
-moz-transform: translateY(200px) scale(0.25);
transform: translateY(200px) scale(0.25);

 -webkit-transition: all .4s ease;
-moz-transition: all .4s ease;
transition: all .4s ease;
}
/* third child (from the top) */
.social-share-wrapper li:nth-last-child(3) {
-webkit-transform: translateY(125px) scale(0.5);
-moz-transform: translateY(125px) scale(0.5);
transform: translateY(125px) scale(0.5);

 -webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
transition: all .3s ease;
}
/* fourth child (from the top) */
.social-share-wrapper li:nth-last-child(2) {
-webkit-transform: translateY(75px) scale(0.8);
-moz-transform: translateY(75px) scale(0.8);
transform: translateY(75px) scale(0.8);

 -webkit-transition: all .2s ease;
-moz-transition: all .2s ease;
transition: all .2s ease;
}
/* fifth child (from the top) */
.social-share-wrapper li:nth-last-child(1) {
-webkit-transform: translateY(25px) scale(1);
-moz-transform: translateY(25px) scale(1);
transform: translateY(25px) scale(1);

 -webkit-transition: all .1s ease;
-moz-transition: all .1s ease;
transition: all .1s ease;
}

 /* all children active */
.social-share-wrapper-active li {
-webkit-transform: translateY(0) scale(1) !important;
-moz-transform: translateY(0) scale(1) !important;
transform: translateY(0) scale(1) !important;
}

 .social-share-wrapper li:last-child {
/* tooltip color */
border-bottom:4px solid #5A5A5A;
}
/* SHARED BUTTON STYLES
**************************************************/
.ttw-twitter-button,
.ttw-facebook-button,
.ttw-googleplus-button,
.ttw-tumblr-button,
.ttw-email-button {
display:block;
width:60px;
color:#A5ACB4;
padding:15px 0 15px 0;

 -webkit-transition: all 0s ease;
-moz-transition: all 0s ease;
transition: all 0s ease;
}

 .ttw-twitter-button:hover,
.ttw-facebook-button:hover,
.ttw-googleplus-button:hover,
.ttw-tumblr-button:hover,
.ttw-email-button:hover {
color:#fff;
background:#FF543B;

 -webkit-transition: all 0s ease;
-moz-transition: all 0s ease;
transition: all 0s ease;
}



4 Bước tiếp theo nữa chúng ta tìm thẻ </head> copy code JQuery bên dưới dán chúng vào trước thẻ này </head> vừa tìm được.



 <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js" charset="utf-8"></script>

 <script type="text/javascript">
$(document).ready(function() {

 // BEGIN SHOW/HIDE SHARE BUTTONS
$('.ttw-share-activate-button').on('click', function(e) {
e.preventDefault();
/* touchstart events */
if($('.social-share-wrapper').hasClass('social-share-wrapper-active'))
{
/* hide share buttons */
$(".social-share-wrapper").removeClass("social-share-wrapper-active");

 /* remove shadow */
$(".social-share-wrapper").removeClass("social-share-wrapper-shadow");
/* hide arrow */
$(".ttw-share-arrow").removeClass("ttw-share-arrow-active");
/* hide menu button active colors */
$(".ttw-share-activate-button").removeClass("ttw-share-activate-button-active");
$(".ttw-share-activate-button").toggleClass("ttw-share-activate-button-hover");
$(".ttw-share-activate-button").removeClass("ttw-share-activate-button-hover-touch");
} else {
/* show share buttons */
$(".social-share-wrapper").addClass("social-share-wrapper-active");

 /* show shadow */
setTimeout(function(){
$(".social-share-wrapper").addClass("social-share-wrapper-shadow");
},150);
/* show arrow */
$(".ttw-share-arrow").addClass("ttw-share-arrow-active");

 }

 });

 // END SHOW/HIDE SHARE BUTTONS
});

 </script>



5 Sau đó lưu mẫu lại .
6 Quay lại Bố cục chon một Tiện ich HTML/javacrip
7 Copy code bên dưới rồi dán vào tiện ích vừa chọn ,
<!-- BEGIN ARROW -->
<div class="ttw-share-arrow"></div>
<!-- END ARROW -->

 <!-- BEGIN ACTIVATION BUTTON -->
<div class="ttw-share-activate-button ">
<div class="share-desc">SHARE</div> <i class="fa fa-plus-circle"></i>
</div>
<!-- END ACTIVATION BUTTON -->

 <!-- BEGIN BUTTONS WRAPPER -->
<ul class="social-share-wrapper">

 <!-- BEGIN TWITTER BUTTON -->
<li>
<a class="ttw-twitter-button" target="_blank" href="https://twitter.com/manhhaiblog">
<i class="fa fa-twitter"></i>
</a>
</li>
<!-- END TWITTER BUTTON -->

 <!-- BEGIN FACEBOOK BUTTON -->
<li>
<a class="ttw-facebook-button" target="_blank" href="https://www.facebook.com/manh.hai.blog">
<i class="fa fa-facebook"></i>
</a>
</li>
<!-- END FACEBOOK BUTTON -->

 <!-- BEGIN GOOGLEPLUS BUTTON -->
<li>
<a class="ttw-googleplus-button" target="_blank" href="https://plus.google.com/u/0/106718035150623924324/posts">
<i class="fa fa-google-plus"></i>
</a>
</li>
<!-- END GOOGLEPLUS BUTTON -->

 <!-- BEGIN TUMBLR BUTTON -->
<li>
<a class="ttw-tumblr-button" target="_blank" href="https://manhhaiblog.blogspot.com/feeds/posts/default">
<i class="fa fa-tumblr"></i>
</a>
</li>
<!-- END TUMBLR BUTTON -->

 <!-- BEGIN EMAIL BUTTON -->
<li>
<a class="ttw-email-button" href=" vattuhanghai@gmail.com">
<i class="fa fa-envelope"></i>
</a>
</li>
<!-- END EMAIL BUTTON -->

</ul>
<!-- END BUTTONS WRAPPER -->

Social Share Cuộn Trượt Dọc Ở Gọc Phải Web/Blog Sử Dụng CSS3 & JQuery

8 Một số lưu ý và thay đổi sau:
Thay Địa chỉ của bạn vào nhé.
  manhhaiblog

Xóa id này đi 106718035150623924324 
thay id của bạn vào.
xóa  linh này https://manhhaiblog.blogspot.com 
thay link blog của bạn vào nữa nhé.
9 lưu lại quay về trang chủ để thưởng thức nhé ,chúc các bạn thành công với thủ thuật hay và hữu ích cho bạn nào thích nhé..

Nếu có vấn đề thắc mắc hay chưa hiểu hãy comment bên dưới mình sẽ hồi đáp sơm nhất nhé.
Nhãn:

Chia sẻ lên:

Đăng nhận xét Blogger Disqus

Đăng ký: Đăng Nhận xét (Atom)
 
Top