[Blogger] Tạo social button với hiệu ứng xoay tròn trên header

Bài viết này mình sẽ hướng dẫn các bạn tạo button mạng xã hội với hiệu ứng xoay tròn hiển thị bên góc phải của header. Sau đây là các bước thực hiện:

Bước 1: Tại trang quản trị blog, các bạn vào Mẫu -> Chỉnh sửa HTML, chèn đoạn code sau vào trước thẻ ]]></b:skin>:

/* Round Style Social Button by kjmagic.blogspot.com */
#dtsocial-icons {
margin-bottom:-30px;
height:50px;
width:100%;
display:block;
clear:both;
z-index: 2;
position: relative;
}
.dtsocial-media-icons {
display:table
}
.dtsocial-media-icons ul {
text-align:right;
padding:5px 5px 0 0
list-style-image:none;
list-style-position:outside;
list-style-type:none;
}
.dtsocial-media-icons ul {
margin-bottom:0;
padding:0;
float:right;
}
.dtsocial-media-icons li.media_icon {
margin-left:6px;
padding-left:0 !important;
background:none !important;
display:inline;
float:left;
}
.dtsocial-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;
}

Bước 2: Tìm trong template đoạn code sau:

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

Chèn đoạn code sau vào trước nó:

<!--Round Style Social Button by kjmagic.blogspot.com-->
<div class='dtsocial-media-icons' id='dtsocial-icons'>
<ul>

<li class='media_icon'><a href='http://facebook.com/kj.magician'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwlJLwwY6HVZATjJv0wGKP2Wl1oJPa_rrPfBljcXDnizQLCXbQUmOpMJ2Fhs5A9D_V_gGj9o2NEOhgBAmSKp-3wjsP59FTWl3vLLhB-zwJOZhpJx2xoZxIvIErAD-rBo6RlKMvq-a6ew/s1600/Facebook.png'/></a></li>

<li class='media_icon'><a href='http://twitter.com/quocdoantrinh'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhP7pqcuqTmolIqgrt0FEvRCeRi68XJy9Iyho_4L76hISpjvb838lHvVnJRLB82vjPcEZ736ixY31bJdLp-qHkE73HAtTbfEFfubWs5bEAbXhHEJoHjGY1TU8VCrQDrvkVcxnZ-Ooswqg/s1600/Twitter.png'/></a></li>

<li class='media_icon'><a href='https://plus.google.com/Your-GPlus-ID'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhf7eQIOZ2YLjM5buDRZsR9rDo5_PQQfKPUvVj5PVMxJ7xwej7cqmrhbyjDCW4iGjROKwSjHXph2HrOAUI9X_haRkiWk5qBMTKfd_bCB0er7XqlyusfFwIRtoVEv5SaHGbIF2v-xgvQmA/s1600/googleplus.png'/></a></li>

<li class='media_icon'><a href='http://www.đoàntrịnh.vn/feeds/posts/default'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0aecq-FKDUOq-UWbUmUSP0BEG5jlj5tTJDTdvqh3nIaX44kL9_S1zpn3SL_U2tCd1AnuelAmnKuSFvHPEblNNoUy64wtfflV2COlKQdh4hRGaEBpFg-fEPSumL-VVFRDIe41pMacjVg/s1600/RSS.png'/></a></li>

</ul></div>
<!--/Round Style Social Button by kjmagic.blogspot.com-->

Bây giờ chỉ cần thay thế những chỗ mình đánh dấu thành thông tin của bạn.

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