Ở đây chia có 2 loại:
1. Menu cố định ở cuối màn hình mobile
2. Menu ẩn hiện khi cuộn trang.
Khi cuộn xuống menu tạm thời ẩn đi để cho đỡ mất diện tích màn hình, khi cuộn lên menu lại xuất hiện.
Sau đây là hướng dẫn chèn code HTML và CSS vào blogspot để có thanh menu nằm ngang dưới chân trang mobile gồm các nút gọi điện, nhắn tin SMS, nhắn tin Zalo và chat Facebook Messenger.
Bạn hoàn toàn có thể thay đổi icon svg và text khi có nhu cầu sử dụng vào mục đích khác.
Demo menu cố định.
DEMO
Bước 1:
Dán css vào phần css của blog
.bottom-menu {
max-width:450px;
width:100%;
position:fixed;
bottom:0;
background-color:#FFF;
display:flex;
align-items:center;
justify-content:space-between;
padding-top:5px;
padding-bottom:5px;
}
.bottom-menu a {
display:flex;
flex-direction:column;
align-items:center;
flex:1;
padding:5px;
color:#666;
font-weight:bold;
font-size:12px;
text-decoration:none;
transition:all .3s;
}
.bottom-menu a svg{
margin-bottom:3px;
}
.bottom-menu a.sat {
background-color:#ff3f56;
color:#fff;
border-radius:100%;
width:50px;
height:50px;
display:flex;
align-items:center;
justify-content:center;
position:absolute;
left:50%;
transform:translateX(-50%);
top:-10px;
border:6px solid #fff;
}
.bottom-menu a.sat:hover {
border-color:#ff3f56;
color:#fff;
}
.bottom-menu a:hover {
color:#ff3f56;
}
.bottom-menu a:last-child{
margin-right:0;
}
span.bosluk {
flex:1;
}Bước 2:
Dán code HTML bên dưới vào trước thẻ </body>
<b:if cond='data:blog.isMobileRequest == "true"'>
<div class='bottom-menu'>
<a class='home' href='#'>
<svg class='svg' height='24' viewBox='0 0 24 24' width='24'><path d='M21 13v10h-6v-6h-6v6h-6v-10h-3l12-12 12 12h-3zm-1-5.907v-5.093h-3v2.093l3 3z' fill='#ff3f56'/></svg>
Home
</a>
<a href='#'>
<svg class='svg' clip-rule='evenodd' fill-rule='evenodd' height='24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M12 0c-6.626 0-12 5.372-12 12 0 6.627 5.374 12 12 12 6.627 0 12-5.373 12-12 0-6.628-5.373-12-12-12zm0 5.5c-3.866 0-7 2.902-7 6.481 0 2.04 1.018 3.86 2.609 5.048v2.471l2.383-1.308c.636.176 1.31.271 2.008.271 3.866 0 7-2.902 7-6.482 0-3.579-3.134-6.481-7-6.481zm.696 8.728l-1.783-1.901-3.478 1.901 3.826-4.061 1.826 1.901 3.435-1.901-3.826 4.061z' fill='#3B5998'/></svg>
Messenger
</a>
<span class='bosluk'/>
<a class='sat' href='#'>
<svg class='svg' height='24' viewBox='0 0 24 24' width='24'><path d='M3.59 1.322l2.844-1.322 4.041 7.89-2.725 1.341c-.538 1.259 2.159 6.289 3.297 6.372.09-.058 2.671-1.328 2.671-1.328l4.11 7.932s-2.764 1.354-2.854 1.396c-7.861 3.591-19.101-18.258-11.384-22.281zm1.93 1.274l-1.023.504c-5.294 2.762 4.177 21.185 9.648 18.686l.971-.474-2.271-4.383-1.026.5c-3.163 1.547-8.262-8.219-5.055-9.938l1.007-.497-2.251-4.398zm7.832 7.649l2.917.87c.223-.747.16-1.579-.24-2.317-.399-.739-1.062-1.247-1.808-1.469l-.869 2.916zm1.804-6.059c1.551.462 2.926 1.516 3.756 3.051.831 1.536.96 3.263.498 4.813l-1.795-.535c.325-1.091.233-2.306-.352-3.387-.583-1.081-1.551-1.822-2.643-2.146l.536-1.796zm.95-3.186c2.365.705 4.463 2.312 5.729 4.656 1.269 2.343 1.466 4.978.761 7.344l-1.84-.548c.564-1.895.406-4.006-.608-5.882-1.016-1.877-2.696-3.165-4.591-3.729l.549-1.841z' fill='#fff'/></svg>
Alo
</a>
<a href='#'>
<svg class='wh-messenger-svg-zalo wh-svg-icon svg' height='24' viewBox='0 0 97.4 87.2' width='24' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'>
<path d='M78.4,42c-1.4,0-2.4,0.6-3.2,1.7c-0.7,1-1,2.2-1,3.7c0,1.5,0.3,2.7,1,3.7c0.8,1.2,1.8,1.7,3.2,1.7 c1.4,0,2.5-0.6,3.2-1.7c0.7-1,1-2.2,1-3.7c0-1.4-0.3-2.6-1-3.6C80.8,42.6,79.7,42,78.4,42z' fill='#19BFE5'/>
<path d='M48.8,0C21.9,0,0,19.5,0,43.6c0,11.9,5.4,22.7,14,30.6c2.2,2-5.4,10.5-9,11.3c10.4,2.9,20.7-3.4,23.2-2.4 c6.2,2.6,13.2,4,20.5,4c26.9,0,48.7-19.5,48.7-43.6C97.5,19.5,75.7,0,48.8,0z M27.8,58.2H14.6c-3.1,0-4.6-1.1-4.6-3.3 c0-1,0.6-2.4,1.8-4l11.8-15.6h-8.5c-3.1,0-4.7-1-4.7-3c0-2,1.6-3,4.7-3h11.2c3.8,0,5.7,1.1,5.7,3.2c0,1-0.6,2.3-1.9,4L18.5,52.2 h9.3c3.1,0,4.7,1,4.7,3C32.5,57.2,30.9,58.2,27.8,58.2z M54.9,53.8c0,3.1-1.1,4.7-3.2,4.7c-1.4,0-2.4-0.7-3.1-2.2 c-1.3,1.6-3.1,2.4-5.4,2.4c-2.9,0-5.3-1.2-7.2-3.5c-1.7-2.2-2.5-4.8-2.5-7.8c0-3,0.9-5.6,2.7-7.8c1.9-2.3,4.3-3.5,7.3-3.5 c2.2,0,3.9,0.8,5.1,2.3c0.7-1.4,1.8-2,3.1-2c2.1,0,3.2,1.5,3.2,4.6V53.8z M64.7,53.8c0,3.1-1.1,4.7-3.2,4.7c-2.1,0-3.2-1.6-3.2-4.7 V31.9c0-3.1,1.1-4.7,3.2-4.7c2.1,0,3.2,1.6,3.2,4.7V53.8z M78.4,58.9c-3.2,0-5.9-1.1-7.9-3.3c-2-2.2-3-4.9-3-8.1s1-6,3-8.1 c2-2.2,4.7-3.3,7.9-3.3c3.3,0,5.9,1.1,7.9,3.3c1.9,2.1,2.9,4.9,2.9,8.1s-1,6-2.9,8.1C84.2,57.8,81.6,58.9,78.4,58.9z' fill='#19BFE5'/>
<path d='M44.4,42.2c-1.3,0-2.4,0.5-3.1,1.6c-0.7,1-1,2.1-1,3.5c0,1.4,0.3,2.6,1,3.6c0.8,1.1,1.8,1.7,3.2,1.7 c1.3,0,2.4-0.6,3.1-1.7c0.6-1,1-2.2,1-3.6c0-1.4-0.3-2.5-1-3.5C46.7,42.8,45.7,42.2,44.4,42.2z' fill='#19BFE5'/>
</svg>
Zalo
</a>
<a href='#'>
<svg class='svg' height='24' viewBox='0 0 24 24' width='24'><path d='M12 3c5.514 0 10 3.592 10 8.007 0 4.917-5.144 7.961-9.91 7.961-1.937 0-3.384-.397-4.394-.644-1 .613-1.594 1.037-4.272 1.82.535-1.373.722-2.748.601-4.265-.837-1-2.025-2.4-2.025-4.872 0-4.415 4.486-8.007 10-8.007zm0-2c-6.338 0-12 4.226-12 10.007 0 2.05.739 4.063 2.047 5.625.055 1.83-1.023 4.456-1.993 6.368 2.602-.47 6.301-1.508 7.978-2.536 1.417.345 2.774.503 4.059.503 7.084 0 11.91-4.837 11.91-9.961-.001-5.811-5.702-10.006-12.001-10.006zm-4.449 10.151c.246.277.369.621.369 1.034 0 .529-.208.958-.624 1.289-.416.33-.996.495-1.74.495-.637 0-1.201-.123-1.69-.367l.274-1.083c.494.249.993.375 1.501.375.293 0 .521-.056.686-.167.315-.214.334-.646.023-.892-.149-.117-.404-.236-.769-.357-1.097-.366-1.645-.937-1.645-1.716 0-.503.202-.917.604-1.243.404-.325.943-.488 1.614-.488.586 0 1.096.099 1.535.298l-.299 1.049c-.401-.187-.82-.28-1.254-.28-.267 0-.476.052-.627.153-.299.204-.293.57-.035.787.126.107.428.246.91.416.532.187.92.42 1.167.697zm12.205-.021c-.249-.28-.645-.518-1.181-.706-.475-.168-.776-.307-.899-.41-.243-.205-.249-.545.032-.738.146-.099.352-.148.609-.148.464 0 .87.104 1.274.295l.316-1.111-.022-.012c-.441-.199-.962-.3-1.55-.3-.675 0-1.225.166-1.632.495-.41.33-.618.757-.618 1.267 0 .791.562 1.377 1.67 1.745.357.122.612.239.757.353.292.231.28.637-.022.841-.157.108-.381.162-.667.162-.549 0-1.042-.145-1.522-.39l-.29 1.147c.549.273 1.122.38 1.728.38.749 0 1.34-.168 1.759-.502.422-.334.636-.776.636-1.313 0-.418-.127-.772-.378-1.055zm-6.644-3.005l-1.228 3.967-1.014-3.967h-1.791l-.366 5.75h1.229l.204-4.642h.018s.702 2.878 1.178 4.547h1.031c.794-2.419 1.261-3.936 1.399-4.547h.026c0 .813.045 2.36.136 4.642h1.298l-.309-5.75h-1.811z' fill='#23A215'/></svg>
Nhắn tin
</a>
</div>
</b:if>
2. Menu ẩn hiện khi cuộn trang.
Demo menu ẩn hiện.
DEMO
Bước 1
Dán css vào phần css của blog
.bottom-menu {
max-width:450px;
width:100%;
position:fixed;
bottom:0;
background-color:#FFF;
display:flex;
align-items:center;
justify-content:space-between;
padding-top:5px;
padding-bottom:5px;
-webkit-transition-duration:.5s;transition-duration:.5s;
-webkit-transition-timing-function:cubic-bezier(.215,.61,.355,1);
transition-timing-function:cubic-bezier(0.25, 0.1, 0.25, 1.0);
-webkit-transition-property:-webkit-transform;
transition-property:transform;
}
.bottom-menu a {
display:flex;
flex-direction:column;
align-items:center;
flex:1;
padding:5px;
color:#666;
font-weight:bold;
font-size:12px;
text-decoration:none;
transition:all .3s;
}
.bottom-menu a svg{
margin-bottom:3px;
}
.bottom-menu a.sat {
background-color:#ff3f56;
color:#fff;
border-radius:100%;
width:50px;
height:50px;
display:flex;
align-items:center;
justify-content:center;
position:absolute;
left:50%;
transform:translateX(-50%);
top:-10px;
border:6px solid #fff;
}
.bottom-menu a.sat:hover {
border-color:#ff3f56;
color:#fff;
}
.bottom-menu a:hover {
color:#ff3f56;
}
.bottom-menu a:last-child{
margin-right:0;
}
span.bosluk {
flex:1;
}
.bottommenu-hidden{-webkit-transform:translateY(100%);
-ms-transform:translateY(100%);
transform:translateY(100%)}
Bước 2
Dán code HTML vào trước thẻ </body>
<b:if cond='data:blog.isMobileRequest == "true"'>
<div class='bottom-menu'>
<a class='home' href='#'>
<svg class='svg' height='24' viewBox='0 0 24 24' width='24'><path d='M21 13v10h-6v-6h-6v6h-6v-10h-3l12-12 12 12h-3zm-1-5.907v-5.093h-3v2.093l3 3z' fill='#ff3f56'/></svg>
Home
</a>
<a href='#'>
<svg class='svg' clip-rule='evenodd' fill-rule='evenodd' height='24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M12 0c-6.626 0-12 5.372-12 12 0 6.627 5.374 12 12 12 6.627 0 12-5.373 12-12 0-6.628-5.373-12-12-12zm0 5.5c-3.866 0-7 2.902-7 6.481 0 2.04 1.018 3.86 2.609 5.048v2.471l2.383-1.308c.636.176 1.31.271 2.008.271 3.866 0 7-2.902 7-6.482 0-3.579-3.134-6.481-7-6.481zm.696 8.728l-1.783-1.901-3.478 1.901 3.826-4.061 1.826 1.901 3.435-1.901-3.826 4.061z' fill='#3B5998'/></svg>
Messenger
</a>
<span class='bosluk'/>
<a class='sat' href='#'>
<svg class='svg' height='24' viewBox='0 0 24 24' width='24'><path d='M3.59 1.322l2.844-1.322 4.041 7.89-2.725 1.341c-.538 1.259 2.159 6.289 3.297 6.372.09-.058 2.671-1.328 2.671-1.328l4.11 7.932s-2.764 1.354-2.854 1.396c-7.861 3.591-19.101-18.258-11.384-22.281zm1.93 1.274l-1.023.504c-5.294 2.762 4.177 21.185 9.648 18.686l.971-.474-2.271-4.383-1.026.5c-3.163 1.547-8.262-8.219-5.055-9.938l1.007-.497-2.251-4.398zm7.832 7.649l2.917.87c.223-.747.16-1.579-.24-2.317-.399-.739-1.062-1.247-1.808-1.469l-.869 2.916zm1.804-6.059c1.551.462 2.926 1.516 3.756 3.051.831 1.536.96 3.263.498 4.813l-1.795-.535c.325-1.091.233-2.306-.352-3.387-.583-1.081-1.551-1.822-2.643-2.146l.536-1.796zm.95-3.186c2.365.705 4.463 2.312 5.729 4.656 1.269 2.343 1.466 4.978.761 7.344l-1.84-.548c.564-1.895.406-4.006-.608-5.882-1.016-1.877-2.696-3.165-4.591-3.729l.549-1.841z' fill='#fff'/></svg>
Alo
</a>
<a href='#'>
<svg class='wh-messenger-svg-zalo wh-svg-icon svg' height='24' viewBox='0 0 97.4 87.2' width='24' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'>
<path d='M78.4,42c-1.4,0-2.4,0.6-3.2,1.7c-0.7,1-1,2.2-1,3.7c0,1.5,0.3,2.7,1,3.7c0.8,1.2,1.8,1.7,3.2,1.7 c1.4,0,2.5-0.6,3.2-1.7c0.7-1,1-2.2,1-3.7c0-1.4-0.3-2.6-1-3.6C80.8,42.6,79.7,42,78.4,42z' fill='#19BFE5'/>
<path d='M48.8,0C21.9,0,0,19.5,0,43.6c0,11.9,5.4,22.7,14,30.6c2.2,2-5.4,10.5-9,11.3c10.4,2.9,20.7-3.4,23.2-2.4 c6.2,2.6,13.2,4,20.5,4c26.9,0,48.7-19.5,48.7-43.6C97.5,19.5,75.7,0,48.8,0z M27.8,58.2H14.6c-3.1,0-4.6-1.1-4.6-3.3 c0-1,0.6-2.4,1.8-4l11.8-15.6h-8.5c-3.1,0-4.7-1-4.7-3c0-2,1.6-3,4.7-3h11.2c3.8,0,5.7,1.1,5.7,3.2c0,1-0.6,2.3-1.9,4L18.5,52.2 h9.3c3.1,0,4.7,1,4.7,3C32.5,57.2,30.9,58.2,27.8,58.2z M54.9,53.8c0,3.1-1.1,4.7-3.2,4.7c-1.4,0-2.4-0.7-3.1-2.2 c-1.3,1.6-3.1,2.4-5.4,2.4c-2.9,0-5.3-1.2-7.2-3.5c-1.7-2.2-2.5-4.8-2.5-7.8c0-3,0.9-5.6,2.7-7.8c1.9-2.3,4.3-3.5,7.3-3.5 c2.2,0,3.9,0.8,5.1,2.3c0.7-1.4,1.8-2,3.1-2c2.1,0,3.2,1.5,3.2,4.6V53.8z M64.7,53.8c0,3.1-1.1,4.7-3.2,4.7c-2.1,0-3.2-1.6-3.2-4.7 V31.9c0-3.1,1.1-4.7,3.2-4.7c2.1,0,3.2,1.6,3.2,4.7V53.8z M78.4,58.9c-3.2,0-5.9-1.1-7.9-3.3c-2-2.2-3-4.9-3-8.1s1-6,3-8.1 c2-2.2,4.7-3.3,7.9-3.3c3.3,0,5.9,1.1,7.9,3.3c1.9,2.1,2.9,4.9,2.9,8.1s-1,6-2.9,8.1C84.2,57.8,81.6,58.9,78.4,58.9z' fill='#19BFE5'/>
<path d='M44.4,42.2c-1.3,0-2.4,0.5-3.1,1.6c-0.7,1-1,2.1-1,3.5c0,1.4,0.3,2.6,1,3.6c0.8,1.1,1.8,1.7,3.2,1.7 c1.3,0,2.4-0.6,3.1-1.7c0.6-1,1-2.2,1-3.6c0-1.4-0.3-2.5-1-3.5C46.7,42.8,45.7,42.2,44.4,42.2z' fill='#19BFE5'/>
</svg>
Zalo
</a>
<a href='#'>
<svg class='svg' height='24' viewBox='0 0 24 24' width='24'><path d='M12 3c5.514 0 10 3.592 10 8.007 0 4.917-5.144 7.961-9.91 7.961-1.937 0-3.384-.397-4.394-.644-1 .613-1.594 1.037-4.272 1.82.535-1.373.722-2.748.601-4.265-.837-1-2.025-2.4-2.025-4.872 0-4.415 4.486-8.007 10-8.007zm0-2c-6.338 0-12 4.226-12 10.007 0 2.05.739 4.063 2.047 5.625.055 1.83-1.023 4.456-1.993 6.368 2.602-.47 6.301-1.508 7.978-2.536 1.417.345 2.774.503 4.059.503 7.084 0 11.91-4.837 11.91-9.961-.001-5.811-5.702-10.006-12.001-10.006zm-4.449 10.151c.246.277.369.621.369 1.034 0 .529-.208.958-.624 1.289-.416.33-.996.495-1.74.495-.637 0-1.201-.123-1.69-.367l.274-1.083c.494.249.993.375 1.501.375.293 0 .521-.056.686-.167.315-.214.334-.646.023-.892-.149-.117-.404-.236-.769-.357-1.097-.366-1.645-.937-1.645-1.716 0-.503.202-.917.604-1.243.404-.325.943-.488 1.614-.488.586 0 1.096.099 1.535.298l-.299 1.049c-.401-.187-.82-.28-1.254-.28-.267 0-.476.052-.627.153-.299.204-.293.57-.035.787.126.107.428.246.91.416.532.187.92.42 1.167.697zm12.205-.021c-.249-.28-.645-.518-1.181-.706-.475-.168-.776-.307-.899-.41-.243-.205-.249-.545.032-.738.146-.099.352-.148.609-.148.464 0 .87.104 1.274.295l.316-1.111-.022-.012c-.441-.199-.962-.3-1.55-.3-.675 0-1.225.166-1.632.495-.41.33-.618.757-.618 1.267 0 .791.562 1.377 1.67 1.745.357.122.612.239.757.353.292.231.28.637-.022.841-.157.108-.381.162-.667.162-.549 0-1.042-.145-1.522-.39l-.29 1.147c.549.273 1.122.38 1.728.38.749 0 1.34-.168 1.759-.502.422-.334.636-.776.636-1.313 0-.418-.127-.772-.378-1.055zm-6.644-3.005l-1.228 3.967-1.014-3.967h-1.791l-.366 5.75h1.229l.204-4.642h.018s.702 2.878 1.178 4.547h1.031c.794-2.419 1.261-3.936 1.399-4.547h.026c0 .813.045 2.36.136 4.642h1.298l-.309-5.75h-1.811z' fill='#23A215'/></svg>
Nhắn tin
</a>
</div>
</b:if>
Bước 3
Dán tiếp javascript bên dưới vào ngay sau code bước 2 ở trên
<script>
//<![CDATA[
;( function ( document, window, index )
{
'use strict';
var elSelector = '.bottom-menu',
elClassHidden = 'bottommenu-hidden',
throttleTimeout = 500,
element = document.querySelector( elSelector );
if( !element ) return true;
var dHeight = 0,
wHeight = 0,
wScrollCurrent = 0,
wScrollBefore = 0,
wScrollDiff = 0,
hasElementClass = function( element, className ){ return element.classList ? element.classList.contains( className ) : new RegExp( '(^| )' + className + '( |$)', 'gi' ).test( element.className ); },
addElementClass = function( element, className ){ element.classList ? element.classList.add( className ) : element.className += ' ' + className; },
removeElementClass = function( element, className ){ element.classList ? element.classList.remove( className ) : element.className = element.className.replace( new RegExp( '(^|\\b)' + className.split( ' ' ).join( '|' ) + '(\\b|$)', 'gi' ), ' ' ); },
throttle = function( delay, fn )
{
var last, deferTimer;
return function()
{
var context = this, args = arguments, now = +new Date;
if( last && now < last + delay )
{
clearTimeout( deferTimer );
deferTimer = setTimeout( function(){ last = now; fn.apply( context, args ); }, delay );
}
else
{
last = now;
fn.apply( context, args );
}
};
};
window.addEventListener( 'scroll', throttle( throttleTimeout, function()
{
dHeight = document.body.offsetHeight;
wHeight = window.innerHeight;
wScrollCurrent = window.pageYOffset;
wScrollDiff = wScrollBefore - wScrollCurrent;
if( wScrollCurrent <= 0 ) // scrolled to the very top; element sticks to the top
removeElementClass( element, elClassHidden );
else if( wScrollDiff > 0 && hasElementClass( element, elClassHidden ) ) // scrolled up; element slides in
removeElementClass( element, elClassHidden );
else if( wScrollDiff < 0 ) // scrolled down
{
if( wScrollCurrent + wHeight >= dHeight && hasElementClass( element, elClassHidden ) ) // scrolled to the very bottom; element slides in
removeElementClass( element, elClassHidden );
else // scrolled down; element slides out
addElementClass( element, elClassHidden );
}
wScrollBefore = wScrollCurrent;
}));
}( document, window, 0 ));
//]]>
</script>
Trong đó:
Các đường link thì bạn tìm hiểu tự lấy và thay vào.
Nút Messenger có thể là Fanpage hoặc facebook cá nhân
Ví dụ link facebook cá nhân có dạng: https://www.facebook.com/profile.php?id=xxxxxxxxxxxx
"xxxxxxxxxxxxx" là ID fb cá nhân của bạn.
Hoặc chat facebook có dạng: https://m.me/xxxxxxx
Link zalo: https://m.me/yyyy (yyyy là số điện thoại của bạn)
Nhắn tin: sms:xxxx
Gọi điện: tel:xxxx
Cái này bạn tự tìm hiểu và điền vào hộ mình.
Một số menu chính của blogspot có sử dụng javascript và jquery hỗ trợ có thể bị lỗi không xổ được khi cài đặt menu này cũng như vài tiện ích có thể bị ảnh hưởng nên bạn cần cân nhắc trước khi dùng.
