Tạo button social media trên header cho blog

Trên blog thì các nút social media là khá quan trọng, nó vừa tăng tính thẩm mĩ vừa kết nối blog của bạn với các mạng xã hội. Hôm nay, mình xin giới thiệu mẫu social media với hiệu ứng xoay tròn trên header.

VIEW DEMO

#Thêm css

1. Đăng nhập Blogger > Mẫu > Chỉnh sửa HTML
2. Tìm thẻ ]]></b:skin> và dán code dưới vào trên nó

/* Social icons for Blogger
----------------------------------------------- */

#social-icons {
margin-bottom:-30px;
height:50px;
width:100%;
clear:both;
z-index: 2;
position: relative;
}
.social-media-icons {
display:table
}
.social-media-icons ul {
text-align:right;
padding:5px 5px 0 0
list-style-image:none;
list-style-position:outside;
list-style-type:none;
}
.social-media-icons ul {
margin-bottom:0;
padding:0;
float:right;
}
.social-media-icons li.media_icon {
margin-left:6px;
padding-left:0 !important;
background:none !important;
display:inline;
float:left;
}
.social-media-icons li:hover {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(-360deg);
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}

#Thêm HTML

1. Tìm thẻ <header> và dán code dưới vào dưới nó

<div class='social-media-icons' id='social-icons'>
<ul>

<li class='media_icon'><a href='http://facebook.com/username'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiL1MFukbxYNR0cukSvnyp1ygLOMDMV5kGfSDz9aeY1TuA7Oo_ezXHMkgZ5f5s_Nz-71FSEyNDn8FGKqw8B6bDwijbl-fpai4sY8kaxD65cuD4Smo10pKFfY2Nf_KpjV9j2ADQ-Lhsbcmc/s1600/Facebook.png'/></a></li>

<li class='media_icon'><a href='http://twitter.com/username'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHZDok452C9Dtv8DEK6Kge3zo8hFEj34Cj7-Bi3QdkOn8IKg313jIXXCX7sBybsY2Z8w9IKKCb0OhlPR-AKToXaV3peSlLhagU2qGyzzVcNu-R1dTZTCymEHAp9sNDMzQFUjxw-C6M0ZY/s1600/Twitter.png'/></a></li>

<li class='media_icon'><a href='https://plus.google.com/XXXXXXXXXXXXXXXXXx/about'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvGRrSDBUJmFRTA5Yp5X4ICBZlYH6OopZSiK4JbIIvxNctD6i_lVjWU2tU3c5rhxfwNGXPuDwCPjOr3HfcaNxcUWWG4mwOeZqsvLR_nXOuUsdvaxrjfv75d1IfUiQobi7Tswd24h3nUjU/s1600/googleplus.png'/></a></li>

<li class='media_icon'><a href='http://khanh98.blogspot.com/feeds/posts/default'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeBU2_rwlYZL65y0kDBBXtNE1uDChu3MlkAZcqElEHqyMJvzgYOgoJC4SUybK4LDO7jG-A2NasTwF2F9GVI0OCyZj2R4t-3Kk-YFBIeKkIrOmSYkZbH-J0bMTI0icdXDpkzFhMFGEMbqQ/s1600/RSS.png'/></a></li>
<!-- code -->
</ul></div>

2. Nếu bạn muốn thêm một button khác thì dùng code sau chèn vào dưới thẻ <!-- code -->  

 <li class='media_icon'><a href='Link URL'><img border='0' src='Image URL'/></a></li>

Chúc thành công!!!

Nguồn helplogger.blogspot.com/