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


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.

blog views
Reactions:
Donate via PayPal

You Might Also Like:

ADD A COMMENT WITH YOUR FACEBOOK PLEASE WAIT FOR FACEBOOK COMMENT WILL SOON OPEN

ADD A COMMENT WITH DISQUS HIDE COMMENT

Disqus Comments

ADD A COMMENT WITH GOOGLE PLUS HIDE COMMENT

google Comments

Hello, how may we help you? Just send us a message now to get assistance.

Facebook Messenger ×