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)}}
