Home Blog Tutorial CSS HTML JS Add Telegram Sharing Button Fixed with Show Hide and Animation

Tuesday, January 10, 2017

Add Telegram Sharing Button Fixed with Show Hide and Animation

Published

Niatnya hari ini mau mempublikasikan sebuah artikel tentang hukum wanita tidak memakai mukena ketika akan melakukan salat maktubah dan tentu saja dilengkapi dengan video pendukungnya. Sambil menunggu proses unggahan video di YouTube selesai, iseng-iseng ah blog-walking lagi ke blog para mastah Blogger 😁 Eh, tiba-tiba dapat ide cemerlang dari artikel Kang Adhy yang membahas tentang cara memodifikasi AMP-Social-Share Fixed Show Hide Animation. Dan saya pun bergegas untuk melanjutkan artikel saya yang sebelumnya yang mana pada artikel tersebut hanya mengandalkan fungsi tabel untuk cara penerapan social-share-nya. Dan untuk perbedaannya itu terletak pada tombol share media sosial yang mana beliau memodifikasi amp-social-share menjadi show hide and animation.

Dan pada akhirnya pun saya menambahkan Telegram sharing button pada artikel Kang Adhy sebelumnya. In my opinion Telegram is the best secure messaging apps and I recommend every single one to switch to Telegram because it's simple, fast, and secure. Bahkan salah satu situs ternama seperti Jalan Tikus mengutarakan pendapatnya untuk meninggalkan WhatsApp dan segera beralih ke Telegram. Di sini saya bukan promosi atau orang dalam dari perusahaan Telegram itu sendiri, tapi saya hanya ingin membagikan apa yang saya rasakan, karena untuk sekarang ini saya hanya memakai aplikasi Telegram saja untuk alat komunikasi saya sehari-hari. Kenapa kok banyak orang yang lebih memilih WhatsApp daripada Telegram? Tentu saja karena WhatsApp adalah aplikasi terpopuler di Play Store maupun AppStore, jadi maklum saja kalau banyak orang yang tidak tahu tentang kehebatan aplikasi Telegram dibanding WhatsApp. Sebenarnya alasan utama saya mengapa saya lebih suka memakai aplikasi Telegram dibanding Whatsapp adalah prinsip saya suka sekali dengan platform yang memberikan kebebasan bagi penggunanya untuk berkerasi sekreatif mungkin (read: open-source).

Jadi curhat nih ceritanya 😝 Yuk, langsung saja kita terapkan tutorial di bawah pada blog AMP Anda. Check it out, guys~

Langkah pertama:
Tambahkan kedua JS di bawah; 

<b:if cond="data:blog.pageType == &quot;item&quot;">
<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'/>
</b:if>

Lalu simpan kedua JS di atas, tepat di atas kode </head>.

Notes: Karena amp-social-share dan amp-accordion hanya dibutuhkan pada bagian postingan saja, maka supaya tidak menyebabkan yellow error, maka kedua JS tersebut wajib hukumnya untuk menggunakan tags cond hanya untuk halaman postingan saja.

Langkah kedua:
Tambahkan kode HTML di bawah; 

<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 data-param-app_id='145634995501895' height='50' type='facebook' width='50'/></li>
   <li class='slideInUp2'> <amp-social-share height='50' type='twitter' width='50'/></li>
<li class='slideInUp3 tg'>
<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='37' layout='fixed' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUtOVKFBh2Uj7X0QosRR7U4RL-4H_7vnVGxnu9wstlRKPxqYvaiFVs0UCYmmW6IK1EDMI9cbxxxeo404vp9quDxbzT5Javf4_ASn9dxO6vbPwps-_QXVtVL95rNMHsvtmdpjLacQgBvDM/s1600/telegram.png' width='37'/>
</amp-social-share>
  </li>
<li class='slideInUp4 wa'>
<amp-social-share data-share-endpoint='whatsapp://send' expr:data-param-text='data:post.title + &quot; - &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/AVvXsEhyIxbsvno8bzDoMNijR0-nDLcIXhqrJGw0Vi_wOViO4gu9b6GkiLVH3qlxqShHAkiMBeIBsFmlzx96ffI4nKn7QaC-D3_mDfCtJGpzUvGX0RG2s-JGjhS9SDNmipiRWdwzyHTSZNngwXqA/s1600/wa.png' width='35'/>
</amp-social-share>
</li>
<li class='slideInUp5'> <amp-social-share height='50' type='gplus' width='50'/></li>
  </ul>
      </div>
  </section>
  </amp-accordion>
<div class='clear'/>
</b:includable>

Dan simpan kode HTML di atas, di bawah kode </b:includable> pada kode berikut; 

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


Langkah ketiga:
Simpan kode di bawah; 

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

Dan simpan kode di atas, di bawah kode yang mirip seperti kode di bawah; 

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


Langkah keempat:
Tambahkan kode CSS di bawah; 

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}
amp-accordion.shares li.tg amp-social-share{background:#0088cc;overflow:hidden;width:50px;height:50px;line-height:50px;text-align:center}
amp-accordion.shares li.tg 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}
}

Dan simpan kode CSS di atas, pada style amp-custom tampilan desktop maupun mobile.

Langkah terakhir:
Bagi Anda yang belum menambahkan link font material icon, tambahkan link di bawah, tepat di atas kode </head>. 

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


Oh, ya. Saya tidak menambahkan tags cond <b:if cond='data:blog.isMobileRequest == "false"'> pada Telegram and Whatsapp sharing button, karena menurut sudah banyak pengguna yang lebih suka menggunakan Telegram and Whatsapp for desktop (termasuk saya). Dan saya pun sedikit mengkostumisasi tombol berbagi media sosialnya seperti menghapus Pinterest and LinkedIn sharing button, karena menurut saya Pinterst dan LinkedIn kurang efektif dan tidak sesuai ekspektasi.

That's all~

Share This!

Artikel Terkait

Unknown

Next Post
Previous Post
Load comments
Subscribe to: Post Comments (Atom)