Tạo hộp chia sẻ mạng xã hội cho Blog

Lê An    10/26/2013    Thủ thuật blog    Comments   

Đâ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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh31Ti3-RN-Ld93IMOKPl5KdAJ3C1H1J1c4jvo0GqbJYElytswgO0_pnmVSgif4x6rwdu0gdUkZ-lunxzkiVlpj8J6R-GWDXl7pIrS1QT3W4KWUP1qGVNwYQejEgM87aDmtCRENhU-NerA/s1600/bloggertrix+-.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

DEMO