Thêm Social Button hiển thị bên trái cho Blogspot

Ngày nay với sự phát triển như vũ bão của Các mạng truyền thông xã hội thì cầu nối giữa website và người dùng ắt hẳn là rất quan trọng. Nó còn là thước đo để đánh giá nguồn truy cập của website của bạn chẳng hạn như lượt share, like, +1. 

Chính vì vậy hôm nay mình xin hướng dẫn các bạn "Thêm Social Button Hiển Thị Bên Trái Cho Blogger". Hy vọng nó mang lại nhiều hữu ích cho blog hay website của bạn. Social này không sử dụng javascript, nó chỉ đơn thuần là HTML và CSS, nên các bạn yên tâm nó không làm trở ngại tốc độ load trang web của bạn.

Hình Minh Họa:

Sau đây là các bước thực hiện:

1. Đăng nhập vào tài khoản Blogger
2. Vào phần Mẫu (Template)
3. Chọn chỉnh sửa HTML (Edit HTML)
4. Chèn code bên dưới vào trước thẻ ]]></b:skin>

ul.social-FlipButtons {
  position: fixed;
  padding: 0 0 3px 0;
  bottom: 30%;
  margin-left: 0px;
  float: left;
  list-style: none;
  -webkit-perspective: 10000px;
 /* larger the value, the less pronounced the 3D effect */
  -moz-perspective: 10000px;
  perspective: 10000px;
}

ul.social-FlipButtons li {
  margin: 5px 0;
  display: block;
  width: 25px;
  height: 25px;
  margin-bottom: 42px;
  background: transparent;
  text-transform: uppercase;
  text-align: center;
}

ul.social-FlipButtons li a {
  display: table;
  width: 100%;
  height: 100%;
  color: black;
  background: transparent;
  text-decoration: none;
  outline: none;
  -webkit-transition: all 300ms ease-out;
 /* CSS3 transition. */
  -moz-transition: all 300ms ease-out;
  transition: all 300ms ease-out;
}

ul.social-FlipButtons li a span {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  display: table-cell;
  vertical-align: middle;
  width: 100%;
  height: 100%;
  -webkit-transition: all 300ms ease-out;
 /* CSS3 transition. */
  -moz-transition: all 300ms ease-out;
  transition: all 300ms ease-out;
}

ul.social-FlipButtons li a img {
 /* CSS for image if defined inside button */
  border-width: 0;
  vertical-align: middle;
}

ul.social-FlipButtons li:hover a {
  -webkit-transform: rotateY(180deg);
 /* flip horizontally 180deg*/
  -moz-transform: rotateY(180deg);
  transform: rotateY(180deg);
  background: transparent;
 /* bgcolor of button onMouseover*/
  -webkit-transition-delay: 0.2s;
  -moz-transition-delay: 0.2s;
  transition-delay: 0.2s;
}

ul.social-FlipButtons li:hover a span {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
 /* flip horizontally 180deg*/
  transform: rotateY(180deg);
  -webkit-transition-delay: 0.2s;
  -moz-transition-delay: 0.2s;
  transition-delay: 0.2s;
}

5. Chèn code sau trước thẻ đóng </body>

<ul class='social-FlipButtons second'> 
<li>
<a href='https://www.facebook.com/#yourName' target='_blank'>
<span><img src='http://1.bp.blogspot.com/-QNjU7EuYWSY/U3zimEKVtFI/AAAAAAAAERM/LVXokaVW_Eg/s1600/facebook.png'/></span>
</a>
</li> 

<li>
<a href='http://twitter.com/#yourName' target='_blank'>
<span><img src='http://3.bp.blogspot.com/-8Vffl9w_qBA/U3zioQ0tjHI/AAAAAAAAERo/rmE_WFsLssM/s1600/twitter.png'/></span>
</a>
</li> 

<li>
<a href='https://plus.google.com/#yourName' target='_blank'>
<span><img src='http://4.bp.blogspot.com/-ZMIdv_IxQlw/U3zimfqx9GI/AAAAAAAAERQ/xzB1yFyp0jE/s1600/googleplus.png'/></span>
</a>
</li> 

<li>
<a href='http://feeds.feedburner.com/#yourName' target='_blank'>
<span><img src='http://4.bp.blogspot.com/-ZVuhm2wRtnY/U3zioPrWl4I/AAAAAAAAERk/1njD2YSEzA8/s1600/rss.png'/></span>
</a>
</li> 
</ul>

- Các bạn thay #yourName thành username hoặc ID của bạn nhé.

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