Trang Chính
»†ổñg Quån «
Bài gửi
Cảm Ơn
Giới tính
Demo :
![[Code] Ứng dụng dọc forum Ben10](https://i.servimg.com/u/f36/17/73/81/22/ben10.png)
Code :
B1 : CHO CODE SAU VÀO FOOTER_END
Code :
B1 : CHO CODE SAU VÀO FOOTER_END
- Code:
<div class="social-buttons button-right hidden-phone hidden-tablet">
<a class="itemsocial" href="https://www.facebook.com/your FB" id="facebook-btn" target="_blank"><span class="social-icon" style="overflow: hidden; width: 43px;"><span class="social-text">Follow via Facebook</span></span></a>
<a class="itemsocial" href="https://twitter.com/your twitter" id="twitter-btn" target="_blank"><span class="social-icon" style="width: 43px;"><span class="social-text">Follow via Twitter</span></span></a>
<a class="itemsocial" href="https://plus.google.com/your G+" id="google-btn" target="_blank"><span class="social-icon" style="width: 43px; overflow: hidden;"><span class="social-text">Follow via Google</span></span></a>
<a class="itemsocial" href="http://pinterest.com/your ID" id="pinterest-btn" target="_blank"><span class="social-icon" style="width: 43px;">
<span class="social-text">Follow via Pinterest</span></span></a>
<a class="itemsocial" href="https://www.youtube.com/user/your ID" id="youtube-btn" target="_blank"><span class="social-icon" style="width: 43px;"><span class="social-text">Follow via Youtube</span></span></a>
<a class="itemsocial" href="http://feeds.feedburner.com/your feed" id="rss-btn" target="_blank"><span class="social-icon" style="overflow: hidden; width: 43px;"><span class="social-text">Follow via RSS</span></span></a>
</div>
- Code:
.social-buttons {
position: fixed;
top: 140px;
width: 45px;
z-index: 999;
}
.button-left {
left: 0;
}
.button-right {
right: 0;
}
.social-buttons #twitter-btn .social-icon,
.social-buttons #facebook-btn .social-icon,
.social-buttons #google-btn .social-icon,
.social-buttons #rss-btn .social-icon,
.social-buttons #pinterest-btn .social-icon,
.social-buttons #youtube-btn .social-icon {
background-color: #33353B;
background-image: url(http://1.bp.blogspot.com/-KOzIiYFlBAk/UUmLwwZSs-I/AAAAAAAAAnA/h6G772N3cpI/s1600/mas-icons.png);
}
.button-left #facebook-btn span {
background-position: right 10px;
}
.button-left #twitter-btn span {
background-position: right -35px;
}
.button-left #google-btn span {
background-position: right -127px;
}
.button-left #rss-btn span {
background-position: right -80px;
}
.button-left #pinterest-btn span {
background-position: 11px -177px;
}
.button-left #youtube-btn span {
background-position: 11px -223px;
}
.button-right #facebook-btn span {
background-position: 12px 10px;
}
.button-right #twitter-btn span {
background-position: 11px -35px;
}
.button-right #google-btn span {
background-position: 10px -127px;
}
.button-right #rss-btn span {
background-position: 11px -80px;
}
.button-right #pinterest-btn span {
background-position: 11px -177px;
}
.button-right #youtube-btn span {
background-position: 11px -223px;
}
.social-buttons #facebook-btn:hover .social-icon {
background-color: #3B5998;
}
.social-buttons #twitter-btn:hover .social-icon {
background-color: #62BDB2;
}
.social-buttons #google-btn:hover .social-icon {
background-color: #DB4A39;
}
.social-buttons #rss-btn:hover .social-icon {
background-color: #FF8B0F;
}
.social-buttons #pinterest-btn:hover .social-icon {
background-color: #D43638;
}
.social-buttons #youtube-btn:hover .social-icon {
background-color: #C4302B;
}
.social-buttons a:hover .social-text {
display: block;
}
.button-left .social-icon {
-moz-transition: background-color 0.4s ease-in 0s;
-webkit-transition: background-color 0.4s ease-in 0s;
background-repeat: no-repeat;
display: block;
float: left;
height: 43px;
margin-bottom: 2px;
width: 43px;
}
.button-left .social-text {
display: none;
float: right;
font-size: 1em;
font-weight: bold;
margin: 11px 40px 11px 0px;
white-space: nowrap;
}
.button-right .social-icon {
-moz-transition: background-color 0.4s ease-in 0s;
-webkit-transition: background-color 0.4s ease-in 0s;
background-repeat: no-repeat;
display: block;
float: right;
height: 43px;
margin-bottom: 2px;
width: 43px;
}
.button-right .social-text {
display: none;
float: left;
font-size: 80%;
font-weight: bold;
margin: 11px 0 11px 40px;
white-space: nowrap;
}
.social-buttons .social-text {
color: #FFFFFF;
}
No Comment.