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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3cyKjG0LpqZr2TjJ3W3xtWBdv_X7npU4tzb58lt806oemcg064g2FiUlgKaUxQwt75aIBfJsdyoYhSTcrKprMZDPnTf-Q6Up42M-C6cfmkbM5z9aG552jsaYo6k5Re0ieyY8KW42iA4o/s1600/icon-menu-right1.png" /> </a>
<a href="https://zalo.me/1234567890" title="Zalo"> <img alt="icon" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiz-pVG12x0Mq1t3LvdNClKBqdMzBW-UtWo01ukUQqCNY-3-jVfdbO2GpZ6GJea6V2wBQWZ-4frPar2AyNCnF4NYqV8w14Cdp9Op69TxVUVIaC0U_Nw99yRSIY65x3RQmuPL0_i0V8_fUA/s1600/icon-menu-right2.png" /> </a>
<a class="phone" href="tel:032122122" title="0358888666"> <img alt="icon" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7nvPqeExoYNthQXq-6qRnlVTxWjQ5EM4z5xspAqlLH-uGgDAoiRZj-u5cSpsU3KY70lDG394_mzsAWxRkhuUpP9xzUAPaC22lJrwn_ZzZE60fXLWc5E6L5KCE0bPKnGGb8tH6LJGgmo8/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)}}
4.5/5 - (1 bình chọn)

0 Nhận xét