Membuat Share Button di Amp-social-share dengan Show Hide

Membuat Share Button di Amp-social-share dengan Show Hide

Membuat Share Button di Amp-social-share dengan Show Hide

Kemarin saya telah membagikan Cara Memasang Share Button WhatsApp pada Blogger AMP, kali ini kita akan membuat tombol share dengan Whatsapp, linkedin, pinterest, facebook, google+, dan twitter.
Share Button di Amp-social-share dengan Show Hide

Cara Membuat Share Button di Amp-social-share dengan Show Hide

Pastikan blog AMP Anda sudah memiliki JS berikut

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

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

Simpan di bawah kode </b:includable> pada kode berikut

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

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>

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

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

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

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

Sekian tentang cara membuat Share Button di Amp-social-share dengan Show Hide. Semoga bermanfaat...

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Blogger
Disqus
Pilih Sistem Komentar Yang Disukai

14 Comments Add Comment

Kalau pakai blogger agak ribet ya, harus menambah coding", beda dengan Wordpress yang hanya add plugin share button.

Salam,
Nur kholis

Balas

iya mas, blogger harus buat coding beda sama wordpress. :D

Balas

Saya nggak ngerti. Amp itu apa? Apa bedanya sama sosial share biasa?

Balas

Blog dengan AMP HTML dirancang agar halaman web/blog dapat diakses melalui perangkat mobile dengan lebih baik serta lebih cepat demi meningkatkan pengalaman pengguna yang lebih baik.

Tombol Amp-social-share hanya khusus untuk blog yang menggunakan template AMP.

Balas

Asli penasaran banget dengan template AMP gan... Duh Indonesia masih Om Adhy ya yg jualan hee apa lagi sudah social share yang AMP juga

Balas

Bedanya dengan widget di tempat tempat lain apa ya gan :/ ??

Balas

iya di coba pake template AMP mas, iya masih kang Adhy dan Kang Ismet yg lagi fokus sama AMP.

Balas

Tombol Amp-social-share hanya khusus untuk blog yang menggunakan template AMP.

Balas

Wa... ternyata ada caranya juga.. hihi. Siap dipraktekan,. . Thanks gan :D

Balas

Masih bingung hehe menyangkut bahasa komputer ini

Balas

wab bs dicoba nih. Tp kode html di atas bs dipke di blogger yg html5 gak? Klo gak pke code html5 suka error. Thanks infonya

Balas

mantap bro, sukses scriptnya

Balas
Add Comment

Berkomentarlah dengan baik, Kepribadian anda tercemin saat berkomentar.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like CIDOSHARE? Keep us running by whitelisting CIDOSHARE in your ad blocker.

This is how to whitelisting CIDOSHARE in your ad blocker.

Thank you!

×
×
×