Cara Memasang Sosial Share Telegram Dengan Animation Show Hide

TELAGRAM merupakan sebuah aplikasi massaging berbasis cloud bahkan sudah banyak orang yang membahas atau membanding bandingkan aplikasi telegram dengan platform messaging lainnya sebut saja salah satunya Whatsapp.
Walaupun secara specifically telegram lebih unggul di bandingkan dengan platform Massangging lainya.
Tapi tidak dapat dipungkiri whatsapp dan facebook massanger merupakan platform Massangging yang paling popular di dunia ini,siapa yang tidak tau dengan aplikasi mereka.

Dari data di tahun 2015 telegram sudah menghantar 1 billion message dan di gunakan oleh lebih dari 50 juta pengguna aktif.
Karna telegram ini mempunyai penyimpanan awan jadi walaupun smartphone anda mempunyai kapasitas ram yang kecil dengan begitu tidak akan memberatkan snartphone anda.

Telegram juga di gunakan di beberapa situs situs yang menyediakan khursus online sebagai alat massaging. Karna telegram juga termasuk massaging yang sangat cepat.

Berikut ini beberapa kelebihan telegram.

• File transfer dengan kapasitas yang sangat besar 39.8 MB anda bisa share file jenis PDF word,Excel bahkan ebook yang mempunyai size file yang cukup besar   hebat kan ini tentunya hal yang tidak bisa di lakukan di aplikasi massaging lainnya.
• Pengguna Username. berbeda dengan whatsapp hanya menggukan nomer.
• Tidak Tergantung pada telphone bitmit.pada umumnya aplikasi massaging lainya memperlukan telphone untuk menghantarkan massage , telegram pula boleh di gunakan pada destop atau tablet.anda cukup mempunyai no telphone untuk tujuan pengenal saja. 
• Dan masih banyak lagi kebihannya dan pastinya juga banyak juga Kekurangan nya hehe 

Mungkin sedikit mengerti yah tetentang telegram. 

Langsung saja ke topik utama sesuai dengan judul postingan.

LANGKAH PERTAMA.

ini sama Seperti membuat  sosial share pixel animation kita hanya cukup menambahkan kode telegram nya saja.

Kode HTML yang saya share kemarin seperti 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 tambahkan kode HTML telegram hingga menjadi seperti 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>
<li class='slideInUp6 telegram'>
<amp-social-share expr:data-share-endpoint='&quot;tg://msg?text=&quot; + data:post.title + &quot; - &quot; + data:blog.url' layout='container' type='telegram'>
    <amp-img alt='Telegram' height='35' layout='fixed' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYR0cOQxTm6tHv3_LGWbvdZzP0vC374jE9Mee2bc8zX_xHl4qIJR1B8RSuedQ8fCGGCcPORigHMIOCYLn5Ah3HNierQj3SiKRkDGVccU2A8GcPZ_EO4ZwrTIOik_JUyh3B_ktoBCbPlZw/s1600/blog+mobile.jpg' width='35'/>
</amp-social-share>
</li>
</b:if>
  </ul>
      </div>
  </section>
  </amp-accordion>
<div class='clear'/>
</b:includable>

LANGKAH KE  DUA.

Tinggal tambahkan CSS di bawah ini di <style amp-custom='amp-custom'>.

amp-accordion.shares li.telegram amp-social-share{background:#00aaff;overflow:hidden;width:50px;height:50px;line-height:50px;text-align:center}
amp-accordion.shares li.telegram amp-social-share amp-img{vertical-align:middle}

SELESAI 

anda bisa liat demo nya di bawah ini.

Demo

Keterangan saya menggukan sosial share telegram dengan versi mobile pastikan buka pake smartphone.

Kalo ingin memasangnya di versi destop anda bisa edit edit lagi hehe 

Mungkin hanya itu yang bisa saya sampaikan selamat mencoba.