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

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

+ 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:

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

+ 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)}}

Chấm hết bài!!!

3
Hãy để lại một câu trả lời bạn muốn

avatar
250
3 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
1 Comment authors
Nguyễn DuyStar HuyViệt Blogger Recent comment authors
  Subscribe  
Mới nhất Lâu đời nhất
Thông báo
Nguyễn Duy
Khách

Pro thật :))

Star Huy
Khách

có demo mấy nút chia sẻ ko a

Việt Blogger
Khách

Demo cuối bài viết trên khung nhận xét đó em, bỏ chặn quảng cáo nha

Scroll to top
0353.456.495