Tạo các nút chia sẻ bài viết với hiệu ứng popup giống template mặc định

Các mẫu template mặc định mới v3 sử dụng các nút chia sẻ bài viết với hiệu ứng popup và ripple effect rất đẹp, ngoài ra còn có nút sao chép Url bài viết rất thuận tiện. Nếu bạn cũng muốn đưa các nút này vào mẫu template của bạn v2 bạn có thể làm theo hướng dẫn dưới đây

+ Bước 1: Đăng ký mới một thẻ tag b:includable trong widget Blog1

Copy


<b:includable id='shareButtonsMenu'>

  <div class='byline post-share-buttons goog-inline-block'>

    <div class='sharing'>

      <button class='sharing-button touch-icon-button' expr:aria-controls='&quot;sharing-popup-Blog1-byline-&quot; + data:post.id' expr:aria-label='data:messages.share' expr:id='&quot;sharing-button-Blog1-byline-&quot; + data:post.id' expr:title='data:messages.share'>

        <div class='flat-icon-button ripple'>

          <svg class='svg-icon-24'>

            <use xlink:href='/responsive/sprite_v1_6.css.svg#ic_share_black_24dp' xmlns:xlink='http://www.w3.org/1999/xlink'/>

          </svg>

        </div>

      </button>

 <div class='share-buttons-container'>

        <ul class='share-buttons hidden' expr:aria-label='data:messages.share' expr:id='&quot;sharing-button-Blog1-byline-&quot; + data:post.id' role="menu">

          <li>

            <span class='sharing-platform-button sharing-element-link' expr:data-href='&quot;https://www.blogger.com/share-post.g?blogID=&quot; + data:blog.id + &quot;&amp;postID=&quot; + data:post.id + &quot;&amp;target=&quot;' expr:data-url='data:post.url' title='Nhận liên kết'>

              <svg class='svg-icon-24 sharing-link'>

                <use xlink:href='/responsive/sprite_v1_6.css.svg#ic_24_link_dark' xmlns:xlink='http://www.w3.org/1999/xlink'/>

              </svg>

              <span class='platform-sharing-text'>Nhận liên kết</span>

            </span>

          </li>

          <li>

            <span class='sharing-platform-button' expr:data-href='&quot;https://www.blogger.com/share-post.g?blogID=&quot; + data:blog.blogId + &quot;&amp;postID=&quot; + data:post.id + &quot;&amp;target=facebook&quot;' title='Chia sẻ với Facebook'>

              <svg class='svg-icon-24 sharing-facebook'>

                <use xlink:href='/responsive/sprite_v1_6.css.svg#ic_24_facebook_dark' xmlns:xlink='http://www.w3.org/1999/xlink'/>

              </svg>

              <span class='platform-sharing-text'>Facebook</span>

            </span>

          </li>

          <li>

            <span class='sharing-platform-button' expr:data-href='&quot;https://www.blogger.com/share-post.g?blogID=&quot; + data:blog.blogId + &quot;&amp;postID=&quot; + data:post.id + &quot;&amp;target=twitter&quot;' title='Chia sẻ với Twitter'>

              <svg class='svg-icon-24 sharing-twitter'>

                <use xlink:href='/responsive/sprite_v1_6.css.svg#ic_24_twitter_dark' xmlns:xlink='http://www.w3.org/1999/xlink'/>

              </svg>

              <span class='platform-sharing-text'>Twitter</span>

            </span>

          </li>

          <li>

            <span class='sharing-platform-button' expr:data-href='&quot;https://www.blogger.com/share-post.g?blogID=&quot; + data:blog.blogId + &quot;&amp;postID=&quot; + data:post.id + &quot;&amp;target=pinterest&quot;' title='Chia sẻ với Pinterest'>

              <svg class='svg-icon-24 sharing-pinterest'>

                <use xlink:href='/responsive/sprite_v1_6.css.svg#ic_24_pinterest_dark' xmlns:xlink='http://www.w3.org/1999/xlink'/>

              </svg>

              <span class='platform-sharing-text'>Pinterest</span>

            </span>

          </li>

          <li>

            <span class='sharing-platform-button' expr:data-href='&quot;https://www.blogger.com/share-post.g?blogID=&quot; + data:blog.blogId + &quot;&amp;postID=&quot; + data:post.id + &quot;&amp;target=googleplus&quot;' title='Chia sẻ với Google+'>

              <svg class='svg-icon-24 sharing-googlePlus'>

                <use xlink:href='/responsive/sprite_v1_6.css.svg#ic_24_googlePlus_dark' xmlns:xlink='http://www.w3.org/1999/xlink'/>

              </svg>

              <span class='platform-sharing-text'>Google+</span>

            </span>

          </li>

          <li>

            <span class='sharing-platform-button' expr:data-href='&quot;https://www.blogger.com/share-post.g?blogID=&quot; + data:blog.blogId + &quot;&amp;postID=&quot; + data:post.id + &quot;&amp;target=email&quot;' title='Email'>

              <svg class='svg-icon-24 sharing-email'>

                <use xlink:href='/responsive/sprite_v1_6.css.svg#ic_24_email_dark' xmlns:xlink='http://www.w3.org/1999/xlink'/>

              </svg>

              <span class='platform-sharing-text'>Email</span>

            </span>

          </li>

        </ul>

      </div>

    </div>

  </div>

</b:includable>

Hình minh họa:

+ Bước 2: Chèn thẻ tag <b:include name='shareButtonsMenu'/> vào vị trí mà bạn muốn hiển thị trong bài viết ví dụ ngoài trang chủ:

Copy


<div class='post_share'>

  <b:include name='shareButtonsMenu'/>

</div>

Còn trong trang item ví dụ:

Copy


<div class='post-share'>

  <b:include name='shareButtonsMenu'/>

</div>

Với class post_share và post-share là vị trí hiển thị các bạn viết css cho phù hợp, hình minh họa:

+ Bước 3: Chèn đoạn script mặc định của Blogger trước thẻ đóng </body>

Copy


<b:template-script async='true' name='indie' version='1.0.0'/>

Hình minh họa:

+ Bước 4: Viết css cho nút chia sẻ đặt trước </b:skin>

Copy


.post-share-buttons{position:relative;display:inline-block;}

.byline{color:rgba(0,0,0,0.54);display:inline-block}

.byline.post-share-buttons{position:relative;display:inline-block;width:100%}

.share-buttons{background-color:#ffffff;border-radius:2px;box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);color:#212121;list-style:none;margin:0;position:absolute;top:-11px;min-width:200px;z-index:101}

.share-buttons.hidden{display:none}

.share-buttons li{margin:0;height:48px}

.share-buttons li .platform-sharing-text{display:inline-block;font-size:16px;line-height:48px;white-space:nowrap;margin-left:20px}

.share-buttons li span.sharing-platform-button{position:relative;top:0}

.share-buttons li .sharing-platform-button{box-sizing:border-box;cursor:pointer;display:block;height:100%;margin-bottom:0;padding:0 15px;position:relative;width:100%}

.share-buttons li .sharing-platform-button:focus,.share-buttons li .sharing-platform-button:hover{background-color:rgba(128,128,128,.1);outline:0}

.share-buttons li svg[class*=&quot;sharing-&quot;],.share-buttons li svg[class^=sharing-]{position:absolute;top:10px}

.share-buttons .svg-icon-24{fill:#212121}

.sharing-button{background:0 0;border:0;margin:0;outline:0;padding:0;cursor:pointer}

.sharing-button:hover{background:#ddd;border-radius:50%}

.dialog{box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);background:#ffffff;box-sizing:border-box;color:#757575;padding:30px;position:fixed;text-align:center;width:calc(100% - 24px);z-index:101}

.link-copied-dialog{max-width:520px;outline:0}

.link-copied-dialog .modal-dialog-buttons{margin-top:8px}

.dialog .goog-buttonset-default{color:$(body.link.color);text-transform:uppercase}

.link-copied-dialog .goog-buttonset-default{background:0 0;border:0}

.svg-icon-24-button,.touch-icon-button{background:0 0;border:0;margin:0;outline:0;padding:0}

.svg-icon-24,.svg-icon-24-button{cursor:pointer;height:24px;width:24px;min-width:24px;fill:#707070}

svg:not(:root).touch-icon{overflow:visible}

svg:not(:root){overflow:hidden}

.flat-button{outline:none;cursor:pointer;display:inline-block;font-weight:700;border-radius:2px;padding:8px;margin:-8px}

.flat-icon-button{background:transparent;border:0;outline:none;padding:8px;cursor:pointer;box-sizing:content-box;display:inline-block;line-height:0}

.flat-icon-button,.flat-icon-button .splash-wrapper{border-radius:50%}

.flat-icon-button .splash.animate{-webkit-animation-duration:0.3s;animation-duration:0.3s}

#sharing-dim-overlay{background-color:transparent}

.dim-overlay{background-color:rgba(0,0,0,.54)}

.dim-overlay{background-color:rgba(0,0,0,.54);height:100vh;left:0;position:fixed;top:0;width:100%;z-index:10}

.hidden{display:none}

.ripple{position:relative}

.ripple > *{z-index:1}

.splash-wrapper{bottom:0;left:0;overflow:hidden;pointer-events:none;position:absolute;right:0;top:0;z-index:0}

.splash{background:#aaaaaa;border-radius:100%;display:block;opacity:.9;position:absolute;-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0)}

.splash.animate{-webkit-animation:ripple-effect 0.4s linear;animation:ripple-effect 0.4s linear}

@-webkit-keyframes ripple-effect{100%{opacity:0;-webkit-transform:scale(2.5);transform:scale(2.5)}}

@keyframes ripple-effect{100%{opacity:0;-webkit-transform:scale(2.5);transform:scale(2.5)}}