Thư viện

Trải nghiệm

Chủ Nhật, tháng 4 27, 2014

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

Tạo social button của các mạng xã hội với hiệu ứng xoay tròn trên header hoặc sidebar.

Chia sẻ:

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 www.đoàntrịnh.vn */
#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 www.đoàntrịnh.vn-->
<div class='dtsocial-media-icons' id='dtsocial-icons'>
<ul>

<li class='media_icon'><a href='http://facebook.com/kj.magician'><img border='0' src='http://2.bp.blogspot.com/-hJlnVDP-uXk/UaKErpYECEI/AAAAAAAADhA/DA59rR8trrA/s1600/Facebook.png'/></a></li>

<li class='media_icon'><a href='http://twitter.com/quocdoantrinh'><img border='0' src='http://3.bp.blogspot.com/-x7YZ7aKIxM8/UaKErq0FZlI/AAAAAAAADhE/3zNd_IFPT8g/s1600/Twitter.png'/></a></li>

<li class='media_icon'><a href='https://plus.google.com/Your-GPlus-ID'><img border='0' src='http://1.bp.blogspot.com/-DNSrkD8pl14/UaKEsW_JdfI/AAAAAAAADhU/S0jGIdQuO4M/s1600/googleplus.png'/></a></li>

<li class='media_icon'><a href='http://www.đoàntrịnh.vn/feeds/posts/default'><img border='0' src='http://2.bp.blogspot.com/-H3nOjhn9wk8/UaKErtM0_mI/AAAAAAAADg8/vJ8tEgRcl5M/s1600/RSS.png'/></a></li>

</ul></div>
<!--/Round Style Social Button by www.đoàntrịnh.vn-->

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 !

Xem thêm: www.đoàntrịnh.vn

10 nhận xét:

  1. Thanks, we appreciate your articles. Good day! DB Product Review

    Trả lờiXóa
  2. Chỉnh như thế nào để khi click vào social button thì nó mở ra ở tab mới bạn Nam?

    Trả lờiXóa
    Trả lời
    1. mình lấy vd nhé: bạn để ý dòng edit link có dạng <a href="http://kjmagic.blogspot.com/">KJ Magic</a>, vậy bạn chỉ cần sửa thành <a href="http://kjmagic.blogspot.com/" target="_blank">KJ Magic</a> là ok !

      kjmagic.blogspot.com

      Xóa
    2. Thanks bạn Nam! Mình làm được rồi!

      Xóa
    3. mình là cộng tác viên của Namkna's blog và cũng là tác giả bài viết này ! :)

      Xóa
  3. Nhận xét này đã bị quản trị viên blog xóa.

    Trả lờiXóa
  4. Nhận xét này đã bị quản trị viên blog xóa.

    Trả lờiXóa