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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAezhVSBzhBJ95bh_-AYh0fLBAYvZJvGxZS7KFk6-2RMBwHGUa31uFEsB1iva543GCng_rg8IMegtMpd-zbHZBH6vsG5cN8ap1cBIQO_XmVV3MBqH1aDWOaUEO4KOP-ItHtof0blppw1Y/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/AVvXsEj0Y_8cl7mlinAaou8r5zuVyw6Fgc8BG1RMX0Wry5eBTH4e_L4QPLSyiiBD4yfuR5PpPCQcy00mRRcJTRlf3rZy-TdM-oj-B5U8z7eXn4ERLdz-HgmG1UauwTdddNMbCRyJV2UToslwtFo/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/AVvXsEhPN2XnKioy_VS7V6ac7wIjedNzviFrHPuc608iVw8gjqoM-Qy1oEIv4Dt9_q_wZhWIbKW7C78J9GBXjqATmWGIsiRmJLdTIwfvYiLYnj5qZ7V__fsc5UN1yb91SReBa-BpIWOT1DN9YZ8/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/AVvXsEhTDFabLJl91yd_BHve5ucAyEI8Vw9QA94cBPg7BVPOyS1enXF7dIKTvRaQFEvVDZ27gyjYXzP-X9mmPKh5EnnsTJiyc25gPe51EORN1NKWearGH5m58H60r570QJwPjBZo-iA8C1SvTRs/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
Nhận xét
A Nam check fb tin nhắn nhé!
Trả lờiXóaBạn liên hệ với Terocket nha
XóaChỉnh như thế nào để khi click vào social button thì nó mở ra ở tab mới bạn Nam?
Trả lờiXóaThanks bạn Nam! Mình làm được rồi!
Trả lờiXóaNhận xét này đã bị quản trị viên blog xóa.
Trả lờiXóaNhận xét này đã bị quản trị viên blog xóa.
Trả lờiXóa