Membuat Share Button di Amp-social-share dengan Show Hide

Kemarin saya telah membagikan Cara Memasang Share Button WhatsApp pada Blogger AMP, kali ini kita akan membuat tombol share dengan Whatsapp, linkedin, pinterest, facebook, google+, dan twitter.
Share Button di Amp-social-share dengan Show Hide

Cara Membuat Share Button di Amp-social-share dengan Show Hide

Pastikan blog AMP Anda sudah memiliki JS berikut

<script async='async' custom-element='amp-social-share' src='https://cdn.ampproject.org/v0/amp-social-share-0.1.js'/>
<script async='async' custom-element='amp-accordion' src='https://cdn.ampproject.org/v0/amp-accordion-0.1.js'/>

Tambakan kode HTML di bawah ini

              <b:includable id='share-tool' var='post'>
<amp-accordion class='shares'>
    <section>
<h4 class='show-share'>
<div class='show-more rotateIn'><i class='material-icons'>&#59405;</i></div>
<div class='show-less rotateIn'><i class='material-icons'>&#58829;</i></div>
</h4>
<div class='share-icon'>
<ul class='slideInUp'>
   <li class='slideInUp1'> <amp-social-share height='50' type='twitter' width='50'/></li>
   <li class='slideInUp2'> <amp-social-share height='50' type='gplus' width='50'/></li>
   <li class='slideInUp3'> <amp-social-share data-param-app_id='145634995501895' height='50' type='facebook' width='50'/></li>
   <li class='slideInUp4'> <amp-social-share height='50' type='pinterest' width='50'/></li>
   <li class='slideInUp5'> <amp-social-share height='50' type='linkedin' width='50'/></li>
<b:if cond='data:blog.isMobileRequest == &quot;true&quot;'>
<li class='slideInUp5 wa'>
<amp-social-share data-share-endpoint='whatsapp://send' expr:data-param-text='&quot;Ada yang keren lho, nyesel kalo ga buka.. kunjungi: &quot; + data:blog.url' layout='container' type='whatsapp'>
    <amp-img alt='Share via Whatsapp' height='35' layout='fixed' src='https://4.bp.blogspot.com/-nuWfSt-GHRc/WBsZe1kXxmI/AAAAAAAAH7c/gGKKNm32SkYqQthHzcptJrqk4GejHdjGgCK4B/s1600/wa.png' width='35'/>
</amp-social-share>
</li>
</b:if>
  </ul>
      </div>
  </section>
  </amp-accordion>
<div class='clear'/>
</b:includable>

Simpan di bawah kode </b:includable> pada kode berikut

<b:includable id='postQuickEdit' var='post'>
...............
...............
...............
</b:includable>

Simpan kode di bawah ini

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:include data='post' name='share-tool'/>
</b:if>

Di bawah postingan atau di bawah kode seperti atau mirip seperti di bawah ini.

<b:if cond='data:blog.pageType == &quot;item&quot; or data:blog.pageType == &quot;static_page&quot;'>
  <data:post.body/>
</b:if>
      <div class='clear'/> <!-- clear for photos floats -->
    </div>

Silahkan simpan kode CSS di bawah ini di style amp-custom untuk postingan (baik desktop maupun mobile jika dipisahkan).

amp-accordion.shares{position:fixed;bottom:70px;right:30px;z-index:9999}
amp-social-share{border-radius:100%;box-shadow: 0 6px 12px rgba(0,0,0,.2);background-size:30px}
h4.show-share{background:none;border:none;margin:0;padding:20px}
.show-share .show-less,.show-share .show-more{color:#fff;font-size:24px;width:50px;height:50px;line-height:50px;padding:0;margin:0;text-align:center;border-radius:100%;background:#2196f3;border:none;box-shadow: 0 6px 12px rgba(0,0,0,.2);position:fixed;bottom:30px;right:30px;z-index:10000}
amp-accordion.shares section:not([expanded]) .show-less,amp-accordion.shares section[expanded] .show-more{display:none}
amp-accordion.shares ul,amp-accordion.shares li{list-style-type:none}
amp-accordion.shares li{margin-bottom:5px}
amp-accordion.shares li:last-child{margin-bottom:0}
amp-accordion.shares .share-icon{padding:0;position:absolute;top:100%}
amp-accordion.shares li.wa amp-social-share{background:#38bd4c;overflow:hidden;width:50px;height:50px;line-height:50px;text-align:center}
amp-accordion.shares li.wa amp-social-share amp-img{vertical-align:middle}

.slideInUp1,.slideInUp2{-webkit-animation-name:slideInUp;-webkit-animation-fill-mode:both}
.slideInUp1{animation-name:slideInUp;-webkit-animation-duration:3s;animation-duration:3s;animation-fill-mode:both}
.slideInUp2{animation-name:slideInUp;-webkit-animation-duration:2.5s;animation-duration:2.5s;animation-fill-mode:both}
.slideInUp3,.slideInUp4{-webkit-animation-name:slideInUp;-webkit-animation-fill-mode:both}
.slideInUp3{animation-name:slideInUp;-webkit-animation-duration:2s;animation-duration:2s;animation-fill-mode:both}
.slideInUp4{animation-name:slideInUp;-webkit-animation-duration:1.5s;animation-duration:1.5s;animation-fill-mode:both}
.slideInUp,.slideInUp5{-webkit-animation-name:slideInUp;animation-name:slideInUp;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}
@-webkit-keyframes slideInUp{0%{-webkit-transform:translateY(100%);transform:translateY(100%);visibility:visible}
100%{-webkit-transform:translateY(0);transform:translateY(0)}
}
@keyframes slideInUp{0%{-webkit-transform:translateY(100%);transform:translateY(100%);visibility:visible}
100%{-webkit-transform:translateY(0);transform:translateY(0)}
}
.rotateIn{-webkit-animation-name:rotateIn;animation-name:rotateIn;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}
@-webkit-keyframes rotateIn{0%{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:rotate3d(0,0,1,-200deg);transform:rotate3d(0,0,1,-200deg);opacity:0}
100%{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:none;transform:none;opacity:1}
}
@keyframes rotateIn{0%{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:rotate3d(0,0,1,-200deg);transform:rotate3d(0,0,1,-200deg);opacity:0}
100%{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:none;transform:none;opacity:1}
}

Karena ada tombol yang menggunakan material icon, jadi pastikan sudah memasang font Material Icon blognya.

<link href='https://fonts.googleapis.com/css?family=Material+Icons' rel='stylesheet' type='text/css'/>

Sekian tentang cara membuat Share Button di Amp-social-share dengan Show Hide. Semoga bermanfaat...

Reaksi:
Share this with short URL:

You Might Also Like:

Use parse tool to easy get the text style on disqus comments:
Show Parser Hide Parser