Modifikasi AMP-Social-Share Fixed Show Hide Animation

Ditulis oleh: Adhy Suryadi

Ditulis pada: 11/03/2016

Berawal ketika ngoprek template Kompi Design v2 dengan AMP, saya mencari cara untuk update template agar terlihat lebih fresh dengan sesuatu yang baru. Akhirnya saya memutuskan untuk memodifikasi amp-social-share agar terlihat berbeda dari sebelumnya, dan lebih aktraktif.

Secara default, amp-social-share tampak datar horizontal ke samping kanan dengan bentuk tombol kotak. Dan kita bisa memodifikasinya sesuka hati dengan css style, salah satunya menjadi tombol amp social share fixed with show hide and animation.

Untuk show hide-nya kita menggunakan amp-accordion dengan menambahkan css animation untuk efek show button-nya.




Jika Anda menggunakan blog AMP dan ingin mencoba menggunakan amp social share fixed with show hide and animation ini, silahkan ikuti langkah-langkahnya di bawah ini.

1. Langkah Pertama

Pastikan blog AMP Anda sudah memiliki kedua js di bawah ini.

<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'/>

2. Langkah Kedua

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>

  </ul>

      </div>

  </section>

  </amp-accordion>

<div class='clear'/>

</b:includable>

Dan simpan di bawah kode </b:includable> pada kode berikut

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

...............

...............

...............

</b:includable>

3. Langkah Ketiga

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>

4. Langkah Keempat

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%}



.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}

}

5. Langkah Kelima

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

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

Selesai... selamat mencoba....