Lượt xem: lần
Tạo hộp chia sẻ mạng xã hội cho Blog
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>
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 )
Màu xanh: Bạn thay bằng tên các trang xã hội của bạn
Nguồn tynisoft.com
.bt-wrapper{Bạn Lưu lại.
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/AVvXsEhXO3hQDl2jbsJtOX7AiANRwSPQGPupTaj-mVAujD5QP3nNzXWPGV-NhaQzmV6XLKmWx80IViawC0YpQsnYMI2nGir9j16aYsWy2GdEmO4K80luIndmhXiBrAVdh_1-ER1TAhkFWiluZBY/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;
}
HTML
Bạn chọn đến phần Bố Cục -> chọn Thêm Tiện Ích -> HTML/JavascriptHình 1 |
Hình 2 |
(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ạnMàu xanh: Bạn thay bằng tên các trang xã hội của bạn
Nguồn tynisoft.com
Tạo hộp chia sẻ mạng xã hội cho Blog
Reviewed by Unknown
on
16:23
Rating:
Kết quả sao nhĩ?
Trả lờiXóaCòn cái nầy nữa?
Xóa