Cara Membuat Sosial Share Animation Ala Kompi Ajaib

BLOG MOBILE.

Assalamualaikum balik lagi di blog pribadi saya yang sederhana ini.

Pada kesempatan kali ini saya akan membuat ya lebih tepatnya meniru cara membuat sosial share animation untuk blog accelerated mobile page seperti kompi ajaib.karna template yang saya gunakan sekarang ini juga buatan Kompi Ajaib hehe.

Kalo pada umum nya sosial share biasa biasa saja cuma mendatar saja
Dengan membuat sosial share animation akan kebih menarik dengan efek show hide pixle.

Langsung saja

LANGKAH PERTAMA

Pastikan juga sebelumnya simpan amp js berikut ini { jika belum memasangnya }.

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

LANGKAH KE DUA.

Tambahkan 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'><svg viewBox='0 0 24 24'>
    <path d='M18,16.08C17.24,16.08 16.56,16.38 16.04,16.85L8.91,12.7C8.96,12.47 9,12.24 9,12C9,11.76 8.96,11.53 8.91,11.3L15.96,7.19C16.5,7.69 17.21,8 18,8A3,3 0 0,0 21,5A3,3 0 0,0 18,2A3,3 0 0,0 15,5C15,5.24 15.04,5.47 15.09,5.7L8.04,9.81C7.5,9.31 6.79,9 6,9A3,3 0 0,0 3,12A3,3 0 0,0 6,15C6.79,15 7.5,14.69 8.04,14.19L15.16,18.34C15.11,18.55 15.08,18.77 15.08,19C15.08,20.61 16.39,21.91 18,21.91C19.61,21.91 20.92,20.61 20.92,19A2.92,2.92 0 0,0 18,16.08Z' fill='#000000'/>
</svg></div>
<div class='show-less rotateIn'><svg viewBox='0 0 24 24'>
    <path d='M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z' fill='#000000'/>
</svg></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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7sESCAaDsgYCXE-to0vgEIowq6ku6uabxWD7Z9AqIVnmJtW85Xp9gG3mGBkKywkbio8wJdCNT7jIT3oGpDLl-cbr5wL25_pMV5Qf4ANP6OgHrkP20jFMfVr6MqY9ylFhCJGiTO05NcH41/s1600/wa.png' width='35'/>
</amp-social-share>
</li>
</b:if>
  </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>

LANGKAH KE TIGA

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 bangat harus teliti yah 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>

anda juga bisa gunakan SCC sekreatif mungkin untuk tampilan yang lebih menarik lagi hehe




SELESAI SELAMAT MENCOBA

HADILNYA BISA DI LIAT DI SAMPING KANAN BLOG SAYA.