Banner

Tiện ích liên hệ chạy dọc bên phải Blogspot

Thêm tiện ích liên hệ chạy dọc bên phải cho Blogger rất thuận tiện cho việc liên hệ công việc.


Tiện ích liên hệ chạy dọc bên phải cho Blogger rất thuận tiện cho việc liên hệ công việc. Tiện ích bao gồm (gọi thoại, messenger, zalo, map) ở dạng liên kết
Code HTML
<div class="fixed-right">
<a href="https://maps.app.goo.gl/id" target="_blank" title="Facebook"> <img alt="icon" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_yaB6Cp89M24iY7BT3lQqi-ORkRpvOT3QffzioyZXD7QwRCW2Nw0LnPtP4J2f4WQoMJzGU5co2Q3XcJ50mhyphenhyphen0fLIEAWf3Xh3MPgonE_-CN3wxlJNCS2xnGeZgm3Bhl2iWIofIn4YtBxzwCLXAIpZhGHLQrLaVPT6MWSKtSDKFnQCTZMM3oz4Tu2BxxBc/s1600/map.png" /> </a>
<a href="https://facebook.com/facebook" target="_blank" title="Facebook"> <img alt="icon" src="https://1.bp.blogspot.com/-Zcp-Bb4BheQ/XqD62cmcAxI/AAAAAAAAIs0/4kqUWcjXIZQIcky6BtKGGmjuwVzcAjstQCLcBGAsYHQ/s1600/icon-menu-right1.png" /> </a>
<a href="https://zalo.me/1234567890" title="Zalo"> <img alt="icon" src="https://1.bp.blogspot.com/-dbDziPVZ6FM/XqD6-L5R6LI/AAAAAAAAIs8/zAruLZY1XmY8VBc4Q80_WtrkU5aix_NSgCLcBGAsYHQ/s1600/icon-menu-right2.png" /> </a>
<a class="phone" href="tel:032122122" title="0358888666"> <img alt="icon" src="https://1.bp.blogspot.com/-n_xallSAwIA/XqD7C611tlI/AAAAAAAAItA/zIlgBND8WAI2KqbIP3wd1cTgyqP3sfuAgCLcBGAsYHQ/s1600/icon-menu-right3.png" /> </a>
</div>
CSS
.fixed-right{position:fixed;z-index:9999;right:5px;transform:translateY(-50%);top:calc(50% + 10px)!important;width:60px;text-align:center;overflow:hidden}
.fixed-right a{margin-bottom:10px;width:40px;height:40px;display:inline-block}
.fixed-right a.phone{border-radius:50%;background:#64bc46;padding:6px;animation:quick-alo-circle-img-anim 1s infinite ease-in-out}
@-moz-keyframes quick-alo-circle-img-anim{0%{transform:rotate(0) scale(1) skew(1deg)}10%{-moz-transform:rotate(-25deg) scale(1) skew(1deg)}20%{-moz-transform:rotate(25deg) scale(1) skew(1deg)}30%{-moz-transform:rotate(-25deg) scale(1) skew(1deg)}40%{-moz-transform:rotate(25deg) scale(1) skew(1deg)}50%{-moz-transform:rotate(0) scale(1) skew(1deg)}100%{-moz-transform:rotate(0) scale(1) skew(1deg)}}@-webkit-keyframes quick-alo-circle-img-anim{0%{-webkit-transform:rotate(0) scale(1) skew(1deg)}10%{-webkit-transform:rotate(-25deg) scale(1) skew(1deg)}20%{-webkit-transform:rotate(25deg) scale(1) skew(1deg)}30%{-webkit-transform:rotate(-25deg) scale(1) skew(1deg)}40%{-webkit-transform:rotate(25deg) scale(1) skew(1deg)}50%{-webkit-transform:rotate(0) scale(1) skew(1deg)}100%{-webkit-transform:rotate(0) scale(1) skew(1deg)}}@-o-keyframes quick-alo-circle-img-anim{0%{-o-transform:rotate(0) scale(1) skew(1deg)}10%{-o-transform:rotate(-25deg) scale(1) skew(1deg)}20%{-o-transform:rotate(25deg) scale(1) skew(1deg)}30%{-o-transform:rotate(-25deg) scale(1) skew(1deg)}40%{-o-transform:rotate(25deg) scale(1) skew(1deg)}50%{-o-transform:rotate(0) scale(1) skew(1deg)}100%{-o-transform:rotate(0) scale(1) skew(1deg)}}

Thêm đánh giá

Trở thành người đầu tiên bình luận cho bài viết này!

Liên hệ Zalo