Hướng dẫn tạo thanh điều hướng bài viết tích hợp nút chia sẻ

Thanh điều hướng các liên kết bài đăng mới hơn và bài đăng cũ hơn bên dưới nội dung bài viết rất quan trọng giúp độc giả truy cập nhanh đến bài viết trước hoặc sau của bài viết hiện tại. Vị trí các liên kết bài đăng thường được chèn dưới cùng bên dưới nhận xét như vậy khả năng để người đọc click chuột không cao, thay vào đó có thể chèn liên kết ngay dưới nội dung bài viết hay dưới tiêu đề, dấu ngắt nhảy thì tính tương tác sẽ cao hơn.

Thanh điều hướng do mình thiết kế gồm những đặc điểm sau:

• Tích hợp các nút: liên kết bài đăng mới hơn, bài đăng cũ hơn, trang chủ và nút chia sẻ
• Các nút liên kết bài đăng mới hơn, bài đăng cũ hơn sẽ bị mờ đi nếu không có liên kết.
• Thiết kế theo phong cách Material Design sử dụng Material Icons
• Nằm vị trí bên dưới nội dung bài viết và cố định dưới chân trang với kích thước màn hình 414px trở xuống

Cách thực hiện:

Bước 1: Đăng nhập vào Blogger chuyển đến Chủ đề > Chỉnh sửa HTML > Trên tab chỉnh sửa chọn Chuyển đến tiện ích > Chọn Blog1.

Bước 2: Bên dưới widget bao gồm các thẻ tag b:includable, bạn thêm đoạn code dưới đấy vào cùng với các thẻ tag b:includable đó:

Copy

<b:includable id='postShare'>

  <div class='post-button-container'>

    <span class='post-button'>

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

        <a class='left' expr:href='data:newerPageUrl.canonical' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:messages.newerPosts'/>

      </b:if>

      <b:if cond='!data:newerPageUrl'><span class='left'/></b:if>

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

        <a class='right' expr:href='data:olderPageUrl.canonical' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:messages.olderPosts'/>

      </b:if>

      <b:if cond='!data:olderPageUrl'><span class='right'/></b:if>

      <a class='home' expr:href='data:blog.canonicalHomepageUrl' expr:title='data:messages.home'/>

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

      <span class='share'>

        <span class='share-button' expr:title='data:messages.share'/>

        <ul class='share-menu'>

          <li>

            <span class='social-wrapper' expr:data-href='&quot;https://www.facebook.com/sharer.php?u=&quot; + data:post.url.canonical'>

              <b:eval expr='data:blog.sharing.platforms[1].shareMessage'/>

            </span>

          </li>

          <li>

            <span class='social-wrapper' expr:data-href='&quot;https://twitter.com/intent/tweet?url=&quot; + data:post.url.canonical + &quot;&amp;text=&quot; + data:post.snippets.short'>

              <b:eval expr='data:blog.sharing.platforms[3].shareMessage'/>

            </span>

          </li>

          <li>

            <span class='social-wrapper' expr:data-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; + data:post.featuredImage'>

              <b:eval expr='data:blog.sharing.platforms[4].shareMessage'/>

            </span>

          </li>

          <li>

            <span class='social-wrapper' expr:data-href='&quot;https://plus.google.com/share?url=&quot; + data:post.url.canonical + &quot;&amp;title=&quot; + data:post.title + &quot;&amp;text=&quot; + data:post.snippets.short'>

              <b:eval expr='data:blog.sharing.platforms[5].shareMessage'/>

            </span>

          </li>

          <li>

            <span class='social-wrapper' expr:data-href='&quot;https://www.linkedin.com/sharing/share-offsite/?url=&quot; + data:post.url.canonical'>

              <b:if cond='data:blog.locale == &quot;vi&quot;'>Chia sẻ với Linkedin<b:else/>Share to Linkedin</b:if>

            </span>

          </li>

          <li>

            <span class='social-wrapper' expr:data-href='&quot;https://www.blogger.com/email-post.g?blogID=&quot; + data:blog.blogId + &quot;&amp;postID=&quot; + data:post.id'>

              <b:if cond='data:blog.locale == &quot;vi&quot;'>Gửi bài qua Email<b:else/>Sending by email</b:if>

            </span>

          </li>

        </ul>

      </span>

    </b:if>

    </span>

  </div>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>

<script>//<![CDATA[

$('.post-button-container span.share-button').click(function(e) {

  e.stopPropagation()

  $('.post-button-container .share-menu').toggleClass('opened')

})

$('.post-button-container .share-menu').click(function(e) {

  e.stopPropagation()

})

$('html,.social-wrapper').click(function() {

  $('.post-button-container .share-menu').removeClass('opened')

})

var postEl = document.getElementsByClassName('social-wrapper')

var postCount = postEl.length;

for (i = 0; i < postCount; i++) {

  postEl[i].addEventListener("click", function(url, w, h) {

    var url = this.getAttribute("data-href"),

      h = 450,

      w = 400,

      l = (screen.width / 2) - (w / 2),

      t = (screen.height / 2) - (h / 2);

    window.open(url, 'popUpWindow', 'height=' + h + ',width=' + w + ',left=' + l + ',top=' + t + ',resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no,status=yes')

  })

}

//]]></script>

</b:includable>

Bước 3: Thêm đoạn sau bên dưới thẻ nội dung bài viết tên <data:post.body/>

Copy

<b:include cond='data:view.isPost' name='postShare'/>

Bước 4: Thêm css trong <b:skin>...</b:skin>

Copy

.post-button-container{float:left;width:100%;position:relative;margin:20px 0 15px 0;text-align:center}

.post-button-container .post-button{background-color:$(posts.background.color);display:inline-flex;position:relative;padding:5px;border-radius:3px;-webkit-box-shadow:0 2px 5px 0 rgba(0,0,0,.26);box-shadow:0 2px 5px 0 rgba(0,0,0,.26)}

.post-button-container .post-button:hover{-webkit-box-shadow:0 3px 4px 0 rgba(0,0,0,0.14),0 3px 3px -2px rgba(0,0,0,0.2),0 1px 12px 0 rgba(0,0,0,0.12);-moz-box-shadow:0 3px 4px 0 rgba(0,0,0,0.14),0 3px 3px -2px rgba(0,0,0,0.2),0 1px 12px 0 rgba(0,0,0,0.12);box-shadow:0 3px 4px 0 rgba(0,0,0,0.14),0 3px 3px -2px rgba(0,0,0,0.2),0 1px 12px 0 rgba(0,0,0,0.12)}

.post-button-container .post-button a{display:inline-flex;margin-right:20px}

.post-button-container span.left,.post-button-container span.right,.post-button-container span.share,.post-button-container span.share-button{display:inline-flex}

.post-button-container span.share-button{padding:2px 0;cursor:pointer}

.post-button-container span.left{margin-right:20px}

.post-button-container a.home:before,.post-button-container a.left:before,.post-button-container span.left:before,.post-button-container a.right:after,.post-button-container span.right:after,.post-button-container .share-button:before{font-family:Material Icons;font-size:24px;font-style:normal;font-weight:normal}

.post-button-container a.home:before{content:'\e88a';color:hsl(0,0%,53.3%)}

.post-button-container a.left:before{content:'\e5c4';color:hsl(0,0%,53.3%)}

.post-button-container span.left:before{content:'\e5c4';color:#aaa}

.post-button-container a.right:after{content:'\e5c8';color:hsl(0,0%,53.3%)}

.post-button-container span.right:after{content:'\e5c8';color:#aaa}

.post-button-container span.share-button:before{content:'\e80d';color:hsl(0,0%,53.3%);font-size:21px}

.post-button-container .share-menu{background:$(posts.background.color);position:absolute;top:35px;left:0;width:200px;-webkit-border-radius:2px;border-radius:2px;text-align:left;list-style-type:none;box-shadow:0 5px 5px -3px rgba(0,0,0,.2),0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12);z-index:8;-webkit-transform:scale(0,0);-moz-transform:scale(0,0);-ms-transform:scale(0,0);-o-transform:scale(0,0);transform:scale(0,0);-webkit-transition:all 0.25s;-moz-transition:all 0.25s;-ms-transition:all 0.25s;-o-transition:all 0.25s;transition:all 0.25s;transform-origin:center center}

.post-button-container .share-menu.opened{-webkit-transform:scale(1,1);-moz-transform:scale(1,1);-ms-transform:scale(1,1);-o-transform:scale(1,1);transform:scale(1,1)}

.post-button-container .share-menu li{padding:0 20px;line-height:35px;font-size:15px;cursor:pointer}

@media screen and (max-width:414px){

.post-button-container{position:fixed;left:0;bottom:0;margin:0;z-index:8}

.post-button-container .post-button{float:left;width:100%;display:block;padding:0 15px;line-height:40px;height:40px;border-radius:unset;-webkit-box-shadow:unset;box-shadow:unset}

.post-button-container .post-button a,.post-button-container span.left{margin:0}

.post-button-container .post-button a,.post-button-container span.left,.post-button-container span.right{margin-right:21}

.post-button-container span.share-button{padding:0}

.post-button-container .share-menu{top:unset;left:unset;bottom:40px;right:15px}

}

Tiếp tục thêm link Material Icons ngay trên thẻ <b:skin>

Copy

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"/>

Các bạn xem demo tại đại chỉ Blog: https://theme.vietblogdao.com/

Nội dung chính