Thêm tiện ích liên hệ nằm cố định bên phải blog
Mẫu tiện ích liên hệ cho blogspot nằm cố định bên phải blog, các icon sử dụng font-awesome. Phù hợp áp dụng cho các trang blogspot bán hàng, blogspot bất động sản.
Copy toàn bộ code bên dưới dán trước thẻ đóng </body> và lưu lại là xong.
Tiện ích liên hệ nằm bên phải <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/>
Tiện ích liên hệ nằm bên trái<style>
@media (max-width:767px){.hidden-xs{display:none!important}}
.hot-linkly{position:fixed;right:0;top:150px;z-index:99}
.hot-linkly .bic-load{align-items:center;background:transparent url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLhgNsV-nQO4rGJ2SY_WE-XXOm_1DLMXZ0dA3QpO6D0xPlj7r0sVgSBbilL6DBo7f3OgkiLUUuJ0GMZsuRb3424QoAO5kfuTtkW3Zw19H6Jl61QXZ4v14wjhSPPB7PjUwpKYwfFXhyphenhyphenOTUh/s1600/toolbar.png") no-repeat scroll 0 0/100% 100%;display:flex;flex-direction:column;padding:61px 0;width:52px}
.hot-linkly .bic-load .bic-load-tem{margin-bottom:10px;width:40px;height:40px}
.hot-linkly .bic-load .bic-load-tem .loptop{background:#fff none repeat scroll 0 0;border-radius:20px;display:block;height:40px;font-size:14px;text-align:center;width:40px;background-repeat:no-repeat;background-position:center;transition:width 300ms ease-in 0ms;cursor:pointer;position:absolute;right:6px;font-weight:bold;text-decoration:none;color:#82bb4e}
.hot-linkly .bic-load .bic-load-tem .loptop.hotline:before{content:"\f2a0";font-family:"FontAwesome";font-size:23px;position:absolute;left:12px;top:7px;font-weight:400}
.hot-linkly .bic-load .bic-load-tem .loptop.facebook:before{content:"\f09a";font-family:"FontAwesome";font-size:23px;position:absolute;left:13px;top:9px;font-weight:400}
.hot-linkly .bic-load .bic-load-tem .loptop.fanpage:before{content:"\f0e6";font-family:"FontAwesome";font-size:23px;position:absolute;left:8px;top:7px;font-weight:400}
.hot-linkly .bic-load .bic-load-tem .loptop.youtube:before{content:"\f167";font-family:"FontAwesome";font-size:23px;position:absolute;left:10px;top:7px;font-weight:400}
.hot-linkly .bic-load .bic-load-tem .loptop span{visibility:hidden;transition:steps(1,start) 300ms ease-in 0ms}
.hot-linkly .bic-load .bic-load-tem .loptop:hover{width:auto;display:flex;align-items:center;white-space:nowrap;background-position:left 15px center;padding-left:55px;box-shadow:0 0 2px;padding-right:30px}
.hot-linkly .bic-load .bic-load-tem .loptop:hover span{visibility:visible}
</style>
<div class="hot-linkly hidden-xs">
<div class="bic-load">
<div class="bic-load-tem">
<a class="loptop hotline" href="tel:123456789">
<span>Hotline
</span>
</a>
</div>
<div class="bic-load-tem">
<a target="_blank" class="loptop facebook" href="/">
<span>Facebook
</span>
</a>
</div>
<div class="bic-load-tem">
<a target="_blank" class="loptop fanpage" href="/">
<span>Fanpage
</span>
</a>
</div>
<div class="bic-load-tem">
<a target="_blank" class="loptop youtube" href="/">
<span>Kênh Youtube
</span>
</a>
</div>
</div>
<span class="show_hide">
</span>
</div>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<style>
@media (max-width:767px){.hidden-xs{display:none!important}}
.hot-linkly{position:fixed;left:0;top:150px;z-index:99}
.hot-linkly .bic-load{align-items:center;background:transparent url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYV-JJJkfFf1T8K2AuP_5gj1jwkkWFZ2lfHEn0uPFK030vvMtxGqug-ZR2KgSxpkDpSXDRfhem9MskWq55Yqy1YLELLSMsjwBLumdr_NDxnafF_gEYgynVqGGKDlzuZMNHsqNzbB0Ulaus/s1600/toolbar.png") no-repeat scroll 0 0/100% 100%;display:flex;flex-direction:column;padding:61px 0;width:52px}
.hot-linkly .bic-load .bic-load-tem{margin-bottom:10px;width:40px;height:40px}
.hot-linkly .bic-load .bic-load-tem .loptop{background:#fff none repeat scroll 0 0;border-radius:20px;display:block;height:40px;font-size:14px;text-align:center;width:40px;background-repeat:no-repeat;background-position:center;transition:width 300ms ease-in 0ms;cursor:pointer;position:absolute;left:6px;font-weight:bold;text-decoration:none;color:#82bb4e}
.hot-linkly .bic-load .bic-load-tem .loptop.hotline:before{content:"\f2a0";font-family:"FontAwesome";font-size:23px;position:absolute;left:12px;top:7px;font-weight:400}
.hot-linkly .bic-load .bic-load-tem .loptop.facebook:before{content:"\f09a";font-family:"FontAwesome";font-size:23px;position:absolute;left:13px;top:9px;font-weight:400}
.hot-linkly .bic-load .bic-load-tem .loptop.fanpage:before{content:"\f0e6";font-family:"FontAwesome";font-size:23px;position:absolute;left:9px;top:7px;font-weight:400}
.hot-linkly .bic-load .bic-load-tem .loptop.youtube:before{content:"\f167";font-family:"FontAwesome";font-size:23px;position:absolute;left:11px;top:7px;font-weight:400}
.hot-linkly .bic-load .bic-load-tem .loptop span{visibility:hidden;transition:steps(1,start) 300ms ease-in 0ms}
.hot-linkly .bic-load .bic-load-tem .loptop:hover{width:auto;display:flex;align-items:center;white-space:nowrap;background-position:left 15px center;padding-left:55px;box-shadow:0 0 2px;padding-right:30px}
.hot-linkly .bic-load .bic-load-tem .loptop:hover span{visibility:visible}
</style>
<div class="hot-linkly hidden-xs">
<div class="bic-load">
<div class="bic-load-tem">
<a class="loptop hotline" href="tel:123456789">
<span>Hotline
</span>
</a>
</div>
<div class="bic-load-tem">
<a target="_blank" class="loptop facebook" href="/">
<span>Facebook
</span>
</a>
</div>
<div class="bic-load-tem">
<a target="_blank" class="loptop fanpage" href="/">
<span>Fanpage
</span>
</a>
</div>
<div class="bic-load-tem">
<a target="_blank" class="loptop youtube" href="/">
<span>Kênh Youtube
</span>
</a>
</div>
</div>
<span class="show_hide">
</span>
</div>