Thêm hộp social cực chất cho blogspot

Duc Tran

tháng 1 29, 2018

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 -->
<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>

Chúc bạn thành công!