Có dịch vụ thiết kế website trọn gói không?

Có. Tại đây chúng tôi cung cấp giải pháp thiết kế website trọn gói với chi phí tối ưu nhất, tư vấn chi tiết về dịch vụ thiết kế website phù hợp với doanh nghiệp mới, bảo hành website vĩnh viễn.

Làm thế nào để liên hệ với bạn?

Hãy liên hệ trực tiếp với chúng tôi hoặc qua kênh chat Zalo để được tư vấn miễn phí

Thêm thanh điều hướng ẩn hiện dưới chân trang khi cuộn trang

Thanh điều hướng chân trang chứa các liên kết đi đến trang kế tiếp, trở về trang trước hay trở về trang chủ, ngoài ra thanh điều hướng còn chứa các liên kết, chia sẻ, bình luận, làm mới trang và scroll to top

Tóm lại khi thêm thanh điều hướng dưới chân trang mang lại trải nghiệm cao cho người đọc, giúp điều hướng nhanh hơn. Ngoài ra thanh điều hướng có hiệu ứng ẩn hiện khi cuộn trang, cụ thể thanh điều hướng hiện ra khi cuộn xuống và ẩn khi cuộn lên.

Ảnh minh họa

Các liên kết chia sẻ bài đăng

Cách thêm thanh điều hướng dưới chân trang

Bước 1: Vào chỉnh sửa Chủ đề, chọn chuyển đến tiện ích Blog1, thêm một thẻ b:includable lấy tên footer-navigation-bar như sau:

<b:includable id='footer-navigation-bar'>

  <div class='footer-navigation-bar visible'>

    <div>

      <ul>

        <li>

          <b:if cond='!data:view.isHomepage'>

            <a expr:href='data:blog.canonicalHomepageUrl' expr:title='data:messages.home'><div class='icon'><svg height='24px' width='24px' viewBox='0 0 24 24'><path d='M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z'/></svg></div><div class='title'><data:messages.home/></div></a>

          <b:else/>

            <a class='empty-link' expr:title='data:messages.home' href='javascript:void(0)'><div class='icon'><svg viewBox='0 0 24 24'><path d='M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z'/></svg></div><div class='title'><data:messages.home/></div></a>

          </b:if>

        </li>

        <li>

          <b:if cond='data:newerPageUrl'>

            <a expr:href='data:newerPageUrl.canonical' expr:title='data:messages.newerPosts'>

              <div class='icon'><svg height='21px' width='21px' viewBox='0 0 608 1280' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'><path d='M595 288q0 13-10 23L192 704l393 393q10 10 10 23t-10 23l-50 50q-10 10-23 10t-23-10L23 727q-10-10-10-23t10-23l466-466q10-10 23-10t23 10l50 50q10 10 10 23z'/></svg></div><div class='title'>Trang trước</div></a>

          <b:else/>

            <a class='empty-link' expr:title='data:messages.newerPosts' href='javascript:void(0)'><div class='icon'><svg height='21px' width='21px' viewBox='0 0 608 1280' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'><path d='M595 288q0 13-10 23L192 704l393 393q10 10 10 23t-10 23l-50 50q-10 10-23 10t-23-10L23 727q-10-10-10-23t10-23l466-466q10-10 23-10t23 10l50 50q10 10 10 23z'/></svg></div><div class='title'>Trang trước</div></a>

          </b:if>

        </li>

        <li>

          <b:if cond='data:olderPageUrl'>

            <a expr:href='data:olderPageUrl.canonical' expr:title='data:messages.olderPosts'><div class='icon'><svg height='21px' width='21px' viewBox='0 0 608 1280' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'><g transform='translate(608 0) scale(-1 1)'><path d='M595 288q0 13-10 23L192 704l393 393q10 10 10 23t-10 23l-50 50q-10 10-23 10t-23-10L23 727q-10-10-10-23t10-23l466-466q10-10 23-10t23 10l50 50q10 10 10 23z'/></g></svg></div><div class='title'>Trang kế</div></a>

          <b:else/>

            <a class='empty-link' expr:title='data:messages.olderPosts' href='javascript:void(0)'><div class='icon'><svg height='21px' width='21px' viewBox='0 0 608 1280' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'><g transform='translate(608 0) scale(-1 1)'><path d='M595 288q0 13-10 23L192 704l393 393q10 10 10 23t-10 23l-50 50q-10 10-23 10t-23-10L23 727q-10-10-10-23t10-23l466-466q10-10 23-10t23 10l50 50q10 10 10 23z'/></g></svg></div><div class='title'>Trang kế</div></a>

          </b:if>

        </li>

        <b:if cond='!data:view.isPost'>

        <li>

          <a class='uk-icon scroll-top' href='javascript:void(0)' title='Lên đầu'><div class='icon'><svg height='24px' width='24px' viewBox='0 0 24 24'><path d='M13,20H11V8L5.5,13.5L4.08,12.08L12,4.16L19.92,12.08L18.5,13.5L13,8V20Z'/></svg></div><div class='title'>Lên đầu</div></a>

        </li>

        <li>

          <a class='uk-icon' href='javascript:void(0)' onclick='location.reload()' title=''><div class='icon'><svg height='24px' width='24px' viewBox='0 0 24 24'><path d='M17.65,6.35C16.2,4.9 14.21,4 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20C15.73,20 18.84,17.45 19.73,14H17.65C16.83,16.33 14.61,18 12,18A6,6 0 0,1 6,12A6,6 0 0,1 12,6C13.66,6 15.14,6.69 16.22,7.78L13,11H20V4L17.65,6.35Z'/></svg></div><div class='title'>Làm mới</div></a>

        </li>

        </b:if>

        <b:if cond='data:view.isPost'>

        <li>

          <b:if cond='data:post.allowComments'>

            <b:if cond='data:post.embedCommentForm'>

              <b:if cond='data:post.allowNewComments'>

                <a class='sroll-comments' href='javascript:void(0)' title='Bình luận'><div class='icon' expr:data-icon-label='data:post.numberOfComments'><svg height='21px' width='21px' viewBox='0 0 24 24'><path d='M20 2H4C2.9 2 2 2.9 2 4V22L6 18H20C21.11 18 22 17.11 22 16V4C22 2.9 21.11 2 20 2M20 16H6L4 18V4H20M17 11H15V9H17M13 11H11V9H13M9 11H7V9H9'/></svg></div><div class='title'>Bình luận</div></a>

              <b:else/>

                <a class='empty-link' href='javascript:void(0)' title='Bình luận'><div class='icon' expr:data-icon-label='data:post.numberOfComments'><svg height='21px' width='21px' viewBox='0 0 24 24'><path d='M20 2H4C2.9 2 2 2.9 2 4V22L6 18H20C21.11 18 22 17.11 22 16V4C22 2.9 21.11 2 20 2M20 16H6L4 18V4H20M17 11H15V9H17M13 11H11V9H13M9 11H7V9H9'/></svg></div><div class='title'>Bình luận</div></a>

              </b:if>

            </b:if>

          <b:else/>

            <a class='empty-link' href='javascript:void(0)' title='Bình luận'><div class='icon' expr:data-icon-label='data:post.numberOfComments'><svg height='21px' width='21px' viewBox='0 0 24 24'><path d='M20 2H4C2.9 2 2 2.9 2 4V22L6 18H20C21.11 18 22 17.11 22 16V4C22 2.9 21.11 2 20 2M20 16H6L4 18V4H20M17 11H15V9H17M13 11H11V9H13M9 11H7V9H9'/></svg></div><div class='title'>Bình luận</div></a>

          </b:if>

        </li>

        <li>

          <b:if cond='data:widgets.Blog.first.allBylineItems.share'>

            <a class='share-post' expr:title='data:messages.share' href='javascript:void(0)'><div class='icon'><svg height='21px' width='21px' viewBox='0 0 24 24'><path d='M18,16.08C17.24,16.08 16.56,16.38 16.04,16.85L8.91,12.7C8.96,12.47 9,12.24 9,12C9,11.76 8.96,11.53 8.91,11.3L15.96,7.19C16.5,7.69 17.21,8 18,8A3,3 0 0,0 21,5A3,3 0 0,0 18,2A3,3 0 0,0 15,5C15,5.24 15.04,5.47 15.09,5.7L8.04,9.81C7.5,9.31 6.79,9 6,9A3,3 0 0,0 3,12A3,3 0 0,0 6,15C6.79,15 7.5,14.69 8.04,14.19L15.16,18.34C15.11,18.55 15.08,18.77 15.08,19C15.08,20.61 16.39,21.91 18,21.91C19.61,21.91 20.92,20.61 20.92,19A2.92,2.92 0 0,0 18,16.08Z'/></svg></div><div class='title'><data:messages.share/></div></a>

            <ul class='share-menu visible'>

              <li><span>Chia sẻ nội dung này<svg height='28px' width='28px' viewBox='0 0 24 24'><path d='M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z'/></svg></span></li>

              <li><a expr:href='&quot;https://www.facebook.com/sharer.php?u=&quot; + data:post.url.canonical' rel='noopener nofollow' target='_blank'><svg height='28px' width='28px' viewBox='0 0 24 24'><path fill='#3b5998' d='M5,3H19A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V5A2,2 0 0,1 5,3M18,5H15.5A3.5,3.5 0 0,0 12,8.5V11H10V14H12V21H15V14H18V11H15V9A1,1 0 0,1 16,8H18V5Z'/></svg><b:eval expr='data:blog.sharing.platforms[1].shareMessage'/></a></li>

              <li><a expr:href='&quot;https://twitter.com/intent/tweet?url=&quot; + data:post.url.canonical + &quot;&amp;text=&quot; + data:post.snippets.short' rel='noopener nofollow' target='_blank'><svg height='28px' width='28px' viewBox='0 0 24 24'><path fill='#1da1f2' d='M5,3H19A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V5A2,2 0 0,1 5,3M17.71,9.33C18.19,8.93 18.75,8.45 19,7.92C18.59,8.13 18.1,8.26 17.56,8.33C18.06,7.97 18.47,7.5 18.68,6.86C18.16,7.14 17.63,7.38 16.97,7.5C15.42,5.63 11.71,7.15 12.37,9.95C9.76,9.79 8.17,8.61 6.85,7.16C6.1,8.38 6.75,10.23 7.64,10.74C7.18,10.71 6.83,10.57 6.5,10.41C6.54,11.95 7.39,12.69 8.58,13.09C8.22,13.16 7.82,13.18 7.44,13.12C7.81,14.19 8.58,14.86 9.9,15C9,15.76 7.34,16.29 6,16.08C7.15,16.81 8.46,17.39 10.28,17.31C14.69,17.11 17.64,13.95 17.71,9.33Z'/></svg><b:eval expr='data:blog.sharing.platforms[3].shareMessage'/></a></li>

              <li><a expr:href='&quot;https://www.pinterest.com/pin/create/button/?url=&quot; + data:post.url.canonical + &quot;&amp;description=&quot; + data:post.title.escaped + &quot;&amp;media=&quot; + resizeImage(data:post.featuredImage, 1200, &quot;1200:630&quot;)' rel='noopener nofollow' target='_blank'><svg  height='28px' width='28px' viewBox='0 0 24 24'><path fill='#e60023' d='M5,3H19A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H9.29C9.69,20.33 10.19,19.38 10.39,18.64L11.05,16.34C11.36,16.95 12.28,17.45 13.22,17.45C16.17,17.45 18.22,14.78 18.22,11.45C18.22,8.28 15.64,5.89 12.3,5.89C8.14,5.89 5.97,8.67 5.97,11.72C5.97,13.14 6.69,14.89 7.91,15.45C8.08,15.56 8.19,15.5 8.19,15.34L8.47,14.28C8.5,14.14 8.5,14.06 8.41,14C7.97,13.45 7.69,12.61 7.69,11.78C7.69,9.64 9.3,7.61 12.03,7.61C14.42,7.61 16.08,9.19 16.08,11.5C16.08,14.11 14.75,15.95 13.03,15.95C12.05,15.95 11.39,15.11 11.55,14.17C11.83,13.03 12.39,11.83 12.39,11C12.39,10.22 12,9.61 11.16,9.61C10.22,9.61 9.39,10.61 9.39,11.95C9.39,12.83 9.66,13.39 9.66,13.39L8.55,18.17C8.39,19 8.47,20.25 8.55,21H5A2,2 0 0,1 3,19V5A2,2 0 0,1 5,3Z'/></svg><b:eval expr='data:blog.sharing.platforms[4].shareMessage'/></a></li>

              <li><a expr:href='&quot;https://www.linkedin.com/sharing/share-offsite/?url=&quot; + data:post.url.canonical' rel='noopener nofollow' target='_blank'><svg height='28px' width='28px' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path fill='#0077B5' d='M 20 2 L 4 2 C 2.898438 2 2 2.898438 2 4 L 2 20 C 2 21.101563 2.898438 22 4 22 L 20 22 C 21.101563 22 22 21.101563 22 20 L 22 4 C 22 2.898438 21.101563 2 20 2 Z M 8.101563 18 L 5 18 L 5 9.398438 L 8.101563 9.398438 Z M 6.5 8.398438 C 5.601563 8.398438 5 7.800781 5 7 C 5 6.199219 5.601563 5.601563 6.601563 5.601563 C 7.5 5.601563 8.101563 6.199219 8.101563 7 C 8.101563 7.800781 7.5 8.398438 6.5 8.398438 Z M 19 18 L 15.898438 18 L 15.898438 13.300781 C 15.898438 12 15.101563 11.699219 14.800781 11.699219 C 14.5 11.699219 13.5 11.898438 13.5 13.300781 C 13.5 13.5 13.5 18 13.5 18 L 10.398438 18 L 10.398438 9.398438 L 13.5 9.398438 L 13.5 10.601563 C 13.898438 9.898438 14.699219 9.398438 16.199219 9.398438 C 17.699219 9.398438 18.898438 10.601563 18.898438 13.300781 L 18.898438 18 Z '/></svg>Chia sẻ với Linkedin</a></li>

               <li><a expr:href='&quot;https://www.blogger.com/email-post.g?blogID=&quot; + data:blog.blogId + &quot;&amp;postID=&quot; + data:post.id' rel='noopener nofollow' target='_blank'><svg height='28px' width='28px' viewBox='0 0 24 24'><path fill='#fb8f3d' d='M22 6C22 4.9 21.1 4 20 4H4C2.9 4 2 4.9 2 6V18C2 19.1 2.9 20 4 20H20C21.1 20 22 19.1 22 18V6M20 6L12 11L4 6H20M20 18H4V8L12 13L20 8V18Z'/></svg>Gửi bài qua Email</a></li>

            </ul>

          <b:else/>

            <a class='empty-link' expr:title='data:messages.share' href='javascript:void(0)'><div class='icon'><svg height='21px' width='21px' viewBox='0 0 24 24'><path d='M18,16.08C17.24,16.08 16.56,16.38 16.04,16.85L8.91,12.7C8.96,12.47 9,12.24 9,12C9,11.76 8.96,11.53 8.91,11.3L15.96,7.19C16.5,7.69 17.21,8 18,8A3,3 0 0,0 21,5A3,3 0 0,0 18,2A3,3 0 0,0 15,5C15,5.24 15.04,5.47 15.09,5.7L8.04,9.81C7.5,9.31 6.79,9 6,9A3,3 0 0,0 3,12A3,3 0 0,0 6,15C6.79,15 7.5,14.69 8.04,14.19L15.16,18.34C15.11,18.55 15.08,18.77 15.08,19C15.08,20.61 16.39,21.91 18,21.91C19.61,21.91 20.92,20.61 20.92,19A2.92,2.92 0 0,0 18,16.08Z'/></svg></div><div class='title'><data:messages.share/></div></a>

          </b:if>

        </li>

        </b:if>

      </ul>

    </div>

  </div>

</b:includable>

Ảnh minh họa

Bước 2: Chèn thẻ b:include vào các vị trí sau:

Đầu tiên mở thẻ <b:includable id='main'> chèn thẻ <b:include cond='!data:view.isPost' name='footer-navigation-bar'/> ngay trước thẻ đóng </b:includable>

Hình minh họa

Tiếp theo mở thẻ <b:includable id='post' var='post'>, chèn thẻ <b:include cond='data:view.isPost' name='footer-navigation-bar'/> trước thẻ đóng </b:includable>

Hình minh họa

Bước 3: Thêm script bằng Jquery trước thẻ đóng </body>

<script>//<![CDATA[

$(function() {

  var x = window.pageYOffset

  $(window).scroll(function() {

    var y = window.pageYOffset

    if (x > y) {

      $('.footer-navigation-bar').addClass('visible')

    } else {

      $('.footer-navigation-bar').removeClass('visible')

    }

    if ($(window).scrollTop() == 0) {

      $('.footer-navigation-bar').addClass('visible')

    }

    if ($(window).scrollTop() + $(window).height() > $(document).height() - 100) {

      $('.footer-navigation-bar').addClass('visible')

    }

    x = y

  })

  $('.footer-navigation-bar .share-post').click(function(e) {

    e.preventDefault()

    $(this).parent().find('.share-menu').removeClass('visible')

  })

  $('.footer-navigation-bar .share-menu>li:first-child>span>svg').click(function(e) {

    e.preventDefault()

    $(this).parents('.share-menu').addClass('visible')

  })

  $('.footer-navigation-bar .sroll-comments').click(function(e) {

    e.preventDefault()

    $('html,body').stop().animate({

      scrollTop: ($('#comments').offset().top)

    }, 'slow')

  })

  $('.scroll-top').click(function(){

    $('html,body').animate({

      scrollTop:0

    }, 'slow')

  })

})

//]]></script>

Bước 4: Chèn css trong thẻ b:skin

@media(min-width:801px){ /* Thay 801 thành kích thước màn hình muốn hiển thị thanh điều hướng */

    .footer-navigation-bar{display:none}

}

.footer-navigation-bar {

    padding: 0 5px;

    z-index: 20;

}

.footer-navigation-bar,.footer-navigation-bar .share-menu {

    background-color: #fff;

    position: fixed;

    bottom: 0;

    left: 0;

    right: 0;

    box-shadow: 0 1px 3px rgba(0, 0, 0, .3);

    -webkit-transition-property: -webkit-transform;

    transition-property: -webkit-transform;

    transition-property: transform;

    transition-property: transform, -webkit-transform;

    -webkit-transition-duration: .3s;

    transition-duration: .3s;

    -webkit-transition-timing-function: cubic-bezier(0, 0, 0.2, 1);

    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);

}

.footer-navigation-bar.visible,.footer-navigation-bar .share-menu.visible {

    -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.6, 1);

    transition-timing-function: cubic-bezier(0.4, 0, 0.6, 1);

    -webkit-transform: translateY(100%);

    -ms-transform: translateY(100%);

    transform: translateY(100%);

}

.footer-navigation-bar.visible {

    overflow: hidden;

}

.footer-navigation-bar>div {

    display: -ms-flexbox;

    display: -webkit-flex;

    display: flex;

    -webkit-align-items: center;

    align-items: center;

}

.footer-navigation-bar>div>ul {

    display: -ms-flexbox;

    display: -webkit-flex;

    display: flex;

    width: 100%;

    margin: 0;

    padding: 0;

    list-style: none;

}

.footer-navigation-bar>div>ul>li {

    width: 20%;

}

.footer-navigation-bar>div>ul>li>a {

    min-height: 50px;

    font-size: .6rem;

    text-transform: uppercase;

    display: -ms-flexbox;

    display: -webkit-flex;

    display: flex;

    justify-content: center;

    align-items: center;

    flex-flow: column;

    box-sizing: border-box;

}

.footer-navigation-bar>div>ul>li>a:not(.empty-link) {

    color: currentColor;

    fill: currentcolor;

}

.footer-navigation-bar>div>ul>li>a.empty-link {

    pointer-events: none;

    color: #aaa;

    fill: #aaa;

}

.footer-navigation-bar>div>ul>li>a>.icon {

    width: 24px;

    height: 24px;

    line-height: 24px;

    margin-bottom: 2px;

}

.footer-navigation-bar>div>ul>li>a:not(.empty-link)>.icon>svg {

    fill: #707070;

}

.footer-navigation-bar>div>ul>li>a.empty-link>.icon>svg {

    fill: #aaa;

}

.footer-navigation-bar>div>ul>li>a>.title {

    white-space: nowrap;

    overflow: hidden;

}

.footer-navigation-bar .share-menu {

    z-index: 25;

    max-height: 100%;

    list-style: none;

}

.footer-navigation-bar .share-menu>li {

    padding: 0 15px;

    line-height: 45px;

    white-space: nowrap;

    text-overflow: ellipsis;

    overflow: hidden;

}

.footer-navigation-bar .share-menu>li:first-child {

    background-color: #f2f6fb;

}

.footer-navigation-bar .share-menu>li:first-child>span>svg {

    margin-left: auto;

    text-align: right;

}

.footer-navigation-bar .share-menu>li>span,.footer-navigation-bar .share-menu>li>a {

    display: -ms-flexbox;

    display: -webkit-flex;

    display: flex;

    -webkit-align-items: center;

    align-items: center;

    color: #333;

}

.footer-navigation-bar .share-menu>li>a>svg {

    margin-right: 25px;

    width: 28px;

    height: 28px;

}

.footer-navigation-bar [data-icon-label] {

    position: relative;

}

.footer-navigation-bar [data-icon-label]:after {

    content: attr(data-icon-label);

    position: absolute;

    font-style: normal;

    font-family: Arial, Sans-serif !important;

    top: -8px;

    right: -8px;

    font-weight: bolder;

    background-color: rgb(255, 0, 0);

    box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);

    font-size: 11px;

    padding: 2px;

    opacity: .9;

    line-height: 13px;

    height: 13px;

    width: 13px;

    border-radius: 50%;

    color: #fff;

    text-align: center;

    z-index: 1;

    transition: transform .2s;

}

.footer-navigation-bar [data-icon-label="0"]:after,.footer-navigation-bar .empty-link>[data-icon-label]:after {

    display: none;

}