Hướng dẫn thêm Social Button bên trái cho Blogger [ Blogspot]

BloggerGuide

Monday, November 16, 2015

0 comments

Thêm Social Button bên trái cho Blogger [ Blogspot] mang lại nhiều hữu ích cho Blog của bạn. Thủ thuật 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.

1. Đăng nhập vào tài khoản Blogger Mẫu (Template) > Chỉnh sửa HTML (Edit HTML)
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;
}

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

<ul class="social-FlipButtons second">
<li>
<a href="https://www.facebook.com/#yourName" target="_blank">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiI5r-cH-XZRb4AjJv5ZBnUx5N7K5ejIoHhOVOC3RXwMscB0l5oMrhBOQxADeOqwNsmGI1U_VMq_zKUUp8poH7822kRBcrheQvLZ6OkTKgoRyu-KjPIFThyIE2vo4JrJAQNbLdRmZwhri5/s1600/facebook.png" />
</a>
</li>
<li>
<a href="http://twitter.com/#yourName" target="_blank">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2oKwyiSj8C7oAzggCu9SeosRulrHqAgsqTXoVu6qBkuC0q1o4_RNoWaZdRZNwpqn2xFG58Hz-H7wgmi2bbFMbrtvZ9iE01G7RA7jERX_EsAw9T3cnBVD9l-cRhyU_imT1I6BIc4JuHc92/s1600/twitter.png" />
</a>
</li>
<li>
<a href="https://plus.google.com/#yourName" target="_blank">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_r9PzJMeC8TBpixXcswzlL7-qBN3-rJJghoU9cktqyle8Msxt3feLR2QIBV6IR6PZDB_pY6omFuYa8fT_FGBM4GoAobrGXx-cggjszq0c13yau7wb6VlPCLNhJj6W3gguzqH6RY0lQzpD/s1600/googleplus.png" />
</a>
</li>
<li>
<a href="http://feeds.feedburner.com/#yourName" target="_blank">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnjUqBo1XF3NBmEqlMgmoO4iv7v5IlTW4AnSMIJSYwWyyrZwHjaKl-T3EliOtoUMCk5pKoqClLs25jlnvZUUPVi2and5yeMmvNwxV2qoxKKHMcx4NqCJAfz-bQlxB2G1dIsEkW_9VCmPWf/s1600/rss.png" />
</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!

Tag : Blog Design, Blog Tips