Chào các bạn, cũng đã lâu rồi mình chưa viết bài gì cho blog nên hôm nay mình sẽ viết bài chia sẻ đến cho các bạn mẫu social cực chất cho blogspot
Phía bên dưới là Demo và Tutorial
HƯỚNG DẪN CÁCH LÀM:
Để thêm social các bạn đăng nhập vào blogger và thêm đoạn code bên dưới vào chỗ bạn muốn nó hiển thị (thường là dưới sidebar hoặc trên footer, tùy bạn)<!-- Social bottom -->Chúc bạn thành công!
<style>
.social-tom{float:right;height:44px}
.social-tom ul{margin:0}
.social-tom li{float:left;margin-left:10px;display:inline;padding:0}
.social-tom #social a{display:block;height:30px;width:30px;line-height:30px;font-size:14px;margin-top:7px;color:#fff;text-align:center;transition:.5s;border-radius:20px}
.social-tom #social a:before{display:inline-block;font-family:FontAwesome;font-style:normal;font-weight:400;line-height:27px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.social-tom .facebook:before{content:"\f09a"}
.social-tom #social a.facebook{background:#5d82d2}
.social-tom .twitter:before{content:"\f099"}
.social-tom #social a.twitter{background:#3bbef5}
.social-tom .google-plus:before{content:"\f1a0"}
.social-tom #social a.google-plus{background:#ea5d4b}
.social-tom .link:before{content:"\f0c1"}
.social-tom #social a.link{background:#686868}
.social-tom ul#social a{color:#fff;opacity:1;border-radius:100%}
</style>
<div class='social-tom'>
<ul id='social'>
<li><a class='facebook' href='https://www.facebook.com/TomSystemIT' target='_blank'/></li>
<li><a class='twitter' href='https://twitter.com/TThanhBinhTOM' target='_blank'/></li>
<li><a class='google-plus' href='https://plus.google.com/115364388908254010006' target='_blank'/></li>
<li><a class='link' href='https://www.facebook.com/messages/t/100010597577095' target='_blank'/></li>
</ul>
</div>