Kênh Tên Miền chuyên cung cấp tên miền đẹp, giá rẻ! Hãy liên hệ kỹ thuật: 0914205579 - Kinh doanh: 0912191357 để được tư vấn, hướng dẫn miễn phí, Cảm ơn quý khách đã ủng hộ trong thời gian qua!
kiem tien, kiem tien online, kiem tien truc tuyen, kiem tien tren mang
Tuesday, April 26, 2016


Đây là một CSS đẹp với hiệu ứng di chuột vào các ứng dụng xã hội. Bạn có thể thay đổi  thêm hay bớt tùy theo nhu cầu sử dụng các mạng xã hội của bạn. Nhằm liên kết trang web của bạn đến người dùng một cách tiện lợi nhất.
Hướng dẫn:
Bạn đăng nhập vào Blogspot 
Chọn Mẫu -> Chỉnh sửa HTML ( như hình)

Ảnh hướng dẫn
CSS
Tìm thẻ ]]> </ b: skin> bằng cách sử dụng tổ hợp phím Ctrl + F
Coppy toàn bộ code phía dưới và dán ngay trên thẻ ]]> </ b: skin>
.bt-wrapper{
 padding: 0;
 width: 535px;
 height: 70px;
 margin: 80px auto 30px auto;
}
.bt-wrapper ul{
 float: left;
margin-left: -45px;
}
.bt-wrapper ul a{
 display: block;
 width: 68px;
 height: 110px;
 margin:  -10 -24 px;
 outline: none;
 background: transparent url(http://1.bp.blogspot.com/-d7whKSAmyHY/UG0J8CDV-cI/AAAAAAAAEoA/Bcl9B6t2T74/s1600/bloggertrix%2B-.png) no-repeat top left;
 text-indent: -9000px;
 position: relative;
}
.bt-wrapper ul .bt-gplus{
    background-position: 0px 0px;
}
.bt-wrapper ul .bt-twitter{
    background-position: -68px 0px;
}
.bt-wrapper ul .bt-pinterest{
    background-position: -136px 0px;
}
.bt-wrapper ul .bt-facebook{
    background-position: -204px 0px;
}
.bt-wrapper ul .bt-linkedin{
    background-position: -272px 0px;
}
.bt-wrapper ul .bt-rss{
    background-position: -340px 0px;
}
.bt-wrapper ul a span{
margin-bottom: 50px;
 width: 100px;
 height: auto;
 line-height: 20px;
 padding: 10px;
 left: 50%;
 margin-left: -64px;
 font-family: Shanti, Arial, Helvetica, sans-serif;
 font-weight: 400;
 font-size: 14px;
 color: #2f6986;
 text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
 text-align: center;
 border: 4px solid #2f6986;
 background: rgba(255,255,255,0.3);
 text-indent: 0px;
 border-radius: 5px;
 position: absolute;
 pointer-events: none;
 bottom: 100px;
 opacity: 0;
 box-shadow: 1px 1px 2px rgba(0,0,0,0.1);
 -webkit-transition: all 0.3s ease-in-out;
 -moz-transition: all 0.3s ease-in-out;
 -o-transition: all 0.3s ease-in-out;
 -ms-transition: all 0.3s ease-in-out;
 transition: all 0.3s ease-in-out;
}
.bt-wrapper ul a span:before,
.bt-wrapper ul a span:after{
margin-top:20px;
 content: '';
 position: absolute;
 bottom: -15px;
 left: 50%;
 margin-left: -9px;
 width: 0;
 height: 0;
 border-left: 10px solid transparent;
 border-right: 10px solid transparent;
 border-top: 10px solid rgba(0,0,0,0.1);
}
.bt-wrapper ul a span:after{
 bottom: -14px;
 margin-left: -10px;
 border-top: 10px solid #2f6986;
}
.bt-wrapper ul a:hover span{
 opacity: 0.9;
 bottom: 70px;
}
Bạn Lưu lại.
HTML
Bạn chọn đến phần Bố Cục -> chọn Thêm Tiện Ích -> HTML/Javascript
Hình 1
Hình 2
Vào dán toàn bộ code phía dưới vào và Lưu lại
(Lưu ý: bạn muốn hiển thị hộp chia sẻ ở đâu thì chọn Thêm Tiện Ích ở ngay mục đó nha )
<div class="bt-wrapper">
<ul><a class="bt-gplus " href="https://plus.google.com/107955298793879607964"><span>Google Plus</span></a></ul>
<ul><a class="bt-twitter" href="http://twitthis.com/twit?url=http://www.tynisoft.com"><span>Twitter</span></a></ul>
<ul><a class="bt-pinterest" href="http://pinterest.com/tynisoft/"><span>Pinterest</span></a></ul>
<ul><a class="bt-facebook" href="http://www.facebook.com/sharer.php?u=http://www.tynisoft.com"><span>Facebook</span></a></ul>
<ul><a class="bt-linkedin" href="Linkedin-URL"><span>LinkedIn</span></a></ul>
<ul><a class="bt-rss" href="http://feeds.feedburner.com/tynisoft"><span>Feeds</span></a></ul>
</div>
Tùy chỉnh:
107955298793879607964: Tương ứng với số ID trên G+ của bạn
Màu xanh: Bạn thay bằng tên các trang xã hội của bạn

Nguồn tynisoft.com

0 comments:

Post a Comment

Popular Posts